javascript - 如何为列表的每条记录添加数据测试 ID

Question

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

我尝试将数据测试 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>

Cypress 测试:

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

    });

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

Answer 1

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

因此，您需要使用:

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

还要确保使用 template literals (使用反引号:`string`)，否则您的变量 id 将不会被插入。