I decided to build a React application using Vite, Chakra-UI and TypeScript, and test it in Cypress. The goal is to learn more about some of these technologies. Coincidentally, this was my first time using Cypress.
Unfortunately, I ran into a problem with testing .wait() in my E2E tests. The error is as follows: CypressError: Timeout and retry after 5000ms: cy.wait()Timeout waiting5000msFor the first request of the route: getGames. No request ever occurred. I've seen a lot of advice about first stubbing and then waiting for the call before accessing the page. However, after many attempts, I can't seem to get the waiting call to not timeout. My latest attempt was to intercept in the beforeEach-ing call before the access function call. As you can see from the image I uploaded, the intercept seems to register but never increases.
Has anyone encountered this situation and has a possible solution? Thank you in advance!
Cypress Console:
I have a fixture defined as games.json which contains the following:
[
{
"id": 1,
"name": "The Witcher 3: Wild Hunt",
"background_image": "https://media.rawg.io/media/crop/600/400/games/618/618c2031a07bbff6b4f611f10b6bcdbc.jpg",
"parent_platforms": [
{ "id": 1, "name": "PC", "slug": "pc" },
{ "id": 2, "name": "PlayStation", "slug": "playstation" },
{ "id": 3, "name": "Xbox", "slug": "xbox" },
{ "id": 7, "name": "Nintendo", "slug": "nintendo" }
],
"metacritic": "92"
},
{
"id": 2,
"name": "BioShock Infinite",
"background_image": "https://media.rawg.io/media/crop/600/400/games/fc1/fc1307a2774506b5bd65d7e8424664a7.jpg",
"parent_platforms": [
{ "id": 1, "name": "PC", "slug": "pc" },
{ "id": 2, "name": "PlayStation", "slug": "playstation" },
{ "id": 3, "name": "Xbox", "slug": "xbox" },
{ "id": 6, "name": "Linux", "slug": "linux" },
{ "id": 7, "name": "Nintendo", "slug": "nintendo" }
],
"metacritic": "94"
}
]
../support/commands.ts:
const baseURL = "**http://api.rawg.io/api*";
Cypress.Commands.add("landing", () => {
cy.intercept("GET", `${baseURL}/games`, { fixture: "games.json" }).as(
"getGames"
);
});
And my test file:
describe("The Home Page", () => {
before(() => {
cy.landing();
});
beforeEach(() => {
cy.visit("/");
});
it("successfully loads", () => {
cy.wait("@getGames");
});
}); 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
First of all, you should use the correct protocol -
https://api.rawg.io/api.Secondly,
https://api.rawg.io/apidoes not have any content before it, so it is incorrect to add the wildcard**in front.Third, place wildcard characters before or after the path separator
/or//.Finally, don't put interception in
before()as it will be cleared between tests. Put inbeforeEach()describe("The Home Page", () => { beforeEach(() => { // these all work (use only one) cy.intercept('https://api.rawg.io/api/games?key=my-key-goes-here').as('games') cy.intercept('**/api/games?key=my-key-goes-here').as('games') cy.intercept('**/api/games?*').as('games') cy.intercept('**/api/*').as('games') cy.intercept('**//api.rawg.io/api/*').as('games') cy.intercept({pathname: '**/api/*'}).as('games') cy.intercept({pathname: '**/api/games'}).as('games') cy.visit("/"); }); it("successfully loads", () => { cy.wait("@games") .its('response.body.count') .should('be.gt', 900000) }) it("successfully loads again", () => { cy.wait("@games") .its('response.body.count') .should('be.gt', 900000) }); })