如何使用Playwright查找网页中的::after伪元素？

伪元素（如::after）不属于DOM节点，无法通过Playwright的常规元素定位方法直接选中，必须借助JavaScript来获取它的相关信息，以下是具体实现方式：

获取::after的内容（content属性） #

通过page.evaluate()执行浏览器端JS，利用window.getComputedStyle获取目标元素伪元素的样式值：

// 替换为你页面中目标元素的选择器，比如对应的a标签选择器
const afterContent = await page.evaluate(() => {
  const targetElement = document.querySelector('a.your-target-selector');
  return window.getComputedStyle(targetElement, '::after').getPropertyValue('content');
});
console.log('::after的内容:', afterContent);

获取::after的其他样式属性 #

如果需要获取宽、高、颜色等其他样式，同样用getComputedStyle提取：

const afterStyleDetails = await page.evaluate(() => {
  const targetElement = document.querySelector('a.your-target-selector');
  const pseudoStyle = window.getComputedStyle(targetElement, '::after');
  return {
    content: pseudoStyle.getPropertyValue('content'),
    width: pseudoStyle.getPropertyValue('width'),
    backgroundColor: pseudoStyle.getPropertyValue('background-color'),
    fontSize: pseudoStyle.getPropertyValue('font-size')
  };
});
console.log('::after的详细样式:', afterStyleDetails);

注意：将代码中的a.your-target-selector替换为你实际页面中对应元素的有效CSS选择器（比如元素的类名、ID或其他定位标识）。

内容的提问来源于stack exchange，提问作者Tal Angel