Question

我正在尝试使用赛普拉斯在我的应用中测试幻灯片切换的状态。

这些超时并未通过测试：

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')

唯一的区别是切换的状态已经改变。

有人可以帮助解释为什么＆＃34; not.checked＆＃34;测试通过，但其他人没有？

Answer 1

我打算邀请您使用GUI snapshots panel来更好地了解可能出现的问题，也许increase the timeout(s)。

但实际上，我很想得出结论：<label>和<div>都无法检查。 <input type="checkbox">可以。

您的标签上是否还有其他属性？

Answer 2

我设法为每个切换找到一个元素，允许我检查状态（选中或未选中）。

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

我需要做的就是将数字更改为与测试中的切换相关。我可以检查是否检查了切换，按下主开关，然后检查它是否未选中。我还将创建一个测试，我会单独测试每个切换以确保切换在地面和单个地方工作。

Answer 3

documentation指出：

<mat-slide-toggle>使用内部<input type="checkbox"> 提供无障碍的体验。此内部复选框获得焦点，并自动由的文本内容标记 <mat-slide-toggle>元素。

当Angular Material添加开关时，它将在外部<mat-slide-toggle>元素下添加整个元素的整个层次结构；带有mat-slide-toggle-label，mat-slide-toggle-bar等类的div。但是它还会添加一个真实的（但隐藏的）<input>元素。

“已检查”测试仅适用于输入元素（这可能就是您的should('not.be.checked')测试正常工作的原因-因为无法对非输入元素进行从不检查。因此，使用赛普拉斯的should('be.checked')测试中，您需要告诉赛普拉斯获得对<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)

检查滑动切换的状态在赛普拉斯测试中不起作用

3 个答案: