如何在 Cypress 中重复、圈出 XHR 请求、处理多个 XHR 请求答案

【问题标题】：How to repeat, circle XHR requests, handle multiple XHR requests in Cypress如何在 Cypress 中重复、圈出 XHR 请求、处理多个 XHR 请求
【发布时间】：2020-02-21 09:37:30
【问题描述】：

如何在测试前通过间隔请求？我尝试了 2 种方法来重试请求，但都失败了；

我需要上传一个文件，等待导入成功

第一步，我将文件上传到我在 cypress 中的服务器

    before( ()=> {
      //my custom POST command
      cy.form_request(url, data)
        .then(({id}) => {

然后等待上传文件的id

          check_It_Till_Success_It(id);
        })
    })

然后将接收到的 id 传递给一个新请求以验证其在服务器上的状态，并且需要重复请求直到文件处理完成。在下面的解决方案中它说

CypressError: cy.wait() 只接受路由的别名。别名：“check_it_request”与路由不匹配。

  function check_It_Till_Success_It(id) {

    function checkRequest() {
      cy.request("GET", "http://localhost:28080/admin/api/catalog/import/status/" + id)
        .then(({status}) => {
          if (status === "FINISHED" || status === "FAILED") {
            clearInterval(check_It);
          } else {
            console.log('retry one more time');
          }
        }).as('check_it_request');
      cy.wait("@check_it_request");
    }

    checkRequest();

    const check_It =  setInterval(checkRequest, 1000);
  }

或者这是我通过递归请求的另一个解决方案：

  function check_It_Till_Success_It(id) {

    return (
      cy.request("GET", BASE_URL + "/admin/api/catalog/import/status/" + id)
        .then(({status}) => {
          if (status === "FINISHED" || status === "FAILED") {
            console.log('success');
          } else {
            console.log('retry one more time');
            setTimeout(() => check_It_Till_Success_It(id), 1000)
          }
        })
    )
  }

但它会引发错误：

未捕获的 CypressError：Cypress 检测到您从一个命令返回了一个 Promise，同时还在该 Promise 中调用了一个或多个 cy 命令。

我做错了什么？

【问题讨论】：

标签： cypress

【解决方案1】：

由于使用了原生 JS 工具，如 setTimeout、setInterval，我发现了我的难题。

Cypress 不允许使用它们并用可控方法替换：cy.clock 和 cy.tick

所以我采用了递归实现并替换为上面的方法，我的代码变成了：


  function check_It_Till_Success_It(id) {
    cy.request("GET", BASE_URL + "/admin/api/catalog/import/status/" + id)
      .then(resp => {
        const status = resp.body.status;

        if (status === "FINISHED" || status === "FAILED") {
          console.log('success');

        } else {
          console.log('retry one more time');
          cy.clock();
          cy.tick(1000);
          check_It_Till_Success_It(id)
        }
      })
  }

题外话：我是 Cypress 的新手，据我了解，它取代了大部分 js 原生功能，因此需要更仔细地查看文档（BINGO !) 或查看issue section，因为某些 JS 特定功能只会在没有任何通知或捕获错误的情况下使 Cypress 崩溃，例如：FormData object crashed Cypress'es request method。

【讨论】：