9.6.0 Experimental Feature: Easily test multi-domain workflows with cy.origin()

[pstakoun]

Today, we will release 9.6.0, and we’re excited for you to test the new Experimental command, cy.origin(). This is our first public iteration of a new command designed to help you navigate multiple domains of different origins in a single end-to-end test.

We invite and appreciate any feedback that you provide. Please use this thread to provide feedback, request features, or just comment on cy.origin() in general.

We are especially interested in if you were able to achieve previously impossible test cases via cy.origin(), or if you found limitations with the command that we should consider before making it generally available in a future release.

If you have a larger bug to report, please file a dedicated issue.

[ianjamieson]

Thanks for this feature, I have been following it for a while. Maybe our issue is slightly different but I thought it was worth mentioning that we still have the following problem

1. Go to main website
2. Login
3. Buy a product, use the Stripe iframe to enter card details
4. Submit payment using the stripe iframe
5. Redirect the user to a Stripe verification page, hook.stripe.com?data=extra_data
6. Redirect the user back to the success page

When running outside of Cypress, everytime the user will be logged in and see the success page

When running within Cypress, the user is logged out after visting the hook.stripe page.

It is like, when the user submits a payment and goes to the 3rd party URL, all session data is lost.

In our example, we don't take any action on the 3rd party URL, I mean, we wouldn't need to wrap an cy commands in the cy.origin callback, as all the 3rd party URL does is redirect back to the original site.

At the moment it might be quite tricky to reproduce a public facing example of the issue, but if someone wants to look closer at the issue then I am happy to chat further about it over private message.

[ianjamieson]

@mjhenkes - is there anywhere best I can send you the two HAR files?

[mjhenkes]

you can email them to me via matthew at cypress dot io

[mjhenkes]

@ianjamieson, sorry it took me a bit to get back to you. Based on the HAR files i think it's a cookie issue. The correct cookies don't seem to be sent to stripe so it doesn't accept that you're logged in. Watch this issue #20685, and test again once it's resolved.

[ianjamieson]

That seems logical, I will keep an eye on that issue. Thanks.

[kkliuiev]

I have the same issue reproduced while trying to sign in with www.facebook.com

[mjhenkes]

@Kailash1980, opening a new thread for you.

I've taken the example that you posed and updated it to how I would expect it to work. Hopefully that helps!

describe("Two Domain urls in different Test case", function () {
  it("Open the Url", () => {
    cy.visit("https://www.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");
  });
});

describe("Two Domain urls under Same different Test case", function () {
  it("Open the Url", () => {
    cy.visit("https://tealfeed.com/");
    cy.contains("Home");
    cy.origin("https://www.saucedemo.com/", () => {
+    // cy.origin does not automatically visit the origin. It sets up a cypress instance under that origin
+.   // so we can communicate with pages in that origin.
+    cy.visit("https://www.saucedemo.com/")
      cy.wait(2000);
      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");
    });
+ // Since this command is validating content on the 'tealfeed.com' origin,
+ //  it should be placed outside of the cy.origin block for saucedemo.com
+ cy.contains("Products").should("be.visible");
  });
});

[Kailash1980]

Thanks, @mjhenkes for helping me

I just copy-paste your code giving the below error.

Screenshot attached

NOTE: In Cyress.json I added below lines

{
"chromeWebSecurity": false, // this is required for saucedemo.com otherwise its not work
"experimentalSessionAndOrigin": true
}

[Kailash1980]

Here is my code that I copy paste
describe("Two Domain urls in different Test case", function () {
it("Open the Url", () => {
cy.visit("https://www.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");
});
});

describe("Two Domain urls under Same different Test case", function () {
it("Open the Url", () => {
cy.visit("https://www.cypress.io/");
cy.contains("Home");
cy.origin("https://www.saucedemo.com/", () => {
// cy.origin does not automatically visit the origin. It sets up a cypress instance under that origin
// so we can communicate with pages in that origin.
cy.visit("https://www.saucedemo.com/");
cy.wait(2000);
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");
});
// Since this command is validating content on the 'tealfeed.com' origin,
// it should be placed outside of the cy.origin block for saucedemo.com
cy.contains("Products").should("be.visible");
});
});

[mjhenkes]

There seems to be an issue with the saucedemo.com page where cypress isn't properly injected into it.

We can recreate this issue simply with the following test:

it('visits saucedemo.com', () => {
  cy.visit('https://www.saucedemo.com/')
})

It seem like the html is generated by a service worker once the page has been loaded one time and since the html request doesn't flow through the cypress proxy we don't inject cypress onto the page.

I will log a github issue for this for further investigation.

[mjhenkes]

issue: #21213

[sudharshand]

I am getting cy.origin() is not a function
Have enabled experimentalSessionAndOrigin is true in cypress. Json

[luanlorenzo]

congrats on the release!
in fact, just by setting the experimentalSessionAndOrigin configuration option to true already fixed a problem I was facing when making requests to some internal apis. but a request to a third-party service is remaining as pending and causing the pageLoadTimeout error:

this works correctly with the setting turned off. any thoughts on what could be causing it?

[Kailash1980]

Seems My issue is also the same screen shot attached above

[luanlorenzo]

i've tried to stub the response with cy.intercept but, even with the status 200, the request still pending:

[mjhenkes]

@luanlorenzo, could you provide more information on the request to the third party service? What is it returning, should it be returning html? Is there anything distinct about it beyond being sent to the third party? It looks like it has query params, do you have other requests with query params?

[luanlorenzo]

@mjhenkes sure. the third party service is our front-end monitoring tool, and the actual request (type: fetch) is working correctly:

it has two query params, and is not expected to return html, just to finish with status 200. the distinct part about it is that, at the same time, is sent a request with type ping (as you can see bellow) that remains pending even after the status is 200:

