2

我正在使用 VueJS 和 Cypress 来测试应用程序 e2e。我有一个模式，用户填写表格并单击“发送”按钮。当用户单击该按钮时，我们禁用表单字段和按钮，因此用户将无法填写/单击它们。之后，我们执行 POST 请求来上传数据，完成后，我们再次启用（并关闭模式）。这样做的方法：

    updateUIComponents: function(status) {
      this.field.disabled = status;
      ...
      this.sendButtondisabled = status;
    },

我想测试这些组件是否真的被禁用，使用赛普拉斯。但问题是我似乎无法弄清楚如何“冻结”发布请求并检查它是否被禁用。我当前的代码如下所示：


it('Test', () => {
    cy.intercept('GET','**/api/get-data', {
      statusCode: 200,
      fixture: 'test_input_one_record.json'
    });
    cy.intercept('POST','**/api/update-data', {
      statusCode: 200,
      fixture: 'test_input_no_data.json'
    }).as('updateData');
    cy.visit("http://localhost:8080");
    cy.get('tbody tr').eq(0).find('td').eq(8).find('button').click();           // Open modal
    cy.get('div[role="dialog"]').find('button').eq(1).click();                  // Click on update button
    cy.get('@updateData').then((interception) => {                              // Check form data parameters 
      assert.isNotNull(interception);
      const values = parseDataRequest(interception.request);
      assert.isTrue(values.data_number === "2222");
    });
});

我怎样才能让cy.get('div[role="dialog"]').find('button').eq(1).click()“等待”？我可以检查它是否被禁用的方式：

cy.get('#edit-document-data-number').find('input').should('be.disabled');
4

1 回答 1

2

如果重新启用仅在 POST 响应后发生，请在拦截中添加延迟以留出足够的时间cy.get('#edit-document-data-number').find('input').should('be.disabled')通过。

cy.intercept('POST','**/api/update-data', {
  statusCode: 200,
  delay: 2000,                               // delay here, maybe shorter will work
  fixture: 'test_input_no_data.json'
}).as('updateData')

cy.visit("http://localhost:8080")
cy.get('tbody tr').eq(0).find('td').eq(8).find('button').click();  
cy.get('div[role="dialog"]').find('button').eq(1).click();  

cy.get('#edit-document-data-number input')  // select in one command 
  .should('be.disabled')                    // for retry of assertion

cy.wait('@updateData')

cy.get('#edit-document-data-number input')  
  .should('not.be.disabled')                 

cy.get('@updateData').then((interception) => { 
  ...
于 2022-02-26T23:31:20.793 回答