Monday, January 24, 2022

App breaks out of Cypress test run frame

Cypress is a end-to-end testing framework which is fast, easy and reliable testing for anything that runs in a browser.
Cypress version: 8.3.0

When using Cypress with ReactJS, you may run into a scenario where the tests run the first time, but subsequent tests break out of the Cypress tests run frame; and just shows your app, or your apps loading indicator.  So your tests stop.  

While clearing the Cypress cache fixes the tests for the next run, there should be a better solution.

In the developers tools, if you enable preserve logs for the console and network, you may see a redirect to `__`

Some searching for `cypress redirects to __` will lead you to

'Cypress test runner redirects to __ suddenly'

which suggests adding 
`
Cypress.on('window:before:load', (win) => {
      Object.defineProperty(win, 'self', {
            get: () => {
                return window.top
            }
        })
});
`

To add to your Cypress config,
assuming in `cypress.json` you have your support dir set to 
"supportFile": "[app-product]/support",

add the suggestion to a file
support/callbacks/fix_iframe_redirects.js

and in the support/index.js,
reference the file
import './callbacks/fix_iframe_redirects';

You may have to force refresh the Cypress browser, or clear the Cypress cache once more.

Additional config to check for:
While this seems to be the default, if you happen to be using an ejected Webpack config, also check that `navigateFallbackWhitelist` is set to check for `__`.  

...
new SWPrecacheWebpackPlugin({
...
navigateFallback: publicUrl + "/index.html",
navigateFallbackWhitelist: [/^(?!\/__).*/]
});


You may also encounter the generic error:
TypeError: Cannot set property name of  which has only a getter

Unfortunately, it seems that you can either delete the Cypress cache each time, or disable Chrome web security
tests/cypress/cypress.json
    "chromeWebSecurity": false,
With these changes, your Cypress tests should stay framed and run as expected.


-End of Document-
Thanks for reading 


No comments:

Post a Comment