Why does not cypress alias work on Github CI?

Question

I have a problem in github ci, it cannot find the alias, and think it even doesn't define that, but all is well on local. I tested on both cypress:open and cypress:run

this is the command I defiend:

Cypress.Commands.add("byPassLogin", () => {
  const url = Cypress.env("api_url");
  const token = "...";

  cy.saveToLocalStorage("auth_token", token);

  cy.intercept("POST", url, (req) => {
    if (req.body.operationName === "me") {
      req.reply({
        statusCode: 200,
        body: {
          data: {
            me: { id: "1", email: "[email protected]" },
          },
        },
      });
    }
  }).as("byPassLogin");
});

and then I used it on beforeEach like this

describe("test account functionality", () => {
  const URL = Cypress.env("api_url");

  beforeEach(() => {
    cy.visit("/");
    cy.byPassLogin();
  });

  it.only("should logout when click on nav bar", () => {
    cy.intercept("POST", URL, (req) => {
      if (req.body.operationName === "signOut") {
        req.reply({
          statusCode: 200,
          body: {
            data: { updateUser: { errors: null, user: { id: "1" } } },
          },
        });
      }
    }).as("signOut");

    cy.wait("@byPassLogin").then(() => {
      cy.url().should("include", "/app");
      cy.get("#account").click();
      cy.get("#logout").click();
      cy.wait("@signOut").then(() => {
        cy.url().should("include", "/login");
      });
    });
  });
});

I used another approach, it works on local but still not work on CI

Cypress.Commands.add("byPassLogin", () => {
  const url = Cypress.env("api_url");
  const token = "...";

  cy.intercept("POST", url, (req) => {
    req.reply({
      statusCode: 200,
      body: {
        data: {
          login: { user: { id: "1", email: "[email protected]" }, token },
        },
      },
    });
  }).as("byPassLogin");

  cy.visit("/").then(() => {
    cy.get("#email").type("[email protected]");
    cy.get("#password").type("123456");
    cy.get("button[type=submit]").click();

    cy.wait("@byPassLogin").then(() => {
      cy.url().should("include", "/app");
    });
  });

and used it like this

describe("test account functionality", () => {
  const URL = Cypress.env("api_url");

  beforeEach(() => {
    cy.byPassLogin();
  });

  it.only("should logout when click on nav bar", () => {
    cy.intercept("POST", URL, (req) => {
      if (req.body.operationName === "signOut") {
        req.reply({
          statusCode: 200,
          body: {
            data: { updateUser: { errors: null, user: { id: "1" } } },
          },
        });
      }
    }).as("signOut");

    cy.get("#account").click();
    cy.get("#logout").click();
    cy.wait("@signOut").then(() => {
      cy.url().should("include", "/login");
    });
  });

error: CypressError: Timed out retrying after 5000ms: cy.wait() timed out waiting 5000ms for the 1st request to the route: byPassLogin. No request ever occurred.

any help would be appreciated cypress version: 8.4.1 react: 18

Answer 1

It seems that you should reverse the order of commands in the beforeEach()

beforeEach(() => {
  cy.byPassLogin();
  cy.visit("/");
})

There is nothing in the command flow between cy.intercept(...).as("byPassLogin") and cy.wait("@byPassLogin") except the signOut intercept.

As you probably know cy.intercept() is a command to set up a listener on the network requests, but it does not trigger any event in the app.

The sequence for intercepting is

• set up the intercept listener
• trigger the request (e.g cy.visit() or .click())
• wait for the alias

Answer 2

Thanks to @fody I succeed to manage the issue, to find the issue I used a workflow similar to this to record my testing in dashboard.cypress.io, then I found it does not post form data to the correct endpoint URL, actually since the URL has been defined in env I needed to define it in CI as well.

That's it. It was working since I had the env in local.