Why does not cypress alias work on Github CI?-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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.