如何在Playwright中断言<a>元素为带href属性的有效链接？

问题描述 #

编写Playwright端到端测试时，需要校验页面内一组<a>链接元素全部包含href属性，测试目标站点为https://the-internet.herokuapp.com/。
初始测试代码如下：

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个参数，必须指定属性名和对应的属性匹配值，无法直接实现“仅校验属性存在”的逻辑。

实现方法 #

最优方案：利用CSS属性选择器一步完成校验 #

不需要循环遍历单个元素，直接在定位器阶段通过CSS原生的属性选择器筛选带href属性的a标签，再断言数量即可，执行效率更高：

test.only('then a list of 44 links is displayed', async({ page }) => {
  // 选择器末尾加[href]，仅匹配存在href属性的a元素
  const validLinkList = page.locator('div#content > ul > li > a[href]');
  // 断言符合条件的元素总数为44，即所有目标链接都包含href属性
  await expect(validLinkList).toHaveCount(44);
})

CSS选择器语法中，[属性名]的作用就是匹配带有指定属性的元素，不限制属性的具体值，完全匹配当前校验需求。

兼容方案：遍历元素时用正则匹配任意属性值 #

如果业务逻辑需要逐个校验元素的其他属性，保留遍历逻辑的话，可以给toHaveAttribute传入正则表达式匹配任意非空属性值，实现属性存在性校验：

test.only('then a list of 44 links is displayed', async({ page }) => {
  const linkList = page.locator('div#content > ul > li > a');
  await expect(linkList).toHaveCount(44);
  const total = await linkList.count();
  for(let i = 0; i < total; i++) {
    // 传入正则/.+/匹配任意非空的href属性值，等价于校验href属性存在
    await expect(linkList.nth(i)).toHaveAttribute('href', /.+/);
  }
})

注意：原代码循环内的expect断言漏写了await，会导致断言异步执行不生效，使用时必须补上。

内容的提问来源于stack exchange，提问作者Marcos Vinícius Franco