I am writing an automated test in Cypress to test updating a record in a list of records. I want to test the last record created in the list.

I have tried adding a data-test-id (attr.data-test-id="project-{{id}}") to the HTML and referenced it in my Cypress test.

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 test:

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

    });

I want to pass the index number (id) in the Cypress test, however, I am receiving a "Syntax error, unrecognized expression" message in Cypress. What am I doing wrong? Thanks in advance!

I am writing an automated test in Cypress to test updating a record in a list of records. I want to test the last record created in the list.

I have tried adding a data-test-id (attr.data-test-id="project-{{id}}") to the HTML and referenced it in my Cypress test.

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 test:

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

    });

I want to pass the index number (id) in the Cypress test, however, I am receiving a "Syntax error, unrecognized expression" message in Cypress. What am I doing wrong? Thanks in advance!

• javascript
• html
• cypress

• Try cy.contains('mat-list-item', 'text-of-the-item-i-want-to-test').click() or cy.get('mat-list-item').eq(6).click() (assuming e.g you want the 7th item). There's no way to parametize the it() callback, so you have to define the position in another way. – user8745435 Commented Oct 9, 2019 at 23:07

2 Answers 2

Not familiar with Angular, but from it seems the attr.data- is angular-specific template syntax. The actual HTML it'll produce is going to be standard data- attribute.

Thus, you need to query using:

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

Also make sure you use template literals (using backticks: `string`), otherwise your variable id won't get interpolated.

Can you try below code and check the test is running fine. For the dollar symbol $ can you add Cypress.$ and give a try with the below code:

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