Introduction It happens frequently that automation testing requires to be performed in multiple origins, i.e. when the base configured url is being replaced by another one during test execution. Good examples are which invoke opening a pop-up window with a domain different from the base url, or which provide website owner with the mechanism of purchasing subscriptions. log in/sign up forms via social networks third-party payment services Let’s run a simple test of opening a base url first and then a new url: describe('template spec', () => {
  it('navigates', () => {
  const url = Cypress.config('baseUrl');
  cy.visit(url);
  cy.visit('www.instagram.com');

  //This will get a cross-origin error
  cy.contains('Allow essential and optional cookies').click();
  });
}); cypress.config.js with pre-defined baseUrl: const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    baseUrl: 'https://www.blender.org/',
    specPattern: 'cypress/e2e/**',
  },
}); In the following case if test attempts to get access to a new domain, Cypress will throw a cross-origin error: Overview of cy.origin() function As of Cypress , Cypress officially provides its users with the opportunity to run multiple domains in one test with cy.origin() and manage pop-up windows. v12.0.0 Syntax cy.origin(url, callbackFn)
cy.origin(url, options, callbackFn) Arguments url: This can be any string of valid link or pre-defined global variable (e.g. from cypress.config.js) It overrides the configured in global configuration while inside the callback. So and will use this URL as a prefix, not the configured . baseUrl cy.visit() cy.request() baseUrl options: This is an optional argument which can be passed to function as a simple Javascript object and deserialized in the new origin. These can be: username, password for logging, payments details and so on. cy.origin() callbackFn: This is a regular function which will be executed in the new origin. All elements located on the page of initial origin will not be accessible for Cypress within this callback. Using cy.origin() in test specs is set to which means that originally all the tests will visit this particular link. baseUrl ‘https://www.blender.org/’ To avoid repeating call , let’s move this code to hook: cy.visit(baseUrl) beforeEach beforeEach(() => {
  const url = Cypress.config('baseUrl');
  cy.visit(url) // Or url can be hardcoded if needed
}) This code will run before each test scenario. At the bottom of the home page there is a link to Blender’s official Instagram page. https://www.blender.org/ Based on described introduction above, let’s use cy.origin() to switch from Blender home page to their Instagram account and validate cookies acceptance message. describe('template spec', () => {
  it('passes', () => {
    cy.window().then((win) => {
      cy.stub(win, 'open').as('Open');
    });
    
    //Essential only if beforeEach hook is not set
    const url = Cypress.config('baseUrl');
    cy.visit(url);
    //
    cy.window().scrollTo('bottom');
    var instaUrlString;
    cy.get('.social-icons__instagram')
      .invoke('attr', 'href')
      .then(($instaUrl) => {
        instaUrlString = $instaUrl.toString();
        const updatedInstaUrl = instaUrlString.replace(
          'instagram.com',
          'www.instagram.com'
        );
        cy.origin(
          updatedInstaUrl,
          { args: updatedInstaUrl },
          (updatedInstaUrl) => {
            cy.visit(updatedInstaUrl);
            cy.contains('Allow essential and optional cookies').click();
          }
        );
      });
    cy.visit(url);
  });
}); Cypress visits Blender’s home page, then scrolls page to the bottom, gets property from Instagram link and then, converting it to an appropriate link starting from ‘www‘, passes it to cy.origin(). Well done! We’ve got expected behavior: href Callback function demonstrates that the further assertions are applied to the new origin. What is more, opening a new origin window is stubbed by using function which makes it possible to get rid of unnecessary opened windows. cy.stub() Using cy.origin() in test feature files The same code is applicable for BDD (Behavior-driven development) testing with the only difference that the code from inside of script should be defined within a definite step: it() When('I change the origin of my test configuration', () => {
 cy.window().then((win) => {
      cy.stub(win, 'open').as('Open');
    });
    
    //Essential only if beforeEach hook is not set
    const url = Cypress.config('baseUrl');
    cy.visit(url);
    //
    cy.window().scrollTo('bottom');
    var instaUrlString;
    cy.get('.social-icons__instagram')
      .invoke('attr', 'href')
      .then(($instaUrl) => {
        instaUrlString = $instaUrl.toString();
        const updatedInstaUrl = instaUrlString.replace(
          'instagram.com',
          'www.instagram.com'
        );
        cy.origin(
          updatedInstaUrl,
          { args: updatedInstaUrl },
          (updatedInstaUrl) => {
            cy.visit(updatedInstaUrl);
            cy.contains('Allow essential and optional cookies').click();
          }
        );
      });
    cy.visit(url);
}); Feature file: Feature: Cross-origin test

  Scenario: As a user, I can use different origins in one test
    When I change the origin of my test configuration
    And I visit Base url As a result, in this article the approach to multi-domain testing with Cypress is demonstrated in two different approaches which makes scripts more flexible and give an opportunity to combine various origins in one test and solve problems such as: Visiting more than one domain and interacting with its elements within one test; Go through payments workflow which usually leads to external web-services Verify miscellaneous links from the original domain (social networks, documentation, references to resources) Here is the link to project illustrating multi-domain testing with Cypress: https://github.com/vamelchenia/multi-domain-cypress Resources used to make this article: Cypress 9.6.0: Easily test multi-domain workflows with cy.origin Cypress documentation: cy.stub() Stub a window BDD Automation Framework

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Multi-domain Automation Testing With Cypress

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

3D Engines: A Comprehensive Guide to Automation

BDD in 3 Minutes

BDD is bigger than I thought

BDD with Cucumber-js: Bridging the Gap between Developers and Business

BDD: Writing an Automated Test Suite isn’t Rocket Science

3D Engines: A Comprehensive Guide to Automation

BDD in 3 Minutes

BDD is bigger than I thought

BDD with Cucumber-js: Bridging the Gap between Developers and Business

BDD: Writing an Automated Test Suite isn’t Rocket Science

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps