Error in cypress_runner.js is reported as "error originated from your application code, not from Cypress"

Current behavior:

When a failure happens in the test script, it’s blaming the application code. In the example here, the cy.get() returns an object, but click() mysteriously fails. It does not fail if I remove the click(), but it will fail with the same CORS-related error if I change the image filename to something that doesn’t exist on the page. The error takes up huge vertical space and is unhelpful despite all the verbiage.

This is an AngularJS 1.x SPA. There are no errors in the console. The app’s .js file is served from the same origin as the html.

Intentionally bad code, such as cy.gxet(), shows an appropriate error, e.g.: “cy.gxet is not a function”

Desired behavior:

Tell me what really went wrong, if anything. It could be this is really an internal Cypress bug manifesting itself at cypress_runner.js:155859:20.

Test code to reproduce

describe("Click image button", () => {
  it('Flip image', () => {
    cy.visit("/puzzles/math-search.html");
    cy.get('[ng-src="/images/form/math_search_addition.gif"]').click();
  });
});

Versions

Cypress 4.7.0 MacOS 10.15.5 Chrome 83

[rhassingerr]

It would be complicated to provide more info due to the nature of the application, but I’m still exploring what’s going on. Surprisingly, the problem does not happen when I run the same code against the production server - that gives me a really good idea of where to look. There are some differences in the production HTML to make it smaller, css names and json keys are minimized, no diagnostics code, etc. I would dearly like to use cypress instead of our complicated and brittle selenium setup, so I’m motivated to invest more time to find the issue.

[anilpujaraofficial]