如何为列表的每条记录添加 data-test-id答案

【问题标题】：How to add a data-test-id for each record of a list如何为列表的每条记录添加 data-test-id
【发布时间】：2019-09-28 03:17:30
【问题描述】：

我正在 Cypress 中编写一个自动化测试来测试更新记录列表中的记录。我想测试在列表中创建的最后一条记录。

我尝试将 data-test-id (attr.data-test-id="project-{{id}}") 添加到 HTML 并在我的 Cypress 测试中引用它。

HTML：

      <mat-list-item
        *ngFor="let project of projects; let id=index"
        (click)="selected.emit(project)"
        attr.data-test-id="project-{{id}}">
        <h3 mat-line>
          {{project.title}}
        </h3>
        <p mat-line>
          {{project.details}}
        </p>

赛普拉斯测试：

  describe('#update', () => {
    it('updates a record', (id) => {
      cy.get('[attr.data-test-id="project-${id}"]').click()

    });

我想在 Cypress 测试中传递索引号 (id)，但是，我在 Cypress 中收到“语法错误，无法识别的表达式”消息。我究竟做错了什么？提前致谢！

【问题讨论】：

尝试cy.contains('mat-list-item', 'text-of-the-item-i-want-to-test').click() 或cy.get('mat-list-item').eq(6).click()（假设您想要第 7 项）。无法对it() 回调进行参数化，因此您必须以另一种方式定义位置。

标签： javascript html cypress

【解决方案1】：

不熟悉 Angular，但似乎 attr.data- 是特定于 Angular 的模板语法。它将生成的实际 HTML 将是标准的 data- 属性。

因此，您需要使用以下方式查询：

cy.get(`[data-test-id="project-${id}"]`).click()

还要确保您使用 template literals（使用反引号：`string`），否则您的变量 id 将不会被插值。

【讨论】：

【解决方案2】：

您可以尝试下面的代码并检查测试是否运行良好。对于美元符号$，您可以添加Cypress.$ 并尝试使用以下代码：

describe('Some update', () => {
        it('updates a record', (id) => {
          cy.get('[data-test-id="project-Cypress.${id}"]').click()
        });

【讨论】：