I have Mat-select dropdown as follows
<mat-form-field>
<mat-label>Gender</mat-label>
<mat-select id="gender" required formControlName="gender">
<mat-option id="Male" value="male"> Male </mat-option>
<mat-option value="female"> Female </mat-option>
</mat-select>
</mat-form-field>
I'm trying to use Cypress to select male or female from the field.
cy.get('mat-select').click().select('Male')
With the above code I get the following error:
CypressError: cy.select() can only be called on a <select>. Your subject is a: <mat-select>
I need some help in fixing this, thank you.
The code that worked for me.
cy.get('#gender').click().then(() => {
cy.get('#male').click()
})
打开 mat-select 的 mat-option 对话框并选择包含“Apple Inc.”的字段。
cy.get('mat-select[formControlName=companyName]').click().get('mat-option').contains('Apple Inc.').click();
Basically what I did was to simulate the Dropdown opening and then sumulate another click for item selection:
// simulate click event on the drop down cy.get('mat-select').first() .click(); // opens the drop down // simulate click event on the drop down item (mat-option) cy.get('.mat-option-text span') .contains('Your MatItem Text') .then(option => { option[0].click(); // this is jquery click() not cypress click() });
First, click on select for openning the overlay, then click on your option based on your option text content:
cy.get('mat-select[formcontrolname="departament"]').click();
cy.get('mat-option').contains('Lima').click();
My option text was Lima(+001) . When I queried
.contains('Lima')
I got 'AssertionError'. But when I query.contains('Lima')
or.contains('001')
element is found. It's seems to me that only supports alphanumeric (I didn't go in deep).
首先,选择打开叠加层,然后根据您的选项文本内容选择您的选项并使用should()
来验证是否选择了确切的选项:
cy.get('mat-select').select('Male').should('have.value','male');
Just for other people still strugling with this/similar issue, even after trying the solutions presented here.
Your problem might also be that you are using a within
block. Therefore mat-select
items cannot be reached after clicking on the mat-option
. So either take this part out of the within
block or use the {withinSubject:null}
option when getting the mat-select
item.
cy.get("mat-select[formControlName*='language']").click();
cy.get('mat-option', {withinSubject:null}).contains('English').click();
cy.get('div[class="cdk-overlay-container"]').then(($container) => {
if ($container.find("div[class='cdk-overlay-connected-position-bounding-box']").length > 0) {
cy.get("div[class='cdk-overlay-connected-position-bounding-box']").each(($el) => {
$el.remove();
});
}
if ($container.find("div[class^='cdk-overlay-backdrop']").length > 0) {
cy.get("div[class^='cdk-overlay-backdrop']").each(($el) => {
$el.remove();
});
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.