Cypress 如何测试 HTML5 内置的验证弹出窗口？

在HTML5中，表单验证是一个常用的功能，它可以在提交表单之前客户端验证数据，比如检查是否填写了必填字段，或者输入的数据是否符合格式要求。通常，如果验证失败，浏览器会显示一个提示框告诉用户需要修正的地方。但是，这些浏览器原生的弹出框并不是DOM元素，因此它们不能直接通过传统的DOM操作进行测试。

Cypress 作为一个前端自动化测试工具，在处理这类情况时有一些特殊的方法。下面是几个步骤和技巧，展示了如何使用 Cypress 来测试 HTML5 的内置表单验证：

1. 触发验证

首先，确保表单触发了 HTML5 验证。通常这可以通过尝试提交一个未满足验证条件的表单来实现。

例如，如果你有一个必须填写的输入框，可以尝试提交空白表单：

javascript
cy.get('form').within(() => {
  cy.get('input[type="submit"]').click();
});

2. 断言验证消息是否正确

由于不能直接选择或断言浏览器的验证弹窗，我们需要通过其他方式来确认验证是否触发。一种方法是检查输入字段的验证状态。

HTML5 添加了一些伪类如 :invalid，:valid，:required 等，这些可以在 Cypress 中使用来确认字段是否处于预期的验证状态：

javascript
cy.get('input:invalid').should('have.length', 1);

此外，也可以检查输入框是否具有特定的属性，例如 validationMessage 属性，它包含了当前的验证消息。

javascript
cy.get('input:required').then(($input) => {
  expect($input[0].validationMessage).to.contain('Please fill out this field');
});

3. 使用插件或自定义命令处理弹窗

尽管 Cypress 官方不直接支持操作这种原生弹窗，但社区中有一些插件和方法可以用来处理。例如，可以通过覆盖原生的 alert() 和 confirm() 函数来实现对弹出框的控制。

javascript
cy.on('window:alert', (text) => {
  expect(text).to.contains('Please fill out this field');
});

4. 更改表单行为以便于测试

如果以上方法不符合你的测试需求，可以通过修改HTML表单元素的行为来进行测试。例如，可以在表单提交事件中阻止默认行为，并手动检查每个字段的有效性，这样就可以在DOM中生成错误消息并用 Cypress 进行检测。

javascript
cy.get('form').submit((e) => {
  e.preventDefault();
  // 执行自定义验证逻辑
});

以上就是一些基本的方法来测试 HTML5 的内置验证功能。每种方法都有其适用的场景，需要根据具体的测试需求来选择使用。