赛普拉斯测试似乎“忽略”了 mat-paginator pageSize答案

【问题标题】：Cypress test seems to 'ignore' mat-paginator pageSize赛普拉斯测试似乎“忽略”了 mat-paginator pageSize
【发布时间】：2020-07-21 14:14:05
【问题描述】：

我正在尝试解决集成测试中的一个错误，该测试应该测试使用 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));

现在，当我删除超时时，分页器在实际应用程序中不起作用，所以我在想这个问题可能与它有什么关系？

【问题讨论】：

您尝试根据 API 响应对 DOM 元素进行断言，这不一定是错误的，但可能需要一些时间才能呈现。你能在cy.get('.mat-paginator') ... 之前添加一个cy.reload() 并再次运行它吗？让我们确保与组件状态无关。
重新加载不起作用，它仍然加载了所有 24 个项目。

标签： angular testing cypress

【解决方案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();

【讨论】：

感谢您的回答！我添加了范围标签检查，但是，它应该说“第 1 页，共 2 页”（它仍然说 1 of 1）。我确实想尝试检查数据源，但是如何从这里访问它？它说它是未定义的。我尝试导入组件和变量本身，但没有成功（我对赛普拉斯很陌生）。
好的，这排除了加载延迟 - 无论如何，您对路线的处理看起来不错（我假设您在 cy.route() 之前使用 cy.server() 这是一个要求）。
我在https://material.angular.io/components/paginator/examples 上进行了测试，它工作正常。示例使用pageSizeOptions 属性的一件事，如果您设置它会改善吗？
cy.server() 在每次测试之前执行。可悲的是添加pageSizeOptions 也没有解决问题。现在我们有一些使用分页器的其他页面，其中大多数页面大小也为 20，并且实现方式完全相同，这些测试确实有效。 manyItems 会导致问题吗？
如果您使用的是最新版本的 angular-material，您的 ng-if 指令应该是 *ngIf="dataSource.data.length > 0"。我无法将您的问题描述与我观察到的相关联，但是在ngAfterViewInit() 中控制台记录数据源，我可以看到数据源上没有长度属性，但 datasource.data 有一个。顺便说一句，我想您在 ngAfterViewInit() 中有 this.dataSource.paginator = this.paginator;。

【解决方案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();

再次感谢所有 cmets！

【讨论】：