测试键盘可访问性：如何检查使用 Playwright 选择的内容？

Question

我有一个正在与 Playwright 一起测试的 React PWA。

我想确保我的 PWA 中的所有内容都可以只使用键盘完成，所以我想在 Playwright 中编写一些测试来验证这一点。

我用keyboard.press输入键：

await this.page.keyboard.press('Tab');

现在，我想验证当我按下 Tab 键时 select 编辑了哪个元素。

因此，例如，假设我按 Tab 键三次 select 一个电子邮件字段，如下所示：

await this.page.keyboard.press('Tab');
await this.page.keyboard.press('Tab');
await this.page.keyboard.press('Tab');

现在，我希望结果是我现在已准备好在电子邮件字段中键入内容。我如何验证我已经 selected 给定元素？换句话说，我可以在 Playwright 中使用什么来表示“告诉我页面上已通过键盘 select 编辑的元素的 ID？”

我一直在尝试 Google 这个，但我不知道正确的术语。

Answer 1

如果要验证元素是否获得焦点，可以使用 toBeFocused 匹配器：

await page.keyboard.press('Tab');
await page.keyboard.press('Tab');
await page.keyboard.press('Tab');

await expect(page.locator('#email')).toBeFocused();

测试键盘可访问性：如何检查使用 Playwright 选择的内容？

Testing keyboard accessibility: how to check what is selected with Playwright?

playwright