0
213
ViewsMat-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:
I already tried:
- Using Cypress drop down select values are not happening
- Selecting options from Mat-select using cypress
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 -
2 answers
Answer question0
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
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')