Cypress-Fehler: Zeitüberschreitung nach 5000 Millisekunden mit „cy.wait()“ ... keine Anfrage aufgetreten

Question

Ich habe beschlossen, eine React-Anwendung mit Vite, Chakra-UI und TypeScript zu erstellen und sie in Cypress zu testen. Ziel ist es, mehr über einige dieser Technologien zu erfahren. Zufälligerweise habe ich Cypress zum ersten Mal verwendet.

Leider bin ich bei E2E-Tests darauf gestoßen. .wait() 的问题。该错误具体如下：CypressError：5000ms后超时重试：cy.wait()超时等待5000ms对于路由的第一个请求：getGames。从未发生任何请求。 Ich habe viele Ratschläge gesehen, wie man zuerst stubbing macht und dann auf den Anruf wartet, bevor man auf die Seite zugreift. Nach vielen Versuchen schaffe ich es jedoch nicht, den wartenden Anruf ohne Zeitüberschreitung zu erreichen. Mein letzter Versuch bestand darin, den beforeEach-ing-Aufruf vor dem Zugriffsfunktionsaufruf abzufangen. Wie Sie dem von mir hochgeladenen Bild entnehmen können, scheint sich der Abschnitt zu registrieren, nimmt aber nie zu.

Ist jemand auf diese Situation gestoßen und hat er mögliche Lösungen? Vielen Dank im Voraus!

Cypress-Konsole:

Ich habe ein Fixture definiert als games.json, das Folgendes enthält:

[
  {
    "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"
  );
});

Und meine Testdatei:

describe("The Home Page", () => {
  before(() => {
    cy.landing();
  });

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

  it("successfully loads", () => {
    cy.wait("@getGames");
  });
});

Answer 1

首先，您应该使用正确的协议 - https://api.rawg.io/api。

其次，https://api.rawg.io/api 之前没有任何内容，因此前面加通配符 ** 是不正确的。

第三，在路径分隔符/或//之前或之后放置通配符。

最后，不要在 before() 中放置拦截，因为它会在测试之间被清除。放入beforeEach()

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)
  });
})