CODEWITHSUNDEEP
javascriptcypress
MaxOstrov
MaxOstrov

Reputation: 11

Cross origin error when running very basic Cypress test. Setting cromeWebSecurity to false didn't work

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}

Upvotes: 1

Views: 2815

Answers (2)

Fody
Fody

Reputation: 31954

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,
      })
    })
  })
})

Upvotes: 2

Alapan Das
Alapan Das

Reputation: 18619

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
})

Upvotes: 0

Related Questions