web application doesn't load correctly with Cypress

[pinko2512]

My team is working on a web application and we decided to use Cypress for automated tests. Problem is, when we run these tests, they only get past login screen. Home screen doesn't load correctly. This happens ONLY in Chrome driven by Cypress and Electron driven by Cypress. In normal Chrome the application runs without errors.

Current behavior:

When running Cypress tests, web application doesn't load correctly and console displays these errors on home screen:

Uncaught SyntaxError: Invalid or unexpected token
Uncaught Error: Cannot find module 'jquery'
Uncaught Error: Cannot find module 'angular-cookies'

Desired behavior:

Behaviour should be the same in standalone Chrome and Chrome driven by Cypress (and Electron).

Versions

Windows 10
Cypress 3.2.0,
Chrome 74, Electron 59

If somebody knows what's happening and how can it be fixed, please let me know. Thank you

[jennifer-shehane]

Hey @pinko2512 are there any errors displaying within the Cypress Test Runner? Could you print those?

Unfortunately, this will be quite difficult to track down without being able to reproduce on our end, but any more information you can provide, screenshots/videos may be helpful.

[pinko2512]

When the test fails, Test Runner shows this error:

Chrome console doesn't show anything.

If I add these lines to the test:

Cypress.on('uncaught:exception', (err, runnable) => {
  return false
})

then the test fails because it can't select an element (home page is not loaded correctly) and Chrome console shows this:

[pinko2512]

We fixed the issue. The problem was that when we opened first Uncaught SyntaxError - Invalid token, we found this:

The same file run on the standalone Chrome was loaded correctly, so it had to be issue with Cypress encoding. After some googling we found that Cypress settings has a default settings with this property:
"modifyObstructiveCode": true

https://on.cypress.io/configuration#modifyObstructiveCode

After setting it to false it works well.

[jennifer-shehane]

@pinko2512 Nice investigating. Could you provide the original function code as it appeared in normal Chrome versus the function code that displays within the Cypress browser when modifyObstructiveCode: true was set?

There should have been something surrounding this code related to window, parent, or top` like one of these examples in our code, if you can paste the code starting from there - https://github.com/cypress-io/cypress/blob/develop/packages/driver/test/cypress/fixtures/security.html#L15

We certainly don't intend to create any malformed tokens like this.

[jennifer-shehane]

@pinko2512 Any update on this?

[jennifer-shehane]

Unfortunately we have to close this issue due to inactivity. Please comment if there is new information to provide concerning the original issue and we can reopen.

[paopao1983]

Hello Jennifer. I'm new in cypress and I'm getting this error too, but I don't identify how can localice the "wrong" code. The Dev team made some changes last week and I started to get this error today that I have updated project, and I don't know how to tell them what search for and adjust. If I add ("modifyObstructiveCode": false) to the config, my script runs but i don't know if this can affect other scripts.

[saas2813]

I tried adding
"modifyObstructiveCode": false
to my cypress.json but it did not help with my problem from #4889.
Is cypress.json the right file? should the setting be located on top-level or somewhere else ?

[jennifer-shehane]

Yes, cypress.json is the correct file for this setting. You can read more here. https://docs.cypress.io/guides/references/configuration.html#modifyObstructiveCode

If you're experiencing a bug similar to this in Cypress, please open a new issue with a fully reproducible example that we can run. There may be a specific edge case with the issue that we need more detail to fix.