Cypress - Can't interact with a content in a list

I'm new on Cypress and still learning.

I have some difficult to make a test with a list like click button from a list.

Here my code
session.cy.ts :

it('should display Create Button and click on Detail button', () => {
    // Found it
    cy.get('.list button[routerLink="create"]').should('exist');
    // Not found
    cy.get('.items .item button[routerLink="detail"]').click();
    cy.url().should('include', '/sessions/detail/1');
  });

list.component.html :

<div class="list">
  <mat-card>
    <mat-card-header fxLayout="row" fxLayoutAlign="space-between center">
      <mat-card-title class="m0">Rentals available</mat-card-title>
      <button *ngIf="user!.admin" mat-raised-button color="primary" routerLink="create">
        <mat-icon>add</mat-icon>
        <span class="ml1">Create</span>
      </button>
    </mat-card-header>
    <div class="items mt2" fxLayout="row wrap" fxLayout.lt-md="column">
      <mat-card class="item" *ngFor="let session of (sessions$ | async)" fxFlex>
        <mat-card-header>
          <mat-card-title>{{ session.name }}</mat-card-title>
          <mat-card-subtitle>
            Session on {{ session.date | date: 'longDate'}}
          </mat-card-subtitle>
        </mat-card-header>
        <div mat-card-image fxLayoutAlign="center center">
          <img class="picture" src="assets/sessions.png" alt="Yoga session">
        </div>
        <mat-card-content>
          <p>
            {{ session.description }}
          </p>
        </mat-card-content>
        <mat-card-actions>
          <button mat-raised-button color="primary" [routerLink]="['detail',session.id]">
            <mat-icon>search</mat-icon>
            <span class="ml1">Detail</span>
          </button>
          <button *ngIf="user!.admin" mat-raised-button color="primary"[routerLink]="['update',session.id]">
            <mat-icon>edit</mat-icon>
            <span class="ml1">Edit</span>
          </button>
        </mat-card-actions>
      </mat-card>
    </div>
  </mat-card>
</div>

The only differences I see are the routerlink :

• for the create it is routerLink="create"
• but for the detail there is some [] [routerLink]="['detail',session.id]

I want to know if there's another way to test the click Detail without modifying the html by adding an unique class like class='detailButton but just the test file ?

The routerLink attribute inside the list is a little funky because it also includes the session.id.

Whatever the value of session.id is, you would need to include it in the selector. Say it equals 123, then the selector would be

cy.get('.items .item button[ng-reflect-router-link="detail,123"]')

For experimentation purposes, go to the Angular sample webcontainer and on the app.component.html change the Heros link to [routerLink]="['detail',123]".

This is the HTML generated (inspecting in dev-tools):

<nav _ngcontent-ng-c1547112614="" class="ng-tns-c1547112614-0">
  <a
    _ngcontent-ng-c1547112614=""
    routerlink="/crisis-center"                 // this is a simple routerLink
    routerlinkactive="active"
    ariacurrentwhenactive="page"
    class="ng-tns-c1547112614-0"
    ng-reflect-router-link="/crisis-center"
    ng-reflect-router-link-active="active"
    ng-reflect-aria-current-when-active="page"
    href="/crisis-center"
    >Crisis Center</a>
  <a
    _ngcontent-ng-c1547112614=""
    routerlinkactive="active"
    ariacurrentwhenactive="page"
    class="ng-tns-c1547112614-0"
    ng-reflect-router-link-active="active"
    ng-reflect-aria-current-when-active="page"
    ng-reflect-router-link="detail,123"         // this is with session.id in link
    href="/detail/123"
    >Heroes</a>
</nav>

If you don't know the session.id value, try using a partial attribute selector. The ^= operator means "begins with":

cy.get('.items .item button[ng-reflect-router-link^="detail,"]')

or the *= operator, which means "contains"

cy.get('.items .item button[href*="detail"]')  // href is an alternative

Or try using the text inside the button

cy.contains('.items .item button', 'Detail')

Based on the html snippet provided, you have only 1 'Create' button but as many 'detail' button as sessions given you are iterating over your session list to render cards including this button.

So Cypress can't resolve cy.get('.items .item') the same way Javascript can't resolve accessing the property of an item of a list without firstly targetting the proper item:

const list = [{value: 'foo}];

// cannot work
console.log(list.value)

Depending on your strategy, you need to target the expected item with the Cypress API (eq, first, last...).