i think that this type of request is not being handled by the cy.intercept, and for some reason not working correctly with the new feature enabled.

[mjhenkes]

It doesn't seem like the 'ping' type itself is causing a problem. I've tested a simple 'ping' type request with the sendBeacon api and i assume your front-end monitoring tool is doing something similar. Are all the same cookies getting sent along with the ping request? It's a little odd that a pending beacon would prevent your page from loading since it's supposed to be async.

What does your test look like?

[shutchison-bai]

Experiencing an issue when redirecting to Microsoft Authentication. The test visits the baseurl which takes the user to the login page. Clicking the Login button from the login page redirects the user to Microsoft Authentication, However, the Microsoft Authentication page is displaying outside of the cypress playground and cannot be interacted with

describe('Login via Microsoft', () => {
  it('Login page', () => {
    //visit baseurl
    cy.visit('/');
    cy.get('.header').contains('Welcome');
    //Click login button redirects to microsoft auth 
    cy.get('.login').click();
    cy.origin('https://login.microsoftonline.com/', () => {
      //login.microsoftonline.com is opening outside the cypress playground
    });
  });
});

[Anshita-Bhasin]

For those that 👍 'd my previous comment, could you comment and let is know exactly which Authentication provider you're using so we can appropriately prioritize which we look at first?

In my project, we are using google oauth for the login into webapplication.. Flow is --> User goes to the web application and then there is option - "Sign in with the google". I am trying to use google url in cy.origin() but it's not working, still not loading google url.

cy.visit("url.com");
cy.origin("https://accounts.google.com/", () => {
cy.get('input[type="email"]').type("abc");
});

[far11ven]

Same with Microsft azure AD using Keycloak or one at https://office.com:

describe("example Azure AD", () => {
it("logs in using cy.origin", () => {
cy.visit("https://www.office.com");
cy.get("a#hero-banner-sign-in-to-office-365-link").click();

cy.origin(
  "https://login.microsoftonline.com/common/oauth2/v2.0/authorize",
  () => {
    Cypress.on("uncaught:exception", () => false);
    cy.log("yo");
  }
);

});
});

[PAlbaneseRocket]

Having a similar problem to the OP with login.microsoftonline.com using Auth0 SSO. When clicking a login button that redirects to the microsoft login page, the Cypress UI disappears and stops running any tests, which also prevents debugging. @mjhenkes any further updates on this?

[anna-mk]

Any news on this? I'm facing the same issue with Microsoft authentication

Cypress.Commands.add('login', (username, password) => {
const args = { username, password }

    cy.visit('/')
    cy.get("some-btn").click()
    
    cy.origin('https://login.microsoftonline.com', { args }, ({ username, password }) => {
        // redirects to Microsoft login page, outside of cypress test runner
    })

})

[mschile]

Hi @anna-mk and @PAlbaneseRocket, unfortunately, we don't have a timeline for when this will be resolved but we plan on investigating it further with #21476

[jeremycohen]

Been experimenting with this feature over the last couple days, thanks for building it!

One sub-feature however for our use-case that would be vital for broader adoption is #19974. Without this we're limited to cy.(...) calls for the most part within these blocks, and unfortunately that severely limits code-reuse and modularity for our more cross-domain complex use-cases.

Also as a nice-to-have #20718 would be good for more complex cases accessing multiple domains. Thanks!

[mjhenkes]

@jeremycohen Thanks for the feedback. We're definitely going to be implementing #19974 prior to making the cy.origin generally available, in fact we're spiking on design right now.

As for #20718, I was curious if you could provide some of your use cases? While we want to support nested cy.origin calls we've so far struggled to identify non-contrived examples and it would help us a lot if you could provide real world use cases.

I'd also like to show that while you can't nest cy.origin you can still accomplish most nested workflows with cy.origin.

For example, say you have a workflow where you start on origin A, enter your username on origin B, then password on origin C. (I warned you I only have contrived examples 🤪 )

With nested cy.origin you'd write up a test like this:

  it('tests auth nested', () => {
    cy.visit('originA/index')
    cy.get('#login').click() // takes you to origin B

    cy.origin('originB', () => { 
      cy.get('#username').type('username')
      cy.get('#next').click() // takes you to origin C

      cy.origin('originC', () => {
        cy.get('#password').type('password')
        cy.get('#submit').click() // Takes you back to origin A
      })
    })

    // Verify that the user has logged in
    cy.get('[data-cy="welcome"]')
  })

The flattened version, which you can do today, looks like this:

  it('tests auth flattened', () => {
    cy.visit('originA/index')
    cy.get('#login').click() // takes you to origin B

    cy.origin('originB', () => { 
      cy.get('#username').type('username')
      cy.get('#next').click() // takes you to origin C
    })
    
    cy.origin('originC', () => {
      cy.get('#password').type('password')
      cy.get('#submit').click() // Takes you back to origin A
    })

    // Verify that the user has logged in
    cy.get('[data-cy="welcome"]')
  })

[jeremycohen]

Thanks for the example on nested domain handling, @mjhenkes! That helps at least see how we can do it.

For this particular type of handling, if we execute line (or the equivalent B -> C line):

cy.get('#login').click() // takes you to origin B

If we end up in a situation where that click ends up adding cookies or local storage under domain B, how does that get cleared when the originB scope ends if the click happens outside the block?

[mjhenkes]

Local storage, session storage and cookies will persist in the origin they were generated in for the duration of the test. cookies, local storage and session storage will be cleared between tests.

