Mat-Select drop down not working with Cypress

Question

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

HTML Code which can be seen in browser console:

I already tried:

The actual HTML code looks like this:

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

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

Please add your version of the code that you tried along with any errors that you got. — Alapan Das, Aug 07 '21 at 14:28
@AlapanDas ,for the click on drop-down element, which I am using `[placeholder='Team Member']` in this case, never gives error. But on UI it never clicks — Pritam Patil, Aug 07 '21 at 16:46
How about you use `force: true` like `cy.get('[placeholder='Team Member']').first().click({force: true})` ? — Alapan Das, Aug 07 '21 at 16:59
How about changing the locator to `cy.get('mat-select[placeholder='Team Member']').eq(0).click()` — Alapan Das, Aug 07 '21 at 17:06
The error message indicates it can't find the option element. I would check the DOM (not the HTML source) to see if the selector you're using for the option is correct. — Sydney Y, Aug 07 '21 at 17:14
@SydneyY, 1. Click doesn't show error, but on UI click action is not seen. 2. What locator do you suggest to select the droop down items? — Pritam Patil, Aug 07 '21 at 17:20
Sorry, if I knew I'd write you an answer. In css the selector would be `mat-select .mat-select-value-text span` — Sydney Y, Aug 07 '21 at 17:42

Sam Scholefield · Answer 1 · 2021-08-23T17:45:07.767

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

score 1 · Answer 2 · answered Aug 23 '21 at 22:58

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

Mat-Select drop down not working with Cypress

2 Answers2