Cypress 在检查行数之前等待视图中的行列表出现

Question

使用 Angular，我创建了以下列表视图，列出了复制行。
我被要求编写一个 Cypress 测试用例：

1. 在初始加载复制选项卡时检查行数
2. 过滤复制并检查行数
3. 清除过滤器并再次检查行数

问题在于#1，赛普拉斯总是会在加载复制列表之前尝试检查计数。单击下面的链接“我的应用程序的工作方式”以查看动画 .gif

Angular 组件代码：

  <section class="my-3 d-flex">
    <div class="my-auto">
      <ng-container *ngTemplateOutlet="rowCount"></ng-container>
    </div>
...
  </section>
  <section class="my-3">
    <app-list
      data-cy="replicateList"
      [rows]="replicates"
      [loadError]="loadError"
      [rowTemplate]="replicateRow"
      [noRowsTemplate]="noRows"
      [noFilteredRowsTemplate]="noFilteredRows"
      [selectedFn]="isSelectedReplicate"
      [filterFns]="filters"
      [sortFn]="sort"
      (rowsFiltered)="onRowsFiltered($event)"
    >
      <ng-template #replicateRow let-replicate="row" let-index="index" let-selected="selected">
        <app-replicate-list-entry [replicate]="replicate" [index]="index" [selected]="selected"></app-replicate-list-entry>
      </ng-template>

      <ng-template #noRows>
        <div class="d-flex justify-content-center">{{ 'replicate_list_no_rows' | translate }}</div>
      </ng-template>

      <ng-template #noFilteredRows>
        <div class="d-flex justify-content-center">{{ 'replicate_list_no_filtered_rows' | translate }}</div>
      </ng-template>
    </app-list>
  </section>

The way my application works

Cypress test to test the feature

从赛普拉斯测试 .gif 中，您可以看到我们正在尝试在微调器仍在加载时计算行数。因此我们总是得到以下空值：

Loading Replications // 这应该按照动画 .gif 读取“79 个结果”；那么下面的 Cypress 测试会选择 79

resAfterFilter 的编号为：null

resultInNum开头的值为：null

我的赛普拉斯测试代码：

pageSelected = 'replicateList'


  static countAfterFilter(pageSelected) {
      cy.get('[data-cy=' + pageSelected + ']', { timeout: 1000 }).invoke('text').then((text) => {
        cy.get('[data-cy=\'rowCount\']', { timeout: 10000 }).invoke('text').then((text) => {
          cy.log(text);
          var resultInStr = text;
          var resAfterFilter = (resultInStr.match(/\d+/));
          cy.log("the number for resAfterFilter is : " + resAfterFilter);
          this.filtersAllOffResultInNum = resAfterFilter;
          cy.log("the value of resultInNum at the begining is : " + this.filtersAllOffResultInNum)
        });
    });
  }

在检查列表视图中的行数之前，我尝试确保列表内容已加载但失败：

cy.get('div.spinner-border.m-5', { timeout: 10000 }).should('not.be.visible', { timeout: 10000 }).then(() => {0

因为赛普拉斯没有找到微调器而失败。

cy.get('[data-cy=' + pageSelected + ']', { timeout: 10000 }).find('.listRow', { timeout: 10000}).should('have.length.gt', 0).then(() => {

失败，因为列表视图内容的长度将始终为 0 - 因为列表视图正在加载，我们只能看到微调器，根据上面的赛普拉斯动画 .gif 链接。

Answer 1

您有正确的方法来等待行出现，因为.should(...) 会强制重试，直到满足条件

cy.get('[data-cy=' + pageSelected + ']', { timeout: 10000 })
  .find('.listRow', { timeout: 10000})
  .should('have.length.gt', 0)

但有时很难知道是否正在重试正确的事情。也许只有 find() 被重试，而不是 get()。

尝试结合标准

cy.get('[data-cy=' + pageSelected + ']' + ' .listRow', { timeout: 10000 })
  .should('have.length.gt', 0)

请注意，.listRow 前面有一个空格，表示后代元素。

或者，使用字符串模板

cy.get(`[data-cy="${pageSelected}"] .listRow`, { timeout: 10000 })
  .should('have.length.gt', 0)

static countAfterFilter() 表示您有一个页面对象，但该模式并不总是适用于赛普拉斯。首先在测试中尝试上述代码内联，如果它有效，则将其移动到页面对象。

Answer 2

我会检查#noRows 是否不存在，然后检查行数：

cy.get('[data-cy="replicateList"]').should('be.visible') //try locating the selector for this element as a pageRender validation
cy.get('#noRows`).should('not.exist') // //try locating the selector for this element as an assertion that the list is present
cy.get('[data-cy=' + pageSelected + ']', { timeout: 1000 
    }).invoke('text').then((text) => {
        cy.get('[data-cy=\'rowCount\']', { timeout: 10000 }).invoke('text').then((text) => {
          cy.log(text);
          var resultInStr = text;
          var resAfterFilter = (resultInStr.match(/\d+/));
          cy.log("the number for resAfterFilter is : " + resAfterFilter);
          this.filtersAllOffResultInNum = resAfterFilter;
          cy.log("the value of resultInNum at the begining is : " + this.filtersAllOffResultInNum)
     });
});

Answer 3

根据@RosenMihaylov 的建议，可能会在$translateProvider 中搜索与replicate_list_no_rows 对应的任何文本，

例如，如果用英语是

$translateProvider.translations('en', {
  'replicate_list_no_rows': 'There are no rows',
  ...
});

使用这个

cy.contains('div', 'There are no rows').should('not.exist');

那么计数器文本就是

cy.get('[data-cy="rowCount"]')
  .invoke('text')
  .should('eq', '46 results')

或者如果您正在使用各种语言进行测试

cy.get('[data-cy="rowCount"]')
  .invoke('text')
  .should('contain', '46')    // drop the language dependent text