Cypress: Как правильно закрыть коврик-коврик

Question

Поэтому я использую Cypress для тестирования нашего Angular приложения, но по какой-то причине у меня всегда возникает проблема с закрытием компонентов mat-select, которые являются мультиселектными. У кого-нибудь есть хорошее решение для этого?

function selectValue(id: string, value: string) {
    return cy.get(`mat-select[id="${id}"]`)
             .click()
             .then(() => 
                cy.get('mat-option')
                  .contains(value)
                  .click();
}

Answer 1

Я предлагаю что-то вроде этого:

Cypress.Commands.add('selectValue', (value) => {
  cy
      .get('mat-select').first().click()
      .get('.mat-option-text').contains(value).click()
      .get('.mat-option-text').should('not.visible')
      .get('.mat-select-value-text').first().should(([{ innerText }]) => {
        expect(innerText).equal(value)
      })
});

Я протестировал его на https://material.angular.io/components/select/overview, и он работает на моей локальной машине.

Если что-то не получается, почувствуйте свободно задавать вопросы