如何断言HTML元素在剧作家中是有效的链接？

Question

我正在尝试在＆lt; a＆gt; 的列表中，所有这些都有属性 href 。但是，我不知道如何通过剧作家的功能实现这一目标。

我的代码在这里：

test.only('then a list of 44 links is displayed', async({ page }) => {
         const linkList = await page.locator('div#content > ul > li > a');
         for(let i = 0; i < await linkList.count(); i++) {
             expect(await linkList.nth(i)).toHaveAttribute('href', '');             }
         await expect(linkList).toHaveCount(44);
    })

tohaveatTribute（）函数需要2到3个参数，因为它获取了密钥属性和属性的值，但是我只需要检查它是否具有HREF attr。

我该如何实现？

这是正在测试的网站： https://the-internet.herokuapp.com/

Answer 1

尝试一些选项后，我意识到我可以断言是否使用locator.getAttribute（'href'）不会返回null，所以这是一个链接。
所以我实施了：

const linkList = await page.locator('div#content > ul > li > a');
for(let i = 0; i < await linkList.count(); i++) {
    expect(await linkList.nth(i).getAttribute('href')).not.toBeNull();
}

Answer 2

感觉剧作家并不是最好的工具！如果链接在您的版本控件中，或者确保数据库查询只能以有效的HREF开始，则可以更好地完成索引。

比任何浏览器测试都要快得多，可以使事情保持动态，因此在添加或删除链接时，您不必修改测试。

---

但是，如果您想与剧作家一起做，而代码少于其他建议， and 以生成良好的习惯，以实现出色的可访问性测试，则可以使用 .getByrole < /代码>选择器。

带有HREF的锚元素具有“链接”角色，而没有它们是“通用”：

“ nofollow noreferrer”> https://www.w3.org/tr/html-aria/#docconformance

使用 byrole 定位器有助于确保您在语义上正确＆amp;可访问元素：

https://playwright.dev/dev/docs/docs/locators.locators.locators#locate-byby-rocati

在这种情况下，实际上具有HREF的锚标签！

因此，您可以做类似的事情：

await expect(page.getByRole('link')).toHaveCount(44);

您可能会链接另一个定位器，而不是查询整个页面，因此您只能在您感兴趣的部分中查询。