Playwright自动化测试：无法捕获未在DOM中显示的错误提示文本

你遇到的是HTML5原生表单验证弹窗，这类提示属于浏览器层面的元素，不会出现在页面DOM结构中，得用Playwright专门的API来处理。

以下是具体实现方案：

• 方法一：通过获取表单元素的validationMessage属性
  直接定位到触发验证的必填表单元素，读取它的原生验证提示文本：

  // 以Name输入框为例
  const nameInput = page.locator('#name');
  await page.locator('#submitbtn').click();
  const validationText = await nameInput.evaluate(el => el.validationMessage);
  // 验证提示文本
  expect(validationText).toBe('Please fill out this field.');
  

• 方法二：使用Playwright的waitForEvent监听对话框
  原生表单验证的弹窗属于浏览器对话框的一种，可通过监听dialog事件捕获：

  page.on('dialog', async dialog => {
    // 验证对话框类型和文本
    expect(dialog.type()).toBe('alert');
    expect(dialog.message()).toBe('Please fill out this field.');
    await dialog.accept();
  });
  await page.locator('#submitbtn').click();
  

注意：不同浏览器的原生验证提示文本可能略有差异，测试时要对应目标浏览器的实际提示内容。

内容的提问来源于stack exchange，提问作者Deepak Sporty