如何用Playwright测试登录表单的必填输入框与原生提示？

针对你的必填email输入框，有两种可靠的测试方式，分别对应验证属性存在和触发原生验证提示：

1. 直接断言输入框的required属性 #

这是最基础的验证，确保输入框确实被标记为必填：

await expect(page.locator('#email')).toHaveAttribute('required');

2. 触发原生表单验证并断言提示内容 #

你之前用fill('')后按Enter没触发提示，大概率是因为Enter没有触发表单提交逻辑（比如输入框不在<form>标签内，或者页面未绑定Enter提交的事件）。推荐用以下两种方式触发验证：

方式一：点击提交按钮触发验证 #

假设页面有对应的提交按钮，直接模拟用户点击提交的行为：

// 清空email输入框
await page.locator('#email').fill('');
// 点击表单提交按钮（根据实际选择器调整，比如[type="submit"]）
await page.locator('form button[type="submit"]').click();
// 获取输入框的原生验证提示文本
const validationMsg = await page.locator('#email').evaluate(el => el.validationMessage);
// 断言提示内容匹配
expect(validationMsg).toBe('Please fill in this field.');

方式二：直接调用DOM的验证方法 #

如果不想依赖提交按钮，可以直接通过JS调用输入框的验证API：

// 清空输入框并触发验证，返回是否验证失败
const isInvalid = await page.locator('#email').evaluate(el => {
  el.value = '';
  return !el.checkValidity();
});
// 断言输入框验证失败（即必填项为空）
expect(isInvalid).toBe(true);

// 同时验证提示文本
const validationMsg = await page.locator('#email').evaluate(el => el.validationMessage);
expect(validationMsg).toBe('Please fill in this field.');

补充说明 #

原生表单验证的提示内容会存储在输入框DOM元素的validationMessage属性中，不需要去捕获弹窗元素——Playwright可以直接通过evaluate方法读取这个属性值。

内容的提问来源于stack exchange，提问作者J. Hesters