Cypress Visit Multiple Domains

Cypress can allow us to visit multiple domains of different origins in a single test using the origin command. In everyday use, cypress may only run commands in a single origin. cy.origin() will allow our test to bypass the standard web security features, which is a limitation.

Configuration

If you are using cypress 10 or above, add the following in the config file before using the origin command.

experimentalSessionAndOrigin": true

Enabling this flag will add cy.session, cy.origin, and cypress.session API.

Syntax

cy.origin(url, callbackFn)
cy.origin(url, options, callbackFn)

Arguments:

url: Used to specify the secondary origin's URL.
Options: Pass in the options object to control the behavior of cy.origin()
Args: JavaScript plain object which will be serialized and has been sent from the primary to the secondary origin, where it is deserialized and will be passed into the callback function as its first argument.
callbackFn: The function containing the commands to be executed in the secondary origin.

Example

Let us try the command for ourselves and check out how it performs.
We will be automating on our autopract site.

There we will try to upload a file, and then when we hit the upload button, it will generate a unique download link.
This download link, when clicked, will take us to a secondary origin.

describe('Automate AutoPract',()=>{

    it('Visit Multiple Domain',()=>{
        const f = 'G.png'

        cy.visit('http://www.autopract.com/#/home/fashion')
        cy.get("button[aria-label='Close'] ").click()
        cy.get('.btn.btn-success').scrollIntoView()     
        cy.get('input[type="file"]').attachFile(f)
        cy.get('.btn.btn-success').click()
        cy.wait(2000)
        cy.get('.container.text-center.jumbotron.ng-star-inserted').scrollIntoView()
        cy.xpath("/html[1]/body[1]/app-root[1]/app-file-upload[1]/div[2]/a[1]").invoke('text').then((textt) =>{
            cy.log(textt)

            cy.xpath("/html[1]/body[1]/app-root[1]/app-file-upload[1]/div[2]/a[1]").click()
                 cy.origin(textt, () => {

                    cy.get('.css-14fz811.e12cce780').click()
            
        })

        })

        })
    })

cypress origin command example

So the dynamic download link text has been first invoked.
Extracted and saved it in a variable and then passed it inside the origin header in the place where the URL should be present.
This took us to the secondary origin and performed the download operation, and we can see the download has been clicked from the command log.
So this is how origin can be used.

Yield And Limitation:

cy.origin() cannot run on a different browser window.
cy.origin() cannot run on a different tab.
cy.origin() cannot run commands inside an iframe element.
cy.origin() yields the value yielded by the last cypress command.
If suppose the callback contains no such cypress commands, cy.origin() yields the function's return value.

Cypress Origin Command