Cypress has introduced an experimental method, cy.origin() using which users can now access a different domain in the same test. This feature was heavily requested by the QA teams to test features such as third-party login, cross-site CMS workflows, and more..
Before version 9.6.0, if we tried to access a different domain other than the root domain from UI, Cypress would throw “cross origin error” due to Same Origin Policy as shown below. As a workaround we were using cy.request() in scenarios that redirect users to a different URL such as Google login.
After 9.6.0, we can write our tests using cy.origin.Cypress injects the test runtime into the secondary origin, sends it the text of the specified callback function, executes that function in the secondary domain, and finally returns control to the original test origin. We can use it either in an independent test, inside a custom command, or with cy.session. Here is an example of login to Netlify using Github.
The above test uses cy.origin to authenticate GitHub login and then takes back the flow to the original domain under test which is netlify.
NOTE: The browser used to run the test here is Firefox and not chrome. The reason will be explained in the next section.
Apart from this feature, there are some additional support features:
- Removed experimentalSessionSupport Flag
- Cross-domain requests will no longer fail immediately, but instead, time out based on pageLoadTimeout.
- Tests will no longer wait on page loads before moving on to the next test.
Enabling the cy.origin command
To enable cy.origin to run on this version, the mandatory step is to set the
"experimentalSessionAndOrigin" config option to true.
We can either do it on runtime
or can set the value in cypress.json file.
Issue with the Chrome browser
Although this feature brings in a lot of help in supporting E2E testing, some issues are yet to be fixed.
One of which is - Third-party login is not working properly on Chrome browser due to issues with cookies. This is logged under github issue - 21363 which will be fixed by cypress issue 20685. For time being we recommend using Firefox in case one faces issues with Chrome.
Currently, we can test at max only 1 domain change using this feature. Nested domain change will be implemented in future releases.
To know more about this, check out PR and Cypress-Documentation.