Cypress錯誤：5000毫秒後超時 `cy.wait()` ...沒有任何請求發生

Question

我決定使用 Vite、Chakra-UI 和 TypeScript 建立一個 React 應用程序，並在 Cypress 中完成測試。目標是更多地了解其中一些技術。巧合的是，這是我第一次使用 Cypress。

不幸的是，我在 E2E 測試中遇到了有關測試 .wait() 的問題。錯誤具體如下：CypressError：5000ms後超時重試：cy.wait()超時等待5000ms對於路由的第一個請求：getGames。從未發生任何請求。 我見過很多關於在訪問頁面之前首先進行存根然後等待調用的建議。然而，經過多次嘗試，我似乎無法讓等待呼叫不超時。我最近的嘗試是在 beforeEach-ing 訪問函數呼叫之前的 before 呼叫中進行攔截。正如您從我上傳的圖像中看到的，截距似乎已註冊，但從未增加。

有沒有人遇到過這種情況，並且有可能的解決方案？預先感謝您！

賽普拉斯控制台：

我有一個定義為 games.json 的固定裝置，其中包含以下內容：

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

還有我的測試文件：

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