Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

1.4K
Vistas
Mat-Select drop down not working with Cypress

Trying to click on the drop down which is mat-select from Angular.

HTML Code which can be seen in browser console:

enter image description here

I already tried:

  1. Using Cypress drop down select values are not happening
  2. Selecting options from Mat-select using cypress

The actual HTML code looks like this:

enter image description here

Following the screenshot of Drop down item I want to select (Stage E2E)

enter image description here

Note: there is not error thrown for click, but on UI I never see the click and later it get following error -

enter image description here

over 4 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

Experience has taught us that it is always better to explicitly ID any elements you want to test with Cypress, and this is especially true for Angular Material components.

In order to test our mat-selects we would use something like:

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
over 4 years ago · Santiago Trujillo Denunciar

0

From what I can see, Angular is not actually using a placeholder attribute to show the text you want.

Instead it uses a label positioned over the select with css position: absolute.

Angular select example page

This is the group of elements (simplified) - mat-select and label are siblings.

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

You want to test the text content of the mat-select, but target it via the label text.

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')

Your select

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')
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda