La experiencia nos ha enseñado que siempre es mejor identificar explícitamente cualquier elemento que desee probar con Cypress, y esto es especialmente cierto para los componentes de material angular.

Para probar nuestras selecciones de alfombras, usaríamos algo como:

HTML

 <mat-form-field appearance="outline"> <mat-label>{{ 'common.team-member' | translate }}</mat-label> <mat-select id="e2e-team-member-select" formControlName="teamMember" multiple> <mat-option *ngFor="let member of teamMembers; let i = index" [value]="member.id" [id]="'e2e-team-member-' + i" > {{ member.name }} </mat-option> </mat-select> </mat-form-field>

../cypress/integrations/showing.ts

 // set team-member 4 cy.get('#e2e-team-member-select').click(); cy.get('#e2e-team-member-4').click(); cy.wait('@loadMembers'); // wait for backend cy.get('body').click(); // close select if multi

Por lo que puedo ver, Angular en realidad no está usando un atributo de placeholder de posición para mostrar el texto que desea.

En su lugar, utiliza una label colocada sobre la posición select with css position: absolute .

Página de ejemplo de selección angular

Este es el grupo de elementos (simplificado) - mat-select y label son hermanos.

 <div class="mat-form-field-infix"> <mat-select role="combobox" class="mat-select"> <div cdk-overlay-origin="" class="mat-select-trigger"> <div class="mat-select-value"> <span class="mat-select-placeholder"></span> </div> <div class="mat-select-arrow-wrapper"> <div class="mat-select-arrow"></div> </div> </div> </mat-select> <span class="mat-form-field-label-wrapper"> <label class="mat-form-field-label"> <mat-label>Favorite food</mat-label> </label> </span> </div>

Desea probar el contenido de texto de mat-select , pero apunte a través del texto de la etiqueta.

 cy.viewport(1200, 1000) cy.visit('https://material.angular.io/components/select/overview') cy.contains('span', 'Favorite food') .siblings('mat-select') .invoke('text') .should('be.empty') // open the select cy.contains('span', 'Favorite food') .siblings('mat-select') .click() // choose option cy.contains('mat-option', 'Tacos').click() // check the select text has option value cy.contains('span', 'Favorite food') .siblings('mat-select') .should('contain', 'Tacos')

tu selección

 cy.contains('span', 'Team Member') .siblings('mat-select') .click() cy.contains('mat-option', 'Stage E2E').click() cy.contains('span', 'Team Member') .siblings('mat-select') .should('contain', 'Stage E2E')