cy.visit() loads blank page on an app using the hash router

[aubincc]

Current behavior

When I test my company's vue app, which uses the hash router, I cannot seem to visit the same url on the second test.

If I have Cypress.env("baseUrl") = "https://my-example-app.com/"

I cannot have cy.visit("#/login") or cy.visit("https://my-example-app.com/#/login") in a second it() or in a beforeEach() hook.

However cy.visit("") and cy.visit("https://my-example-app.com/") work well, even if I am redirected by the page to #/login immediately.

describe("Visit login page", () => {
  it("Working", () => {
    cy.visit("#/login"); // loads page correctly
    cy.get("img.logo").should("be.visible"); // finds the logo image 
  });
  it("Page is blank", () => {
    cy.visit("#/login"); // loads a blank page
    cy.get("img.logo").should("be.visible"); // does not find the logo image 
  });
});

I have this behaviour regardless of the testIsolation value.

Desired behavior

The cy.visit("#/login") in the second it() or second trigger of beforeEach() should load the page correctly.

Test code to reproduce

describe("Visit login page", () => {
  it("Working", () => {
    cy.visit("#/login"); // loads page correctly
    cy.get("img.logo").should("be.visible"); // finds the logo image 
  });
  it("Page is blank", () => {
    cy.visit("#/login"); // loads a blank page
    cy.get("img.logo").should("be.visible"); // does not find the logo image 
  });
});

Cypress Version

v12.14.0

Node version

v18.16.0

Operating System

Windows 11 Pro 22H2 Build 22621.1702

Debug Logs

No response

Other

No response

[aubincc]

Verified on an app with React's hash router (requiring Node 16): https://codesandbox.io/s/react-hash-router-juo2v

describe("Visit login page", () => {
  it("Working", () => {
    cy.visit("http://localhost:3000/#/about");
    cy.get("#root > div > h1").should("contain.text", "Single Page App");
    cy.get(".navbar > li").first().should("contain.text", "Home").next().should("contain.text", "About").next().should("contain.text", "Portfolio Details");
    cy.get("main h1").should("contain.text", "About");
  });
  it("Page is blank", () => {
    cy.visit("http://localhost:3000/#/about");
    cy.get("#root > div > h1").should("contain.text", "Single Page App");
    cy.get(".navbar > li").first().should("contain.text", "Home").next().should("contain.text", "About").next().should("contain.text", "Portfolio Details");
    cy.get(".about > h1").should("contain.text", "About");
  });
  it("Working on /", () => {
    cy.visit("http://localhost:3000/");
    cy.get("#root > div > h1").should("contain.text", "Single Page App");
    cy.get(".navbar > li").first().should("contain.text", "Home").next().should("contain.text", "About").next().should("contain.text", "Portfolio Details");
    cy.get("main h1").should("contain.text", "You're home!");
  });
});

[mschile]

Hi @aubincc 👋, thanks for logging this issue. Unfortunately, I haven't been able to recreate the issue. I create a test project(branch issue-27050) that uses your react-hash-router example but all of the tests passed. Could you take a look at the project and let me know what changes are needed to reproduce the issue.

[aubincc]

Hi @mschile and thank you, I certainly should have tested further, with the minimum, just like you did.

The problem seems to be coming from this Cypress plugin that I use: @bahmutov/cy-api.

I tested by removing the "import "@bahmutov/cy-api";" from cypress\support\e2e.ts and the problem was gone.

I tested with cypress-plugin-api and the problem did not show up again.

[mschile]

Per the above comment, this does not appear to be an issue with Cypress. As such, I am going to go ahead and close this issue.