如何使用Playwright正确测试Web应用的meta标签

测试代码存在两个核心问题，直接导致执行异常：

• CSS选择器语法错误：编写的选择器meta [name="description"]在meta和属性选择器之间多了一个空格，在CSS规则里空格代表后代选择器，语义是查找<meta>标签内部、携带name="description"属性的子元素。但<meta>是HTML自闭合空标签，不存在内部子元素，所以选择器永远无法命中目标节点，测试程序会一直等待元素出现。
• 断言逻辑错误：toHaveText()方法校验的是元素开闭标签之间的文本节点内容，而meta标签的描述值存放在自身的content属性中，标签本身没有内部文本，就算匹配到元素也只会读取到空字符串。

修正选择器和断言逻辑即可，参考代码如下：

test("Meta data", async ({ page }) => {
  await page.goto(env.baseUrl)
  // 去掉选择器中多余的空格，直接匹配携带name="description"属性的meta标签
  const metaDescription = page.locator('meta[name="description"]')
  // 直接校验元素的content属性值是否符合预期
  await expect(metaDescription).toHaveAttribute("content", "something")
})

补充说明：Playwright默认可以匹配到<head>标签内的元素，不需要额外切换上下文，上述写法自带自动等待机制，会等meta标签渲染完成后再执行断言，适配SSR、CSR等不同渲染模式的页面。

内容的提问来源于stack exchange，提问作者Dara Balla