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

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

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.