我正在尝试测试无效输入是否会警告用户。该输入的 html“类型”是“电子邮件”,因此浏览器实际上显示了这个气泡,而不是我们在网站上公开的元素。
据我所知,这个有问题的气泡是特定于浏览器的,而且据我所知它没有出现在 DOM 中。另外,我不能在上面使用“选择元素”光标工具,它会忽略那个气泡,就好像它不存在一样。如果有帮助,它是由输入表单触发的特定于浏览器的事件。
有没有办法使用赛普拉斯断言来确认此警报是否存在?
我正在尝试测试无效输入是否会警告用户。该输入的 html“类型”是“电子邮件”,因此浏览器实际上显示了这个气泡,而不是我们在网站上公开的元素。
据我所知,这个有问题的气泡是特定于浏览器的,而且据我所知它没有出现在 DOM 中。另外,我不能在上面使用“选择元素”光标工具,它会忽略那个气泡,就好像它不存在一样。如果有帮助,它是由输入表单触发的特定于浏览器的事件。
有没有办法使用赛普拉斯断言来确认此警报是否存在?
好的,找到了可行的解决方案。如果有人有更好的解决方案,请随时发布。
由于 HTML 表单验证警报气泡文本是特定于浏览器的,因此测试气泡中的特定内容可能不是一个好主意。相反,我们可以测试表单是否触发了无效事件并为input
表单提供了:invalid
伪类,并且浏览器阻止了表单提交。
无论浏览器如何,这两件事都会发生。在 DOM 中检测这种行为的最简单方法是从选择input
到断言input:invalid
存在并且登录没有发生。
作为记录,我在这里找到了一个很好的例子
<form id="form-validation" action="/action_page.php">
<div>
<label for="item">Item:</label>
<input id="item" type="text" name="item" required />
</div>
cy.get('#item:invalid')
.invoke('prop', 'validationMessage')
.should('equal', 'Please fill out this field.')
如cypress docs中所述,您可以像这样进行验证:
cy.get('username-selector').then(($input) => {
expect($input[0].validationMessage).to.include(
`Please include an '@' in your email address.`
)
})