cypress: In OIDC login, call back page doesn't load completely

Current behavior

I have a website that uses Open ID for login and after the login is successful, the provider website sends the user back to a URL to the actual website and I can’t control this. for example user has to go to “localhost:3000” click on login button and then gets redirected to “someLoginProvider.com/login” and then after the login, user will come back to “myOnlineVersionOfLocalhost.com/callbackFromLogin” ! Here is the way I’ve tried to do this: In cypress.js file I set the basic origin to localhost. and for login I try like below:

Cypress.Commands.add(
  "newLogin",
  (username = Cypress.env("username"), password = Cypress.env("password")) => {
    cy.visit("/welcome");
    cy.get("button").contains("ورود").click();
    cy.origin(
      "https://someLoginProvider.com.com",
      { args: { username, password } },
      ({ username, password }) => {
        cy.get("input[name='username']").focus().type(username);
        cy.get("input[name='password']").focus().type(password);
        cy.get("button[type='submit']").click();
      }
    );
    cy.origin("https://myOnlineVersionOfLocalhost.com", () => {
      cy.visit("/");
      cy.getAllLocalStorage().then((localStorage) => {
        Cypress.env("jxdf", localStorage["https://myOnlineVersionOfLocalhost.com"].jxdf);
        Cypress.env("elcd", localStorage["https://myOnlineVersionOfLocalhost.com"].elcd);
      });
    });
   cy.visit("/");
    window.localStorage.setItem(
      "s",
      "***"
    );
    window.localStorage.setItem("jxdf", Cypress.env("jxdf"));
    window.localStorage.setItem("elcd", Cypress.env("elcd"));
  }

The idea is since my login is based on JWT stored in local storage, I wanted to do the login on my actual website, pickup the values from local storage, then visit my localhost and paste the values inside local storage. The problem is that when I run this test, after the click on submit, the browser doesn’t go back in the https://myOnlineVersionOfLocalhost.com. Actually the website shows up on screen but the URL doesn’t change. So it get stuck in load page situation.

Desired behavior

After I click the submit button in login page, It should redirect me back to my online website. It shouldn’t stuck on page loading for no reason.

Test code to reproduce

Cypress.Commands.add(
  "newLogin",
  (username = Cypress.env("username"), password = Cypress.env("password")) => {
    cy.visit("/welcome");
    cy.get("button").contains("ورود").click();
    cy.origin(
      "someLoginProvider.com",
      { args: { username, password } },
      ({ username, password }) => {
        cy.get("input[name='username']").focus().type(username);
        cy.get("input[name='password']").focus().type(password);
        cy.get("button[type='submit']").click();
      }
    );
    cy.origin("myOnlineVersionOfLocalhost.com", () => {
      cy.visit("/");
      cy.getAllLocalStorage().then((localStorage) => {
        Cypress.env("jxdf", localStorage["myOnlineVersionOfLocalhost.com"].jxdf);
        Cypress.env("elcd", localStorage["myOnlineVersionOfLocalhost.com"].elcd);
      });
    });
    cy.visit("/");
    window.localStorage.setItem(
      "s",
      "***"
    );
    window.localStorage.setItem("jxdf", Cypress.env("jxdf"));
    window.localStorage.setItem("elcd", Cypress.env("elcd"));
  }
);

Cypress Version

12.6.0

Node version

16.14.2

Operating System

windows 10

Debug Logs

Timed out after waiting 60000ms for your remote page to load.



Your page did not fire its load event within 60000ms.



You can try increasing the pageLoadTimeout value in cypress.config.ts 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.

Other

No response