如何为列表中的每个记录添加 data-test-id？

Question

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

我尝试在HTML中添加数据测试ID（attr.data-test-id="project-{{id}}"），并在我的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中收到“语法错误，无法识别表达式”的消息。我做错了什么？提前感谢！

- DraeDaQA

---

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

Answer 1

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

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

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

同时，请确保您使用模板字面量（使用反引号：`string`），否则您的变量id将不会被插值。

- dwelle

Answer 2

你能试一下下面的代码并检查测试是否正常运行吗？对于美元符号$，你可以添加Cypress.$并尝试以下代码：

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

- soccerway