如何处理 API 调用的赛普拉斯超时错误答案

【问题标题】：How to handle Cypress timeout errors for API calls如何处理 API 调用的赛普拉斯超时错误
【发布时间】：2020-04-09 04:56:25
【问题描述】：

我有按钮，点击它会打开一个侧面板。在侧面板的 willMount 上，我们触发一个 api 来获取要在面板上显示的数据。因此，当 api cal 正在处理中时，我们会显示 loader，然后在成功时显示一个包含已加载数据的表单。

componentWillMount() {
const objReq = getObjectDetails(pathname,id); // fetch API
this.setState({ loading: true }, () => {
  if (objReq && objReq[0]) {
    objReq[0].then((data) => {
      const objData = data.data[0];
      if (objData) {
        this.setState({loading: false });
        this.populateData(objData, objReq[1]); //function to populate data
      }
    });
  }
});
this.setState({ loading: false });
}

在表单上，我有预填充数据的输入字段。为了测试使用，cypress 我正在使用下面的代码。

describe('Page Tests', () => {
beforeEach(() => {
cy.server();
cy.route('GET', '{baseurl}/sdetails/*', sDetailmockDatadata).as('getSDetail');
});
describe('Test Create Form', () => { 
 beforeEach(() => {
        cy.wait('@getSDetail');
        cy.get('#sidePanelbTn').click({force:true});   // function to open side panel
      });
      describe('When Form submit button is Clicked', () => {
        it('Should show create form with pre-filled details of object', () => {
          cy.get('#firstInputBox').invoke('val').then((value) => expect(value).to.not.equal(''));
        });
      });
    })
})

在上面的测试用例中，我们正在检查 firstInputBox 中的值，但是当我在浏览器中运行测试时，它显示加载屏幕并出现超时提示“超时错误：未找到 firstInputBox”。

虽然 API 被存根，并且响应可用，但加载器屏幕并没有消失，因为在 DOM 中找不到 firstInputBox id。

请帮助我处理这种情况。

谢谢！

【问题讨论】：

标签： reactjs async-await ui-automation cypress

【解决方案1】：

这似乎是不可能的。 Cypress 是一个相当粗糙的库。

您不能将 .catch 错误处理程序添加到失败的命令。

https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Commands-Are-Not-Promises

【讨论】：