See example tests for local storage.

  it('sets local storage', () => {
    cy.visit('https://developer.mozilla.org')
    cy.window().then((win) => {
      win.localStorage.setItem('myDonkey', 'sam')
      expect(win.localStorage.getItem('myDonkey')).to.eq('sam')
    })

    cy.origin('https://docs.cypress.io', () => {
      cy.visit('/')
      cy.window().then((win) => {
        win.localStorage.setItem('myDonkey', 'bob')
        expect(win.localStorage.getItem('myDonkey')).to.eq('bob')
      })
    })

    cy.origin('https://github.com', () => {
      cy.visit('/')
      cy.window().then((win) => {
        win.localStorage.setItem('myDonkey', 'fred')
        expect(win.localStorage.getItem('myDonkey')).to.eq('fred')
      })
    })

    cy.visit('https://developer.mozilla.org/')
    cy.window().then((win) => {
      expect(win.localStorage.getItem('myDonkey')).to.eq('sam')
    })

    cy.origin('https://docs.cypress.io/', () => {
      cy.visit('/')
      cy.window().then((win) => {
        expect(win.localStorage.getItem('myDonkey')).to.eq('bob')
      })
    })

    cy.origin('https://github.com', () => {
      cy.visit('/')
      cy.window().then((win) => {
        expect(win.localStorage.getItem('myDonkey')).to.eq('fred')
      })
    })
  })

  it('reads local storage', () => {
    cy.visit('https://developer.mozilla.org/')
    cy.window().then((win) => {
      expect(win.localStorage.getItem('myDonkey')).to.eq(null)
    })

    cy.origin('https://docs.cypress.io/', () => {
      cy.visit('/')
      cy.window().then((win) => {
        expect(win.localStorage.getItem('myDonkey')).to.eq(null)
      })
    })

    cy.origin('https://github.com', () => {
      cy.visit('/')
      cy.window().then((win) => {
        expect(win.localStorage.getItem('myDonkey')).to.eq(null)
      })
    })

[jasonjl78]

[mjhenkes]

Hi @jasonjl78, thanks for the feedback. You're right that there are some limitations to the cy.origin block, I've addressed your points below. Hopefully this helps!

custom cypress commands

Custom cypress commands don't seem to be reachable within the origin block. (cy.command is not a function)

You're correct, custom cypress command are currently not reachable in cy.origin. Since any communication between origins must be sent via post message we aren't able to pass functions between origins. We have a couple of workarounds for this, one of which is still in development.

1. You can define custom commands for an origin in a before block and it will persist in the origin for the entire spec run. You could even define the before block in your support file to make it available for all specs.

before(() => {
  cy.origin('myOrigin', () => {
    Cypress.Commands.add('myCommand', () => {
      cy.log('Hi mom!')
    })
  })
})

it('calls my custom command', () => {
  cy.origin('myOrigin', () => {
    cy.myCommand()
  })
})

2. We're working on a require feature that will let you require files that can be shared between origins, follow that here:
   [Cross-origin]: Support dependencies in cy.origin() callback #19974.

session and test setup

Remaining it blocks within the spec file will fail to execute because "experimentalSessionAndOrigin" is enabled. Cypress navigates to the default blank page...."

cy.origin also depends on the sessions feature which will, as you pointed out, visit about blank between tests, which is to improve test isolation and reduce flake, it does require you to call visit and login for each test though.

To address this and your second point I re-organized your test case above. Generally the best practice is to isolate the smaller part of your test to cy.origin to avoid some of the limitations described above.

it('Login', () => {
  cy.origin('login.pmw240.com', () => {
    cy.visit('https://www.mycompanysite.mil'); // since this finishing origin will be login.pmw240.com, we should visit this url within the cy.origin block
    cy.get('#okta-signin-username').should('be.visible').type('username');
    cy.get('#okta-signin-password').type('password');
    cy.get('#okta-signin-submit').click();
    cy.contains('Send Push').should('be.visible').click(); // Redirects back to www.mnp.navy.mil
  }
  cy.get('.btn-primary').contains('I Agree').should('be.visible').click()
  cy.contains('Welcome to MyNavy Portal').should('be.visible');
  cy.homePageDisplayed();
})

**//With session enabled, we visit 'about blank' in between tests **
it('Go to another page', () => {
  cy.origin('login.pmw240.com', () => {
    cy.visit('https://www.mycompanysite.mil');**//redirects to okta login page on another domain**
    cy.get('#okta-signin-username').should('be.visible').type('username');
    cy.get('#okta-signin-password').type('password');
    cy.get('#okta-signin-submit').click();
    cy.contains('Send Push').should('be.visible').click(); // Redirects back to www.mnp.navy.mil
  }
  cy.get('.btn-primary').contains('I Agree').should('be.visible').click()
  cy.contains('Welcome to MyNavy Portal').should('be.visible');
  
  cy.customGoToPageCommand('page');
  cy.customPageDisplayedCommand('page');
})

"Thats great and all", you say, "but I don't want to log in in each test"

I hear you, lets add a custom login command using cy.session!

Cypress.Commands.add("login",({username, password}) => {
    cy.session([username, password], () => {
      cy.origin('login.pmw240.com', { args: {username, password} }, ({username, password}) => {
        cy.visit('https://www.mycompanysite.mil');**//redirects to okta login page on another domain**
        cy.get('#okta-signin-username').should('be.visible').type('username');
        cy.get('#okta-signin-password').type('password');
        cy.get('#okta-signin-submit').click();
        cy.contains('Send Push').should('be.visible').click(); // Redirects back to www.mnp.navy.mil
      })
      cy.get('.btn-primary').contains('I Agree').should('be.visible').click()
      cy.contains('Welcome to MyNavy Portal').should('be.visible');
    }, {
      validate: () => {
        cy.visit('https://www.mycompanysite.mil')
        cy.contains('Welcome to MyNavy Portal').should('be.visible');
      },
    });
  })

  beforeEach(() => {
    cy.login({
      username: 'username',
      password: 'password',
    });
  })

it('Login', () => {
  cy.visit('https://www.mycompanysite.mil');
  cy.homePageDisplayed();
})

**//With session enabled, we visit 'about blank' in between tests **
it('Go to another page', () => {
  cy.visit('https://www.mycompanysite.mil');
  cy.customGoToPageCommand('page');
  cy.customPageDisplayedCommand('page');
})

Auth fails everywhere but firefox

Authentication is only available on firefox. All other browsers fail with a forbidden error even with "chromeWebSecurity": false,

Could you provide some more information around this? We've tested cy.origin on chrome and firefox, so both should work (regardless of the chromeWebSecurity flag). I'd be interested to try get a recreate-able example of this issue so we can fix it.

[mjhenkes]

Maybe try this? I realized that the site you're visiting is on the public internet so I was able to get as far as entering the username and password but i don't have an account so i wasn't able to go any further. If you haven't already you could also try setting your base url to www.mnp.navy.mil. It is purposeful that I'm wrapping the login page in the cy.origin block, since it is not the primary page we wish to test and since there are limitations to cy.origin, we should scope the login domain to cy.origin.

Cypress.Commands.add('login', ({ username, password }) => {
    cy.session([username, password], () => {
      cy.origin('login.pmw240.com', { args: { username, password } }, ({ username, password }) => { // Since this is not the primary domain we wish to test, lets put it in the cy.origin block.
        cy.visit('https://www.mnp.navy.mil/group/oidc?utm_source=mnp%20public') // Since this will redirect to login/pmw204.com it's okay to visit it in the cy.origin block 
        cy.get('#okta-signin-username').should('be.visible').type(username)
        cy.get('#okta-signin-password').type(password)
        cy.get('#okta-signin-submit').click()
        cy.contains('Send Push').should('be.visible').click() // Redirects back to www.mnp.navy.mil
      })

      cy.get('.btn-primary').contains('I Agree').should('be.visible').click()
      cy.contains('Welcome to MyNavy Portal').should('be.visible')
    }, {
      validate: () => {
        cy.visit('https://www.mnp.navy.mil/group/oidc?utm_source=mnp%20public')
        cy.contains('Welcome to MyNavy Portal').should('be.visible')
      },
    })
  })

  it('Login', () => {
    cy.login({
      username: 'username',
      password: 'password',
    }) // you could put this in a before each block if you want.
    
    cy.visit('https://www.mnp.navy.mil/group/oidc?utm_source=mnp%20public')
    cy.homePageDisplayed()
  })

[jasonjl78]

I sort of combined your suggestion with what I was doing and it seems to be working now. Thank you very much for your help. I'll revisit some of the other concerns in a different thread and clean this thread up a bit.

Cypress.Commands.add("signIn", (username, password) => {

    cy.session([username, password], () => {
        cy.origin('oktaloginpage.com', { args: { username, password } }, ({ username, password }) => {
            cy.visit('https://www.companypage.mil/group/oidc?utm_source=xxx%20public')
            cy.get('#okta-signin-username').should('be.visible').type(username);
            cy.get('#okta-signin-password').type(password);
            cy.get('#okta-signin-submit').click();
            cy.contains('Send Push').should('be.visible').click();
        })

        cy.origin('https://www.companypage.mil', { args: { username, password } }, ({ username, password }) => {
            cy.get('.btn-primary').contains('I Agree').should('be.visible').click()
            cy.contains('Welcome to MyNavy Portal').should('be.visible');
        });
    })
    
})

beforeEach(() => {
        cy.signInCacFree('username', 'password');
 })

it(Test 1', () => {
        cy.visit('https://companypage.mil/');
       //test something
 })

it(Test 2', () => {
        cy.visit('https://companypage.mil/');
       //test something else
 })

[marortte]

I've also tried this approach but for MS Authentication it seems to be throwing error

Cypress.Commands.add("loginSession2", (email, password) => {
  cy.session([email, password], () => {
    cy.origin(
      "https://login.microsoftonline.com/",
      { args: { email, password } },
      ({ email, password }) => {
        cy.visit("https://custompage.com/");
        cy.get('input[type="email"]').type(email);
        cy.get('input[type="submit"]').click();
        cy.get('input[type="passwd"]').type(password);
        cy.get('input[type="submit"]').click();
      }
    );

    cy.origin(
      "https://custompage.com/",
      { args: { email, password } },
      ({ email, password }) => {
        cy.get(".btn-primary").contains("Ok").should("be.visible").click();
      }
    );
  });
});

[shutchison-bai]

Is there a reason why cy.session and cy.orgin were bundled together? We don't have the need to use cy.session in our suite, but we do have the need to use cy.orgin. In order to use cy.orgin we would have to implement cy.session throughout our suite.

[mjhenkes]

Cy.session and cy.origin are planned to both become Generally available in the 11.0 release. To better model our users experience, we've combined the feature flag to enable both features at the same time, such we can gather feedback on the entire process. For authentication workflows cy.session and cy.origin have been designed to work together and some assumptions were made in the cy.origin code that relies on session data being cleared between each test.

[jeetchauhanqa]

I am kind of stuck in situation.
Use case is:

I have a live chat portal in which I have different login for different users ; for agent & end user Login , there is different credentials.

so asper scenarios I cannot login two different users in same browser at same time.

so to fulfill my requirement I need to switch to 2 different browsers at same time with different users ; agent & end user at same time.

browser 1: agent
browser 2: end user

we don't need to logout the any of the users in b/w.

[mjhenkes]

I think your best bet here is to synthetically generate the events between the two different browser instances. You cannot today, test two browsers interacting with one another through the same test.

[jeetchauhanqa]

ok.. can we get on call and see if tis works .

[mchandrakumarIDBS]

Hi All,

First of all, thank you for this new feature!

I'm trying to test error scenarios in Auth0. E.g User typed in incorrect user creds or the user is blocked in an Auth0 popup. I have been using "https://cypress.io/blog/2022/04/25/cypress-9-6-0-easily-test-multi-domain-workflows-with-cy-origin/" which is great for success scenarios but I am not able to test failure cases.

Is this not supported?

It seems to me "cy.origin" expects the button click events always redirect the user to a new page but in error cases, the user doesn't get redirected. I want to be able to confirm the error banner is present once the user clicks the button.

How would I go about this?

FYI: I'm using the frontend to login and not the Auth0 api.

[mjhenkes]

Hi, @mchandrakumarIDBS, you should absolutely be able to validate this.

If you do something like this you should be able to validate any changes within the origin block.

it('Login', () => {
  cy.visit('site')
  cy.get('login').click()
  cy.origin('https://idp.com', () => {
    cy.get('#okta-signin-username').type('username');
    cy.get('#okta-signin-password').type('wrong-password');
    cy.get('#okta-signin-submit').click();
    cy.get('#error-banner).should('contain', 'WRONG USERNAME OR PASSWORD')
  }
})

[mchandrakumarIDBS]

Thanks, @mjhenkes for getting back to me. Cool. I'll give that a go.

[jasonjl78]

Hi. The multi origin/session login is working until I try to use the baseURL. I'm finding that when using baseURL within cy.origin, the test runner just hangs. It doesn't fail or anything, it literally just sits there and looks for the element without timing out.

Below example works great

Cypress.Commands.add("signIn", (username, password) => {
    cy.session([username, password], () => {
        cy.origin('https://loginokta.domain1.com', { args: { username, password } }, ({ username, password }) => {
            cy.visit('https://www.my.company.mil/group/oidc?utm_source=xxx%20public')
            cy.get('#okta-signin-username').should('be.visible').type(username);
            cy.get('#okta-signin-password').type(password);
            cy.get('#okta-signin-submit').click();
            cy.contains('Send Push').should('be.visible').click();
        })

        cy.origin('https://www.my.company.mil', { args: { username, password } }, ({ username, password }) => {
            cy.get('.btn-primary').contains('I Agree').should('be.visible').click()
            cy.contains('Welcome to MyNavy Portal').should('be.visible');
        });
    })
})

beforeEach(() => {
	cy.signIn('username', 'password');
        cy.visit('https://www.my.company.mil');
 })

But the below example using baseURL hangs at the "get .btn-primary" call in the 2nd origin block
"baseUrl": "https://www.my.company.mil"

Cypress.Commands.add("signIn", (username, password) => {
    var url = Cypress.config('baseUrl');
    cy.session([username, password], () => {
        cy.origin('https://loginokta.domain1.com', { args: { username, password } }, ({ username, password }) => {
            cy.visit('https://www.my.company.mil/group/oidc?utm_source=xxx%20public')
            cy.get('#okta-signin-username').should('be.visible').type(username);
            cy.get('#okta-signin-password').type(password);
            cy.get('#okta-signin-submit').click();
            cy.contains('Send Push').should('be.visible').click();
        })

        cy.origin(url, { args: { username, password } }, ({ username, password }) => {
            //hangs trying to get this element
            cy.get('.btn-primary').contains('I Agree').should('be.visible').click()
            cy.contains('Welcome to MyNavy Portal').should('be.visible');
        });
    })
})

 beforeEach(() => {
        cy.signFree('username', 'password');
        cy.visit('/');
  })

[mjhenkes]

Hi @jasonjl78, In your second example, try without that second block in a cy.origin call, since https://www.my.company.mil is your base url you shouldn't have to then wrap it in a cy.origin call.

Cypress.Commands.add("signIn", (username, password) => {
    var url = Cypress.config('baseUrl');
    cy.session([username, password], () => {
        cy.origin('https://loginokta.domain1.com', { args: { username, password } }, ({ username, password }) => {
            cy.visit('https://www.my.company.mil/group/oidc?utm_source=xxx%20public')
            cy.get('#okta-signin-username').should('be.visible').type(username);
            cy.get('#okta-signin-password').type(password);
            cy.get('#okta-signin-submit').click();
            cy.contains('Send Push').should('be.visible').click();
        })

        cy.get('.btn-primary').contains('I Agree').should('be.visible').click()
        cy.contains('Welcome to MyNavy Portal').should('be.visible');
    })
})

 beforeEach(() => {
        cy.signFree('username', 'password');
        cy.visit('/');
  })

We may have a bug when you try to create a cy.origin block for the origin you're already on.

[jasonjl78]

Yep, that did the trick! The only remaining issue I'm seeing is that this is only working in firefox. In all the other browsers, The code above will give me a forbidden error right after the push notification is accepted. The other browsers work fine when I step through the process manually.

[jasonjl78]

Hi. 2 questions.

1. Is there a way to make the session/origin persist throughout multiple spec files? Example...the code below works great on a per spec file basis. So the authentication happens and I have to approve the push notification, then all the tests in a spec file will run. However, if I run all specs, I have to acknowledge the MFA notification at the start of each spec.

2. The code below works only for firefox. All other browsers fail with an "unable to access - Forbidden" error.

Cypress.Commands.add("signIn", (username, password) => {
    var url = Cypress.config('baseUrl');
    cy.session([username, password], () => {
        cy.origin('https://loginokta.domain1.com', { args: { username, password } }, ({ username, password }) => {
            cy.visit('https://www.my.company.mil/group/oidc?utm_source=xxx%20public')
            cy.get('#okta-signin-username').should('be.visible').type(username);
            cy.get('#okta-signin-password').type(password);
            cy.get('#okta-signin-submit').click();
            cy.contains('Send Push').should('be.visible').click();
        })

        cy.get('.btn-primary').contains('I Agree').should('be.visible').click()
        cy.contains('Welcome to MyNavy Portal').should('be.visible');
    })
})

 beforeEach(() => {
        cy.signIn('username', 'password');
        cy.visit('/');
  })

Any feedback on these issues would be great.

[mjhenkes]

1. Not currently. I think this issue cy.session: Caching across spec files #17710 is requesting the same thing and would be the issue to follow.

2. I think it's possible that this is a cookie issue and may be resolved by this issue: Multi-domain: Improve cookie handling  #20685

[mjhenkes]

Could you check if cookies are getting sent as expected during the login request? I'd run the scenario in cypress and outside of cypress and compare the request headers to the failing request.

[elena123]

Hi,
I've also tried the multi-domain feature, but can't make it work for our scenario.
Scenario is the following:

1. My test starts visiting domain 1 where the user is asked to enter the email.
2. When the e-main is filled and the next button is clicked - the user is redirected to SSO authentication domain - domain 2 - to enter the password.
3. On successful login the user is returned back to the original domain

What happens with Cypress:
On step 2 when the password is entered - there are several requests made in the browser. After the authorize request, which is OK, there is a login request which is actually the redirect and it gives error 500 when executing with Cypress.. Here is my sample code:

    it('login test', () => {
              cy.visit('domain 1')
              cy.wait(2000)
              cy.get('[id^=username]').should('be.visible').type('username'))
              cy.get('[id^=btn-text]').should('be.visible').click()  
              cy.origin('domain 2', () => {
                         cy.wait(2000)
                         cy.get('[id^=pass]').should('be.visible')
                        cy.get('[id^=pass]').type('password')
                        cy.get('[id^=signIn]').click()
        })
        
              //validate something in the original domain 1
    })

Any ideas what might be wrong?

Thanks,
Elena

[mjhenkes]

@elena123, could you check if cookies are getting sent as expected during the login request? I'd run the scenario in cypress and outside of cypress and compare the request headers to the failing request.

[elena123]

Hi @mjhenkes,
Thank you for your reply. I checked the cookie and it seems the request header cookie passed to the login request in cypress is not correct. It contains only part of the original cookie.
Also noticed this value in the request header:

X-Cypress-Is-AUT-Frame: true

Thanks,
Elena

[mjhenkes]

@elena123, thanks for checking, the issue will likely be resolved by: #20685 . We've prioritized this issue and will be working on it next iteration.

[elena123]

Hi @mjhenkes,
Thank you for the info!
Keep me updated when the issue is resolved.

Regards,
Elena

[mjhenkes]

@sudharshand

I am getting cy.origin() is not a function
Have enabled experimentalSessionAndOrigin is true in cypress. Json

Could you provide a test project that reproduces the issue?

[tlolkema]

Doesn't work for me :(

For us the checkout will go to a Stripe test payment page on stripe.com after clicking the submit button.
After clicking this button on default origin i see the message "Your tests are loading" in the test runner, and the stripe payment page takes over the whole tab.

cy.get(checkout.locators.checkoutSubmit).click()

cy.origin('https://stripe.com', () => {
  cy.contains('Authorize Test Payment').click()
})

[mjhenkes]

@tlolkema, I'm sorry to hear cy.origin is not working for the Strip payment page. We'll have to add that to our list of sites to check after we've updated modifyObstructiveCode. Thanks for letting us know.

[GabZ87]

@mjhenkes same issue with Klarna Pay unfortunately!

[filiphric]

is there an issue connected to this? I’m experiencing there same problem with Stripe here.

[mschile]

@filiphric, we plan on investigating Stripe with #21603

[tlolkema]

I was keen to try out Cypress 10.4.0 with the experimentalModifyObstructiveThirdPartyCode in combination with cy.origin to check if Stripe integration works.

Our setup is the following:

• Checkout page in our application with Stripe input fields (those inputs are seperate iframes on stripe.com)
• Button to go to external Stripe page
• External stripe page with button to finish payment and redirect back to application

Without the experimentalModifyObstructiveThirdPartyCode > Stripe will frame bust when it goes to external Stripe page
With the experimentalModifyObstructiveThirdPartyCode > Test will fail at first step to interact with iframes, as Stripe will not render content succesfully:

I tried if i could set the experimentalModifyObstructiveThirdPartyCode within a test before clicking the button to go to Stripe but that didn't work.

[TomBecketBelda]

I'm trying this feature with Paypal and fails on the second page, at the first page where you type your username and password doesn't give problems. It's when you click the submit button, Paypal sends you an error message. It's a sandbox environment by the way. Also, I've tried with Sofort payment and the new feature works fine. maybe it's some kind of security in the Paypal website

[mjhenkes]

Thanks for reporting this, Likely Paypal is framebusting. We'll note this on our modifyObstruciveCode Spike.

[danielmustafa]

Hello, thanks for adding this feature. In previous posts, it seems that others have a front page and expect to click a login button to initiate the cross origin auth/etc. In my use case, upon navigating to my company's site, it automatically redirects to the SSO landing page. Because of this I'm unable to figure out how to set this up correctly using origin. Is there any way to provide an example where a redirect is taking place?

What I'd like to do:

1. Navigate to my company site
2. Allow the redirect to take place, which navigates to another superdomain
3. Automate the login
4. Allow the redirect back to my company site

[mjhenkes]

Hi @danielmustafa, this workflow should be achievable with cy.origin, see my pseudo code below.

// Set baseUrl as the url we intended to run commands against once we have finished redirecting, this could be set in config as well.
it('tests redirects', { baseUrl: 'https//localhost:3000' }, () => {
  cy.origin('https://pfedcert.xx', () => {
    // We place this visit inside the cy.origin call because it will redirect to the pfedcert origin
    // This is non obvious and something we're looking into.
    cy.visit('https//localhost:3000') // This will redirect to https://pfedcert.xx
    // Automate login
    cy.get('#username').type('username');
    cy.get('#password').type('password');
    cy.get('#submit').click(); // This click redirects to localhost:3000
  })
  cy.url().should('contain', 'localhost:3000')
})

[cpc-tsamor]

@danielmustafa Did you get the redirect to work? We are having a similar issue with a certain website (site redirect --> SSO IdP --> redirect back to site) without any user interaction (assuming they have Windows auth/Kerberos), and cy.origin does not solve the issue. The SSO process fails without showing any error in Cypress, but the website gives its own 'Sorry we could not complete authentication' message. The SSO works fine if we open in another Cypress tab (outside test script). Our assumption is that the redirect isn't happening within the right context. + @mjhenkes

[cpc-tsamor]

I think we figured out a workaround - if the SSO process is successful but the last redirect fails, we simply reload the original page. Since the SAML token is still valid in the session the original page logs right in. At least that's what we think is happening.

[beccavittoria]

I'm having a similar issue, i'm trying to do the steps bellow but I'm getting a 502 and 302 error:
1 - Go to my company site
2 - Allow the redirect to take place, which navigates to another superdomain (and it's seems here is the problem)
here the screenshot error

I couldn't even acces the login page, could someone give me a hand, please?

[muratkeremozcan]

In this example, we are logging into office online. The app breaks free of Cypress.

git clone https://github.com/muratkeremozcan/cypress-azure-ad.git
cd cypress-azure-ad
npm i
npm test

Check out the gif in the readme https://github.com/muratkeremozcan/cypress-azure-ad.

[mjhenkes]

I think this issue describes what you're seeing: #21307

[AdrienDong]

Hello @mjhenkes,
I wrote on issue #944 about pageLoadTimeout error when I was using the feature branch before the fix #21144.
Now I am using Cypress 9.6.1 and I still have the problem. Cypress stuck with pageLoadTimeout error while the page is loaded as we can see in the below screen.

The error logs in my terminal:

CypressError: Timed out after waiting 120000ms for your remote page to load.
Your page did not fire its load event within 120000ms.
You can try increasing the pageLoadTimeout value in cypress.json to wait longer.
Browsers will not fire the load event until all stylesheets and scripts are done downloading.
When this load event occurs, Cypress will continue running commands.

[AdrienDong]

I also have a pending request (which happens only in Cypress) as referenced earlier in this discussion. This might be the cause of the pageLoadTimeout error. However it's strange it only happen within Cypress.

[MCFreddie777]

Using this feature is really painful and I hope it gets better through the time.

• First, all arguments must be passed to options.args which creates a problem with eslint: no-shadow rule if you don't like to name the variable differently, because the callbackFn does not know the outer scope.

• Second, classes and functions are not serializable using structuredClone(), therefore you can only use standard cypress commands there, not own functions.

This limits us, therefore we need to stay on the old approach - using one base URL per single file.

[mschile]

@MCFreddie777, thank you for the feedback. Regarding your second point, we are working on #19974 which will allow you to require a module. Hopefully this will allow you to use some of your own functions.

[GastonZ-MayorKeyTech]

I've been trying to use cy.origin() to access a new origin in the same test, and I'm being able to! However once inside I'm getting this error. Also I do have the Cypress.on('uncaught:exception') under support > commands.js

Cypress.on('uncaught:exception', (err, runnable) => {
  return false
})

beforeEach(() => {
    cy.clearCookies();
    cy.visit('/');
});

  it.only("User is able to create a proposal", () => {
    sis.openAccount();
    sis.createProposal();
    cy.wait(35000);
    cy.origin(ENVS_URL, () => {
      cy.visit(ENVS_PATH);
      cy.url().should("contain", ENVS_PATH);
      cy.get('iframes-container').find('#propprefs > div > div > table > tbody > tr:nth-child(3) > td:nth-child(2) > div > span.left')  
//It fails here, even if I do a simple cy.wait().
    });
  });

[GastonZ-MayorKeyTech]

After disabling chrome security I'm now getting this

[mschile]

@GastonZ-MayorKeyTech, since cy.origin is run in a different context, you'll need to define the uncaught:exception handler within cy.origin. You can do this within your commands.js file by adding the following:

cy.origin(ENVS_URL, () => {
  Cypress.on('uncaught:exception', (err, runnable) => {
    return false
  })
})

[danbord]

I just tried the feature with our implementation of Auth0. Seems to work, but only when the domain change is initiated from a button click. Example:

In this example, it fails to retrieve the #email (even if we can see it in the Cypress test console)

cy.visit('Authenticate/Login'); // Our Webapi endpoint that redirects to auth0 universal login
cy.origin('https://our-site.auth0.com'),() => {
   cy.get('#email').type("username");  // FAILS HERE
   cy.get('#password').type("password");
   cy.get('#btn-login').click();
});

But this one works well:

cy.visit('/'); // Home page of our application
cy.get("#myTestLink").click(); // That links to "/Authenticate/Login" (same as the initial cy.visit of the other example)
cy.origin('https://our-site.auth0.com'),() => {
    cy.get('#email').type("username");  // NOW IT WORKS
    cy.get('#password').type("password");
    cy.get('#btn-login').click();
});

[mschile]

@danbord, thanks for the feedback. Regarding your first example, if the redirect is taking you to Auth0, you'll want to put the visit within cy.origin.

cy.origin('https://our-site.auth0.com', () => {
   cy.visit('Authenticate/Login'); // Our Webapi endpoint that redirects to auth0 universal login 
   cy.get('#email').type("username");
   cy.get('#password').type("password");
   cy.get('#btn-login').click();
});

[danbord]

Thanks @mschile, It works now but seems like the baseUrl inside the cy.origin is not taken in consideration. I need to specify the entire uri like : cy.visit("https://mysite.com/Authenticate/Login")

Thanks

[mschile]

@danbord, when visiting within cy.origin, the first parameter (not baseUrl) is used for relative URIs. This handles most use-cases except for the redirect scenario you are encountering. We are considering allowing the redirected cy.visit to be outside of cy.origin which would then allow the baseUrl to be used. #21493

[danbord]

Thank you very much @mschile

[MayaHanna]

Hello,
I'm trying to test a website using Auth0 authentication.
I'm using the new origin commend just like this tutorial - https://www.youtube.com/watch?v=Fohrq5GZSD8,
but unfortunaly I'm getting "checks.state argument is missing" error on the callback from Auth0.
It happens only during testing, and both on chrome and electron.

this is my code:

it('should click login', () => {
cy.visit('/');

cy.contains('Login').click();
cy.origin(Cypress.env('auth0_domain'), () => {
  cy.get('#username').type(Cypress.env('auth0_username'));
  cy.get('#password').type(Cypress.env('auth0_password'));
  cy.contains("Continue").click();
})
});

I also added the experimentalSessionAndOrigin to true.

my cypress version is 10.2.0

Any idea of what can cause this issue?

[onadikuda]

Today when trying to use cy.origin() against SSO app it just closes the test runner window the moment cypress clicks on 'login' button in the application.
Normally when we click on login button it redirects to different superdomain site (but during this redirection it also navigates to "/login"). Should we consider the "/login" as Origin A and a different superdomain site as OriginB

Can someone let me know how to handle such situation?

[jamessamson416]

This feature was suggested to me as a possible solution to a problem I'm having but I'm doubtful and wonder if anyone has any thoughts.
I put a rough example below but in my case I never had a problem like most users above are talking about because I was using different domains in a different tests. My problem is the before runs twice and resets my variable in between the 2 tests. I'm making a new spec file and this is just the start, I'll have at least 4 tests in the end, and possibly 3 separate domains.
In a previous test I resolved the issue by having it write the function result to a fixture file, but I don't see the reason for this
Each test has it's own visit, login, logouts so they are independent - but I need a new unique email each run, with the same email going to each test block, but right now when I watch it run, when it completes the first test, you can see it reloads the entire test, and triggers the before again.

let myEmail="";
before(() => {
myEmail=someRandFunc();
})

describe('my test', () => {
it('register user', () => {
cy.visit('http://www.site1.com')
// then register user with myEmail
})

it('approves user', () => {
	cy.visit('http://www.site2.com')
	// searches for user with myEmail
	// approves the user
  })

})

[aypingchewsky]

My issue is slightly different.
My base URL is: 'env.name.co'
When I go to our login site which redirects to our auth0 login site 'login.env.name.at.co' and log in, I do not need to use cy.origin() at all even-though the auth0 site is a different domain.

loginwithUIForm(username, password) {
    cy.visit('https://env.name.co'); // redirects to https://login.env.name.at.co/Account/Login
    cy.get('#Email').type(username);
    cy.get('#Password').type(password);
    cy.get('#login-submit-btn').click(); // redirects back to https://env.name.co/Home/Index
}

Cypress version: 10.6.0

Once I start to use cy.origin(), cypress thinks we are using the same domain as the previous base URL.

loginwithUIForm(username, password) {
    const args = { username, password }
    cy.origin('https://login.env.name.at.co'), { args }, ({ username, password }) => {
        cy.visit('https://env.name.co'); // redirects to https://login.env.name.at.co/Account/Login
        cy.get('#Email').type(username);
        cy.get('#Password').type(password);
        cy.get('#login-submit-btn').click();
    });
}

[sunmeimei11]

when I use cy.origin(), I only can get the right result with the command "npx cypress open"; I want to run many test together,like "npx cypress run -b chrome --spec "E:\XXX*"",but the case with cy.origin() will dead,without any response;
what can i do for it ?

[YPD-HG]

I am trying to test my website from cypress.io, but i am constantly getting above error. I am facing issue will Signing in with google. I am using the cy.origin() method.

`it.only('Login should happen', ()=>{
cy.viewport(1280, 720)
cy.visit('https://thewesbsite.com/') //not my actual website
//after entering website, we click on dashboard
cy.contains('Dashboard').click()

//then we click on Sign in with google
cy.contains('Sign in with Google').click()

//on clicking we are transferred to accounts.google.com page
cy.origin('https://google.com/', ()=>{
cy.get('[aria-label="Email or phone"]]').click().type('[email protected]')
})
})`

https://stackoverflow.com/questions/73917253/timed-out-retrying-after-4000ms-the-command-was-expected-to-run-against-origin

haven't got any reply!

[mschile]

@YPD-HG, there are some known issues logging into Google that we are targeting to be resolved in Cypress 10.10.0.
#22987 (comment)

[sunmeimei11]

这是来自QQ邮箱的假期自动回复邮件。   您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

[YPD-HG]

Understandable, thank you for your response!

…

On Tue, 4 Oct, 2022, 5:11 am Matt Schile, ***@***.***> wrote: @YPD-HG <https://github.com/YPD-HG>, there are some known issues logging into Google that we are targeting to be resolved in Cypress 10.10.0. #22987 (comment) <#22987 (comment)> — Reply to this email directly, view it on GitHub <#21186 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMOHBKRQFZUB5HOLTZDIMETWBNVL7ANCNFSM5UIXRV3Q> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[YPD-HG]

Can you please suggest me any other way to test "Sign in with Google"?

…

On Tue, 4 Oct, 2022, 5:11 am Matt Schile, ***@***.***> wrote: @YPD-HG <https://github.com/YPD-HG>, there are some known issues logging into Google that we are targeting to be resolved in Cypress 10.10.0. #22987 (comment) <#22987 (comment)> — Reply to this email directly, view it on GitHub <#21186 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMOHBKRQFZUB5HOLTZDIMETWBNVL7ANCNFSM5UIXRV3Q> . You are receiving this because you were mentioned.Message ID: ***@***.***>