如何处理API调用的Cypress超时错误

时间:2019-12-16 17:24:27

标签: reactjs async-await ui-automation cypress

我有一个按钮,单击后它会打开一个侧面板。在侧面板的willMount上,我们触发一个api以使数据显示在面板上。因此,在进行api cal时,我们将显示加载程序,然后显示成功加载数据的表单。

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 });
}

在表单上,​​我有一个包含预填充数据的输入字段。要测试使用,赛普拉斯正在使用以下代码。

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,所以加载程序屏幕不会消失。

请帮助我处理这种情况。

谢谢!

1 个答案:

答案 0 :(得分:0)

这似乎是不可能的。赛普拉斯是一个非常粗糙的库。

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

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