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: "test@email.com" },
          },
        },
      });
    }
  }).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: "test@email.com" }, token },
        },
      },
    });
  }).as("byPassLogin");

  cy.visit("/").then(() => {
    cy.get("#email").type("test@email.com");
    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

Is the error stating it cannot find the alias or is the wait timing out? — jjhelguero, Apr 15 '22 at 15:40
@jjhelguero CypressError: Timed out retrying after 5000ms: cy.wait() timed out waiting 5000ms for the 1st request to the route: byPassLogin. No request ever occurred. — Hamid Shoja, Apr 16 '22 at 11:03
It looks ok after revision (the order of commands), so most likely the URL isn't matching. You can substitute `"*"` (catches all) for URL as a debugging measure. Should be ok as long as the only POST is from `button[type=submit]`. If that works, the problem is the URL format. — Fody, Apr 16 '22 at 11:13

score 2 · Answer 1 · answered Apr 15 '22 at 10:45

2

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

answered Apr 15 '22 at 10:45

Fody

23,754
3
20
37

same 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. – Hamid Shoja Apr 15 '22 at 10:52
Actually, it will call the `me` operation after it saves the `token` in local storage automatically is updated. – Hamid Shoja Apr 15 '22 at 10:56
just updated with another method you suggested, it still not work on CI @fody – Hamid Shoja Apr 15 '22 at 11:20

score 1 · Answer 2 · answered Apr 16 '22 at 15:07

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.

Why does not cypress alias work on Github CI?

2 Answers2