Cypress .each()遍历中执行cy.wait()为何未暂停等待API请求？

数据老陈

2026-7-9

在Cypress.each()迭代中添加cy.wait()/setTimeout后，迭代间不会自动等待的问题

问题核心

你碰到的情况本质是：.each()遍历里的原生DOM操作绕过了Cypress的命令队列，导致所有按钮点击瞬间完成，完全没等cy.wait("@getProducts")执行完毕。

原因分析

代码里的category.click()是直接调用DOM元素的原生click方法，属于同步操作，不会被纳入Cypress的异步命令队列。而cy.wait()是Cypress的异步命令，要等队列里前面的任务完成才会执行。实际执行顺序变成：

一次性触发所有.category元素的原生点击（瞬间发起所有API请求）
才开始依次执行cy.wait("@getProducts")

这就造成了“按钮连续点击，不等待API请求完成”的现象。

解决方案

把原生click换成Cypress的命令式点击，用cy.wrap(category).click()将DOM元素转为Cypress可管控的对象，这样点击操作会被加入命令队列，和后续的cy.wait()严格按顺序执行，每个迭代都会等上一个API请求完成后，再进行下一次点击。

修改后的代码：

describe("Store", () => {
    it("changes category on click", () => {
        cy.visit("/store");
        cy.intercept("https://fakestoreapi.com/products/category/*").as(
            "getProducts",
        );
        cy.get(".category").each((category, i, l) => {
            // 转为Cypress命令式点击，纳入命令队列
            cy.wrap(category).click();
            cy.wait("@getProducts");
            console.log(i);
        });
    });
});