Cypress e2e test с Angular Material mat-select не может установить значение выбора

Я пытаюсь установить значение mat-option с помощью теста Cypress в Angular 9. Я пробовал все следующие обходные пути, но ни один из них не работает. Я использую Angular Material и компонент mat-select с динамическими параметрами ngFor mat. Селектор работает нормально, но я не могу установить его или заставить щелчок правильно работать на 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();

or

cy.get('mat-select').first().click({ force: true }).get('mat-option').contains(yearValue.toString()).click()

or

cy.get('mat-select[formcontrolname="beginYear"]').first().click().get('mat-option').contains(yearValue.toString()).click();

or 

cy.get('mat-select[formcontrolname="beginYear"]').then(() => {
      cy.get('mat-option').contains(endYear.toString()).click();
      })

or 

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 не может быть найден. В большинстве случаев всплывающее окно выбора мата даже не появлялось после события щелчка. Я также попытался добавить вызовы ожидания, чтобы узнать, была ли это проблема с асинхронностью, но произошло то же самое. Любая помощь будет принята с благодарностью. Ниже я приложил несколько ссылок, которые я тоже пробовал. Я смущен, почему всплывающее окно не появляется последовательно из mat-select при событии щелчка, и если оно появляется, оно не может найти никаких вариантов.

ССЫЛКИ: Сделайте выделение с помощью кипариса в Angular, если вы вы используете материальные формы выберите элемент раскрывающегося списка с помощью кипариса Как выбрать вариант с Angular Material 2 и Protractor? Cypress: проверьте, не существует ли элемент


javascript angular angular9 cypress angular-material2
person user2385520    schedule 09.05.2020    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Я думаю, вам нужно передать '#' перед mat-select, чтобы правильно выбрать его по идентификатору. Каждый mat-select похож на ввод, поэтому в большинстве случаев это будет что-то вроде «mat-select-1», «mat-select-2» ... и так далее. Я заставил это работать, сначала щелкнув свой коврик-выбор, чем щелкнув опцию из этого выбора.

cy.get('#mat-select-1').click()
cy.get('#mat-option-2').click()

Хотя я просто не заставил его работать с select () из кипариса, это было обходным путем.

person rafael    schedule 14.05.2020

arrow_upward
0
arrow_downward

Попробуй это:

cy.get ('mat-select [data-cy = beginYear-select]'). contains (yearValue.toString ()). click ();

Если не работает, попробуйте удалить - в идентификаторе: beginYearSelect

person rgvigueras    schedule 17.11.2020

arrow_upward
0
arrow_downward

Была аналогичная проблема, и мне пришлось ее обойти следующим образом:

cy.get('[data-cy=beginYear-select]')
  .click()
  .get('mat-option')
  .contains('2021')
  .click();
cy.get('body').click();
person Muck    schedule 05.02.2021