Cross-origin testing with Cypress

Cypress does not support cross-domain tests.. Yes & true, But.. there is a work-around! :)

You are reading this because, you have already heard that Cypress does not support cross-domain testing within a single test. Yes it is true and mentioned here in Cypress Docs too.

An image from Cypress Docs

Chill! There is a work-around for this head-burning LIMITATION. Let’s get on with it..

Step 1: Setting chromeWebSecurity to false

In your Cypress project, open the cypress.json file. If the files contains an attribute named as “chromeWebSecurity” set the value of it to false. If this attribute is not there add it as follows:

"chromeWebSecurity": false

Step 2: Write a Custom Command

Open the commands.js file in your Cypress project located under cypress/support folder. Add the following commands at the end of the file:

Cypress.Commands.add('forceVisit', url => {
    cy.window().then(win => {
        return win.open(url, '_self');
    });
});

Step 3: Write a Test Case & Check!

So it’s done now! Let’s write a test case using the custom command we wrote..

it('Force visit different domain', ()=> {
  cy.visit("https://www.instagram.com")
  cy.forceVisit("https://www.facebook.com")
})

That’s it! It’s a pretty simple work-around to overcome the limitation. Try it out and let me know if you have any questions. Comments section is open for you.. :)

Clap & Subscribe my Medium account if you are fond of my articles! Stay Safe & Happy Cypressing! ❤