Javascript 如何选择CSS puppeter/Node.js中定义的图像名称？

如何选择CSS中定义的图像名称

我可以使用JavaScript选择该CSS图像类，但是如何在该类中获取图像名称呢？我想在puppeter/Node.js中实现这一点

如果下面给出的类中的图像与

paper.gif

匹配，我想单击下面给出的类

类别：

.height-20 span a {
   background-image: url("paper.gif");
   background-color: #cccccc;
}

选择器：

let elements = document.querySelectorAll('.height-20 span a'); // Select all Products but how to get image inside this selector?

点击器：

 await page.click(".height-20 span a");

我想要实现的目标如下：

if(css image == paper.gif) {
await page.click(".height-20 span a");
}

您可以将从中获得的转换为节点数组，然后可以通过包含等于

'paper.gif'

的元素筛选该数组：

const elements = [...document.querySelectorAll('.height-20 span a')].filter(e => {
  const background_image = window.getComputedStyle(e).backgroundImage.split('/').pop().replace(/[")]/g, '');
  return background_image === 'paper.gif';
});

此实现可以放在内部，如果存在与给定条件匹配的元素，则可以从该页面DOM范围中删除该元素：

await page.evaluate(() => {
  const elements = [...document.querySelectorAll('.height-20 span a')].filter(e => {
    const background_image = window.getComputedStyle(e).backgroundImage.split('/').pop().replace(/[")]/g, '');
    return background_image === 'paper.gif';
  });

  if (elements.length) {
    elements[0].click();
  }
});

---

@格兰特·米勒是对的，+1。我只是想在TypeScript中提供一个简单的

getStyleFromElement

：

导出异步函数getStyleFromElement（page:page，elementHandle:elementHandle，cssprroperty:string）：承诺{
//page.evaluate从浏览器上下文中计算给定函数
//因此，elementHandle和cssProperty在函数范围内不可用。
//这就是我们传递它的原因。木偶师会自动转换elementHandle
//但是，请输入正确的DOM元素
返回页面。评估（（元素，属性）=>
getComputedStyle（元素）.getPropertyValue（属性），elementHandle，cssProperty）；
}

现在，您可以通过调用以下命令来获取背景图像：

getStyleFromElement（页面，元素，“背景图像”）

另外，如果您想从

URL（…）

构造内部提取URL，请执行以下操作：

导出函数getUrlFromBackgroundImage（backgroundImage:string）：string | null{
如果（！backgroundImage）返回空值；
const match=backgroundImage.match（/url\（“（.*”）/）；
如果（匹配）{
返回匹配[1]；
}
返回null；
}

谢谢，我会尽力，然后再给你回复。如果答案对我有效，我将接受。我尝试了您的代码，但收到一个未处理的错误（节点：6571）PromisejectionWarning:ReferenceError:未定义文档。因此，我在@SayedMohdAli上查看了它。听起来您可能试图初始化

元素

，而不将其放在

页面。evaluate（）

。页面DOM环境包含

文档

对象，但Node.js环境不包含。好的，兄弟，我会在我的代码中再次检查它，如果工作正常，我会给你评分。感谢您的时间，我现在收到任何错误，NodeJS也在工作，但点击根本不工作。背景图片的链接有什么关系吗？返回背景图片==''；