如何冻结请求以测试使用赛普拉斯禁用的组件？

Question

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

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

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


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

Answer 1

如果 re-enable 仅在 POST 响应之后发生，请添加 delay to the intercept 以便有足够的时间让 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) => { 
  ...

如何冻结请求以测试使用赛普拉斯禁用的组件？

How to freeze request to test that components are disabled using Cypress?

javascript

vue.js

cypress

cypress-intercept