如何测试HTMLDialogElement（dialog元素）的打开与关闭状态？

HTML5的<dialog>元素通过open布尔属性控制状态：存在该属性则对话框打开，缺失则关闭。在Playwright中可以通过属性断言和可见性验证两种核心方式完成测试，以下是具体实现方案：

1. 直接断言open属性的存在/缺失 #

这是最贴合原生状态的验证方式，直接针对<dialog>的核心控制属性：

验证对话框打开状态 #

// 定位页面中的dialog元素
const dialog = page.locator('dialog');
// 断言元素存在open属性（布尔属性值可为空字符串或属性名本身）
await expect(dialog).toHaveAttribute('open');
// 更精确的断言（适配不同浏览器的属性值渲染）
await expect(dialog).toHaveAttribute('open', '');
await expect(dialog).toHaveAttribute('open', 'open');

验证对话框关闭状态 #

const dialog = page.locator('dialog');
// 断言元素不存在open属性
await expect(dialog).not.toHaveAttribute('open');

2. 结合可见性辅助验证 #

<dialog>默认状态下，打开时可见、关闭时隐藏，可通过可见性断言作为补充验证：

打开状态的可见性断言 #

const dialog = page.locator('dialog');
await expect(dialog).toBeVisible();

关闭状态的可见性断言 #

const dialog = page.locator('dialog');
await expect(dialog).toBeHidden();

完整测试示例（JavaScript） #

test('dialog元素打开/关闭状态测试', async ({ page }) => {
  await page.goto('目标页面URL');

  // 触发打开对话框的操作（示例：点击打开按钮）
  await page.getByRole('button', { name: '打开对话框' }).click();
  const dialog = page.locator('dialog');
  // 验证打开状态
  await expect(dialog).toHaveAttribute('open');
  await expect(dialog).toBeVisible();

  // 触发关闭对话框的操作（示例：点击关闭按钮）
  await page.getByRole('button', { name: '关闭对话框' }).click();
  // 验证关闭状态
  await expect(dialog).not.toHaveAttribute('open');
  await expect(dialog).toBeHidden();
});

注意事项 #

• 优先使用open属性断言：这是最准确的原生状态验证方式，不受自定义CSS样式影响；
• 可见性断言仅作为补充：若对话框通过CSS强制显示/隐藏（而非原生open属性），需调整断言逻辑；
• 模态对话框兼容：通过showModal()打开的模态对话框，Playwright会自动处理交互逻辑，无需额外配置。

内容的提问来源于stack exchange，提问作者Ostap Brehin