Проверка состояния переключателя слайдов не работает в Cypress Tests

Question

Я пытаюсь проверить состояние слайд-тумблеров в моем приложении с помощью Cypress.

Это время ожидания и не проходит тест:

cy.get('label.mat-slide-toggle-label').eq(2).should('be.checked')
 or
cy.get('div.mat-slide-toggle-bar').eq(2).should('be.checked')

Где как эти проходят

cy.get('label.mat-slide-toggle-label').eq(2).should('not.checked')
 or
cy.get('div.mat-slide-toggle-bar').eq(2).should('not.checked')

Разница лишь в том, что состояние переключателя изменилось.

Может кто-нибудь помочь объяснить, почему проходят тесты not.checked, а другие нет?

Answer 1

В документации говорится:

<mat-slide-toggle> использует внутренний <input type="checkbox"> обеспечить доступный опыт. Этот внутренний флажок получает фокус и автоматически помечается текстовым содержимым <mat-slide-toggle> элемент.

Когда Angular Material добавляет переключатель, он добавляет целую небольшую иерархию элементов под внешним <mat-slide-toggle> элемент; div с такими классами, как mat-slide-toggle-label, mat-slide-toggle-barи т. д. Но это также добавляет реальное (но скрытое) <input> элемент.

"Проверенный" тест применяется только к элементам ввода (возможно, поэтому ваш should('not.be.checked') тесты работают - потому что не входные элементы никогда не могут быть проверены. Итак, использовать Cypress's should('be.checked') тест, вы должны сказать Cypress, чтобы получить ссылку на фактический <input> содержится в <mat-slide-toggle>и не один из других mat-xxx элементы.

Пример:

cy.get('mat-slide-toggle#whateverId input').should('be.checked');
  // get reference to the single <input> inside the <mat-slide-toggle>

или же:

cy.get('mat-slide-toggle#whateverId .mat-slide-toggle-input').should('be.checked');
  // get reference to the element with class "mat-slide-toggle-input" inside the <mat-slide-toggle> (which is the <input> itself)

Answer 2

Я собирался пригласить вас использовать панель снимков графического интерфейса, чтобы лучше понять, что может быть не так, и, возможно, увеличить время ожидания.

Но на самом деле, я склонен заключить, что ни <label> ни <div> можно проверить. <input type="checkbox"> Можно.

Есть ли другое свойство, которое вы можете заявить на вашем лейбле?

Answer 3

Мне удалось найти элемент для каждого переключателя, который позволяет мне проверить состояние (проверено или не проверено).

input#mat-slide-toggle-29-input.mat-slide-toggle-input.cdk-visually-hidden

Все, что мне нужно сделать, это изменить номер на связанный с тестируемым переключателем. Я могу проверить, что тумблер проверен, нажать главный выключатель и затем проверить, что он не проверен. Я также создаю тест, в котором я проверяю каждый тумблер по отдельности, чтобы убедиться, что тумблер работает в земле и по отдельности.