Я пытаюсь установить значение mat-option с помощью теста Cypress в Angular 9. Я пробовал все следующие обходные пути ниже, и ни один из них не работал. Я использую Angular Материал и компонент выбора матов с динамическими c ngFor mat-options. Селектор работает нормально, но я не могу установить его или заставить щелчок правильно работать на mat-select.
Пример выбора мата Я использую
<div fxLayout="row" fxLayoutAlign="space-between">
<mat-form-field>
<mat-label>Begin Year</mat-label>
<mat-select formControlName="beginYear" data-cy="beginYear-select">
<mat-option *ngFor="let year of beginYearOptions" [value]="year">
{{ year }}
</mat-option>
</mat-select>
</mat-form-field>
неудачные попытки получить набор кликов
cy.get('[data-cy=beginYear-select]').contains(yearValue.toString()).click();
или
cy.get('mat-select').first().click({ force: true }).get('mat-option').contains(yearValue.toString()).click()
или
cy.get('mat-select[formcontrolname="beginYear"]').first().click().get('mat-option').contains(yearValue.toString()).click();
или
cy.get('mat-select[formcontrolname="beginYear"]').then(() => {
cy.get('mat-option').contains(endYear.toString()).click();
})
или
Cypress.Commands.add('selectMaterialDropDown', (formControlName, selectOption) => {
cy.get(`[formcontrolname="${formControlName}"]`).click().then(() => {
cy.get(`.cdk-overlay-container .mat-select-panel .mat-option-text`).should('contain', selectOption);
console.log('PASSED!!!')
cy.get(`.cdk-overlay-container .mat-select-panel .mat-option-text:contains("${selectOption}")`).first().click().then(() => {
// After click, mat-select should contain the text of the selected option
cy.get(`[formcontrolname="${formControlName}"]`).contains(selectOption);
});
});
});
Ни один из них не работал и в основном вызывал ошибку, говоря, что mat-option не может быть найден. В большинстве случаев всплывающее окно выбора мата даже не появлялось после события щелчка. Я также попытался добавить вызовы ожидания, чтобы узнать, была ли это проблема asyn c, но произошло то же самое. Любая помощь будет принята с благодарностью. Ниже я приложил несколько ссылок, которые я тоже пробовал. Я смущен, почему всплывающее окно не появляется последовательно из mat-select в событии щелчка, и если оно появляется, оно не может найти никаких вариантов.
ССЫЛКИ: Сделать выбор с помощью кипариса в Angular если вы используете материальные формы выбрать элемент раскрывающегося списка с помощью кипариса Как выбрать вариант с помощью Angular Материал 2 и транспортир? Кипарис: проверить, не существует ли элемента