赛普拉斯 - 测试提交无效输入时是否存在特定于浏览器的警报

Question

我正在尝试测试无效输入是否会警告用户。 html 该输入的“类型”是“电子邮件”，因此浏览器实际上会显示此气泡而不是我们在网站上公开的元素。

据我所知，这个有问题的气泡是特定于浏览器的，据我所知，它没有出现在 DOM 中。此外，我无法在其上使用“select 一个元素”光标工具，它会忽略该气泡，就好像它不存在一样。如果有帮助，这是由输入表单触发的特定于浏览器的事件。

有没有办法使用 Cypress 断言确认此警报存在？

Answer 1

好的，找到了可行的解决方案。如果有人有更好的解决方案，请随时 post.

由于 HTML 表单验证警报气泡文本是特定于浏览器的，因此测试气泡中的特定内容可能不是一个好主意。相反，我们可以测试该表单触发了一个无效事件并为 input 表单提供了 :invalid pseudo-class，并且浏览器阻止了该表单的提交。

无论浏览器如何，这两种情况都会发生。在 DOM 中检测此行为的最简单方法是从选择 input 到断言 input:invalid 存在并且未发生登录。

Answer 2

如 cypress docs 中所述，您可以这样进行验证：

cy.get('username-selector').then(($input) => {
  expect($input[0].validationMessage).to.include(
    `Please include an '@' in your email address.`
  )
})

Answer 3

郑重声明，我在这里找到了一个很好的例子

Cypress examples (v9.4.1) - Form validation

<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 - Testing that a browser-specific alert exists when submitting invalid input

javascript

user-input

e2e-testing

cypress

e2e