我決定使用 Vite、Chakra-UI 和 TypeScript 建立一個(gè) React 應(yīng)用程序,並在 Cypress 中完成測試。目標(biāo)是更多地了解其中一些技術(shù)。巧合的是,這是我第一次使用 Cypress。
不幸的是,我在 E2E 測試中遇到了有關(guān)測試 .wait()
的問題。錯(cuò)誤具體如下:CypressError:5000ms後超時(shí)重試:
cy.wait()超時(shí)等待
5000ms對(duì)於路由的第一個(gè)請(qǐng)求:
getGames。從未發(fā)生任何請(qǐng)求。
我見過很多關(guān)於在訪問頁面之前首先進(jìn)行存根然後等待調(diào)用的建議。然而,經(jīng)過多次嘗試,我似乎無法讓等待呼叫不超時(shí)。我最近的嘗試是在 beforeEach-ing 訪問函數(shù)呼叫之前的 before 呼叫中進(jìn)行攔截。正如您從我上傳的圖像中看到的,截距似乎已註冊(cè),但從未增加。
有沒有人遇到過這種情況,並且有可能的解決方案?預(yù)先感謝您!
賽普拉斯控制臺(tái):
我有一個(gè)定義為 games.json
的固定裝置,其中包含以下內(nèi)容:
[ { "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"); }); });
首先,您應(yīng)該使用正確的協(xié)定 - https://api.rawg.io/api
。
其次,https://api.rawg.io/api
之前沒有任何內(nèi)容,因此前面加通配符 **
是不正確的。
第三,在路徑分隔符號(hào)/
或//
之前或之後放置通配符。
最後,不要在 before()
中放置攔截,因?yàn)樗鼤?huì)在測試之間被清除。放入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) }); })