QA Automation Labs

How to test multiple domains or origins with Cypress

image-14

How to test multiple domains or origins with Cypress

Problem Statement

Before cypress version 9.6.0 if you want to run test cases in two domains under the same test case it gives us a cross-origin error

After Version 9.6.0 this problem was solved, Now we can easily execute our test cases across multi-domain by using cy.origin() command.

In this blog for demo purposes, I am using Cypress version 12.0.1

How to solve the problem

Before coming to the solution let’s see if we run the below test cases (Before Cypress Version 9.6.0) and what error comes

In the below screenshot there are two described blocks in the first described block we are opening two domain URLs in different test cases (it() blocks) and in the second described block we are opening two domain URLs under the SAME test case /or it() block to run our test cases.

Testing multiple superdomains in a single test! With the experimental cy.origin() command,

What Error comes at present?

When we run the above test cases, the first describe block runs successfully but in the second describe block as we have given two domains under the same test cases it throws an error see below. Error: The new URL is considered a different origin because the following parts of the URL are different

cy.origin() command,

Solution for multi-domain testing

With cy.origin() we can execute commands against any number of domains, all in the context of a single test case. Here’s a trivial example that fixes the failing test we introduced in the above section.

Under the hood, 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.

In the below screen, we are using cy.origin()

Testing application across multiple domain using cy.origin()

Package.json attached below

Code attached below#1 First describe block describe(“Two Domain urls in different Test case”, function () { it(“Open the Url”, () => { cy.visit(“https://docs.cypress.io/”); }); it(“Visit the url and Login to new origin”, () => { cy.visit(“https://www.saucedemo.com/”); cy.wait(3000); cy.get(‘[id=”user-name”]’).clear().type(“standard_user”); cy.get(‘[id=”password”]’).clear().type(“secret_sauce”); cy.get(‘[name=”login-button”]’).click(); cy.contains(“Products”).should(“be.visible”); }); }); – — – – – – — — – – – – – – – – – – – – – – #2 Second describe block describe(“Two Domain urls under Same Test case”, function () { it(“Open two different Urls under same test case and serach the data”, () => { cy.visit(“https://docs.cypress.io/”); cy.contains(“Why Cypress”); cy.origin(“https://qaautomationlabs.com/”, () => { cy.visit(“/blogs/”); cy.wait(2000); cy.contains(“How to Setup And Run Cypress Test Cases in Google Cloud?”); cy.contains(“Blog”).scrollIntoView().click({ force: true }); cy.get(‘[id=”wp-block-search__input-2″]’).scrollIntoView(); cy.get(‘[id=”wp-block-search__input-2″]’) .click({ force: true }) .type(“cypress”); cy.get(‘[id=”search-icon”]’).click({ force: true }); cy.contains(“Search Results for: cypress”); }); }); });

Test Result after using cy.origin() for different domain url’s

In the below screenshot, we can see when we use cy.origin() all test cases are passed without any different origin error

Testing multiple superdomains in a single test! With the experimental cy.origin() command,

How to enable cy.origin command

In cypress.config.js set the below command

Multiple superdomains in a single test! With the experimental cy.origin() command,

{
“experimentalSessionAndOrigin”: true
}

When experimentalSessionAndOrigin is enabled, Cypress will no longer wait on page loads between hooks before moving on to the next test.

Conclusion

We can use cy.origin() command to test the application across the different domains without any failure. Using cy.origin() command, you can easily switch between origins to seamlessly test syndicated authentication, cross-site CMS workflows, and much more.

Resources

For further reading about cy.origin() please follow the below link

https://www.cypress.io/blog/2022/04/25/cypress-9-6-0-easily-test-multi-domain-workflows-with-cy-origin/#enabling-the-cyorigin-command

Leave a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Let’s Play with Cypress Feature “Test Replay”

Problem Statement Before Cypress v13, test failures in CI have historically been captured through screenshots, videos, and stack trace outputs, b
Read More

Handling Shadow DOM Using Cypress

The idea of componentization has completely changed how we design and maintain user interfaces in the field of web development. The advent of Shadow D
Read More

Gear up for upcoming Conferences of 2024! ✨✨

Gear up for our upcoming Conferences of 2024! ✨ ✨ #TheTestTribe #SoftwareTesting #Testers #Community #Worqference #Worqference2024 #QonfX 
Read More