javascript - 检查 Slide toggle 的状态在 Cypress 测试中不起作用

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

documentation 状态:

The <mat-slide-toggle> uses an internal <input type="checkbox"> to provide an accessible experience. This internal checkbox receives focus and is automatically labelled by the text content of the <mat-slide-toggle> element.

当 Angular Material 添加开关时，它会在外部 <mat-slide-toggle> 元素下添加一个完整的元素层次结构；具有 mat-slide-toggle-label 、 mat-slide-toggle-bar 等类的 div。但它也添加了一个真实的(但隐藏的)<input> 元素。

“已检查”测试仅适用于输入元素(这可能是您的 should('not.be.checked') 测试有效的原因——因为非输入元素永远无法被检查。因此，要使用 Cypress 的 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)