测试键盘可访问性:如何检查剧作家选择了什么?

Question

我有一个React PWA，我正在与剧作家进行测试。

我想确保我的PWA中的一切都可以只使用键盘完成，所以我想在剧作家写一些测试来验证这一点。

我使用keyboard.press输入键:

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

现在，我想验证当我按tab键时哪个元素被选中了。

因此，例如，假设我通过按Tab键三次来选择一个电子邮件字段，如下所示:

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

现在，我期望结果是我现在准备在电子邮件字段中键入一些内容。如何验证我选择了给定的元素?换句话说，我可以在剧作家中使用什么来"告诉我通过键盘选择的页面上元素的id"?

我一直在谷歌上搜索，但我不知道正确的术语。

Answer 1

如果你想验证元素是否被聚焦，你可以使用toBeFocused匹配器:

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