Once worked with Cypress.io before but completely forgotten how to work around that cross origin error of theirs. Baically this code gives me error:
context('searching example',() => {
beforeEach('open google',() => {
// Cypress.config('chromeWebSecurity', true);
cy.visit('https://google.com');
})
describe('google test example', ()=>{
it('search for death star',() => {
cy.get("button[role='link']").click()
})
})
})
The error I'm getting is:
CypressError
Cypress detected a cross origin error happened on page load:
> Blocked a frame with origin "https://www.google.com" from accessing a cross-origin frame.
Before the page load, you were bound to the origin policy:
> https://google.com
A cross origin error happens when your application navigates to a new URL which does not match the origin policy above.
A new URL does not match the origin policy if the 'protocol', 'port' (if specified), and/or 'host' (unless of the same superdomain) are different.
Cypress does not allow you to navigate to a different origin URL within a single test.
You may need to restructure some of your test code to avoid this problem.
Alternatively you can also disable Chrome Web Security in Chromium-based browsers which will turn off this restriction by setting { chromeWebSecurity: false } in cypress.json.Learn more
I've tried adding this to cypress.json to no avail
{"chromeWebSecurity": false}
Permanent, it is not: feat: Multi-domain Support #18075
Install as a pre-release using
npm install https://cdn.cypress.io/beta/npm/9.6.0/win32-x64/feature-multidomain-8f7cc74ba942ead88ab09d632630c1d14679abfb/cypress.tgz
From Gleb Bahmutov's video Visit Two Domains In The Same Cypress Spec
Here's some sample code from that release.
It looks like the same scenario you're describing.
Sample page
<body>
<div>
Go to different domain:
<a data-cy="multi_domain_secondary_link"
href="http://www.foobar.com:4466/multi_domain_secondary.html">http://www.foobar.com:4466/multi_domain_secondary.html</a>
</div>
</body>
Test
// @ts-ignore / session support is needed for visiting about:blank between tests
describe('multi-domain', () => {
beforeEach(() => {
cy.visit('/multi_domain.html')
cy.get('a[data-cy="multi_domain_secondary_link"]').click()
})
it('tries to find an element that doesn\'t exist and fails', () => {
cy.switchToDomain('http://foobar.com:4466', () => {
cy.get('#doesnotexist', {
timeout: 1000,
})
})
})
})
The error that you are getting is a permanent trade=off from cypress and you can read more about it from the cypress docs. In a nutshell you cannot a work with url's from different origin in the same test.
Given the URLs below, all have the same-origin compared to https://www.cypress.io
https://cypress.io
https://docs.cypress.io
https://example.cypress.io/commands/querying
The URLs below, however, will have different origins compared to https://www.cypress.io.
http://www.cypress.io (Different protocol)
https://docs.cypress.io:81 (Different port)
https://www.auth0.com/ (Different host of different superdomain)
Solution: Try dividing your tests into two different tests something like this:
it('navigates', () => {
cy.visit('https://apple.com')
})
// split visiting different origin in another test
it('navigates to new origin', () => {
cy.visit('https://google.com') // yup all good
})