Question

我正在尝试解决集成测试中的错误，该错误应该测试使用mat-paginator在页面之间进行切换是否正常。分页器的pageSize为20，响应装置包含24个“项目”。当我单击该按钮时，我希望看到20个表行，一个启用的“下一个”按钮以及其余4行。它在应用程序中工作正常，但是当我运行测试时，似乎好像忽略了pageSize。 “下一个”按钮被禁用，分页器显示“第1页，共1页”，并且显示所有24个项目。

我得到的错误是Timed out retrying: cy.click() failed because this element is disabled，这是有道理的，因为只有一页而不是两页。

我尝试了各种不同的操作，例如更改应用程序的实际代码中的项目数量，更改pageSize以及检查测试窗口中的元素（使用Chrome 84）。将"items"移到"data"也不起作用。

这些是测试，manyItems和分页器（我确实删除了一些不适用于此问题的代码）

测试

cy.route({ method: 'POST', url: '**/graphql', response: manyItems }).as('manyItems');
cy.visit('/items');
cy.wait(['@manyItems', '@uset', '@colleagues', '@groups'], { requestTimeout: 10000 });
cy.get('.mat-paginator').find('button.mat-paginator-navigation-next.mat-icon-button').click();

许多项目

{
  "data": {
    "items": [
      { },
      { }, // etc.
    ]
  }
}

分页器

<mat-paginator [pageSize]="20" [hidePageSize]="true" *ngIf="dataSource.data.length > 0"></mat-paginator>

有没有办法解决这个问题？

修改

dataSource分页器周围设置了超时：

setTimeout(() => (this.dataSource.paginator = this.paginator));

现在，当我删除超时时，分页器在实际的应用程序中不起作用，所以我认为这个问题可能可能需要处理吗？

Answer 1

如果这是@AlexIzbas提出的解决问题，则可以在单击按钮之前先对范围标签进行测试，

cy.route({ method: 'POST', url: '**/graphql', response: manyItems }).as('manyItems');
cy.visit('/items');
cy.wait(['@manyItems'], { requestTimeout: 10000 });

cy.get('.mat-paginator')
  .find('.mat-paginator-range-label')
  .should('contain', `20 of ${dataSource.length}`);

cy.get('.mat-paginator')
  .find('button.mat-paginator-next')
  .click();

Answer 2

所以setTimout实际上是引起问题的原因！我解决问题的方法是在等待之后简单地添加cy.tick(1000)：

cy.route({ method: 'POST', url: '**/graphql', response: manyItems }).as('manyItems');
cy.visit('/items');
cy.wait(['@manyItems', '@uset', '@colleagues', '@groups'], { requestTimeout: 10000 });
cy.tick(1000);
cy.get('.mat-paginator').find('button.mat-paginator-navigation-next.mat-icon-button').click();

再次感谢您的所有评论！

赛普拉斯测试似乎“忽略”了垫子页面大小

2 个答案: