批量图片上传测试：如何让Cypress等待POST请求后再断言？

场景 #

上传27张图片，检查图片列表是否包含所有上传的图片。

问题 #

代码逻辑顺序没问题，但断言在图片上传的POST请求完成前就执行了，导致测试失败。

截图 #

原测试代码 #

it('Can upload many images and see them', () => {
    cy.get('[datacy="uploadImages"]')
      .selectFile(
        [
            "cypress/fixtures/images/example.jpeg",
            ...
        ], { force: true });
    cy.get('.MuiAlert-message').should("be.visible");
    cy.get("[datacy='manageMediaImageList']").find("img").should("have.length", 15);
});

解决方案 #

问题出在你只等待了提示框显示，但这只能说明上传触发了，不代表所有图片的POST请求都完成了。给你两个可行的解决办法：

1. 拦截上传接口，等待所有请求完成

先拦截图片上传的POST接口，等所有27次上传请求都成功返回后再做断言：

it('Can upload many images and see them', () => {
    // 替换成你实际的上传接口路径
    cy.intercept('POST', '/api/media/upload').as('uploadRequest');

    cy.get('[datacy="uploadImages"]')
      .selectFile(
        [
            "cypress/fixtures/images/example.jpeg",
            ... // 剩下26张图片的路径
        ], { force: true });

    // 循环等待27次上传请求完成，超时时间根据你的上传速度调整
    Cypress._.times(27, () => {
        cy.wait('@uploadRequest', { timeout: 60000 })
          .its('response.statusCode')
          .should('eq', 200);
    });

    cy.get('.MuiAlert-message').should("be.visible");
    // 注意把断言数量改成27，和上传数量保持一致
    cy.get("[datacy='manageMediaImageList']").find("img").should("have.length", 27);
});

2. 延长断言超时，等待图片列表加载完成

如果不方便拦截接口，直接给图片数量断言设置足够长的超时时间，让Cypress等待列表更新到位：

it('Can upload many images and see them', () => {
    cy.get('[datacy="uploadImages"]')
      .selectFile(
        [
            "cypress/fixtures/images/example.jpeg",
            ... // 剩下26张图片的路径
        ], { force: true });

    cy.get('.MuiAlert-message').should("be.visible");
    // 设置60秒超时，确保所有图片都能加载到列表里
    cy.get("[datacy='manageMediaImageList']").find("img")
      .should("have.length", 27, { timeout: 60000 });
});

另外注意原代码里断言的是15张，和你要上传的27张不一致，记得修正这个数值。

内容的提问来源于stack exchange，提问作者Luke