如何用JavaScript与Cypress自动化验证必填字段的JS弹窗提示

你遇到的是浏览器原生的HTML5表单验证提示，这类提示不是自定义弹窗，不能用Cypress常规的弹窗断言（比如cy.on('window:alert')），需要通过DOM元素的原生属性来验证。以下是具体实现方案：

核心思路 #

HTML5必填字段的验证提示会存储在对应表单元素的validationMessage属性中，同时可以通过validity.valueMissing判断是否是因为未填写必填项触发的验证。

测试代码示例 #

describe('表单必填字段验证', () => {
  it('未填写必填字段按回车时显示原生提示', () => {
    // 替换为你的表单页面URL
    cy.visit('/path-to-your-form');

    // 定位到目标必填字段（根据实际DOM结构调整选择器，比如input#username[required]）
    const requiredInput = cy.get('input[required]').first();

    // 聚焦字段并按下回车键触发表单提交
    requiredInput.focus().type('{enter}');

    // 断言原生验证提示文本
    requiredInput.invoke('prop', 'validationMessage')
      .should('equal', 'Please fill out this field');

    // 可选：验证是因为未填写必填项触发的验证
    requiredInput.invoke('prop', 'validity')
      .its('valueMissing')
      .should('be.true');
  });
});

注意事项 #

• 如果页面有多个必填字段，建议单独定位目标字段（比如通过id或name属性），避免断言错误
• 确保表单没有添加novalidate属性，否则会禁用HTML5原生验证
• 若表单有自定义提交逻辑，要确保原生验证流程未被完全覆盖

内容的提问来源于stack exchange，提问作者Abhishek Kumar