在 puppeteer 中通过它的 css 选择器选择一个元素

Question

我正在尝试使用其样式选择器来选择图像元素。我用 Python 编写了这行代码，但在将其转换为 JavaScript 时遇到了问题。到目前为止，这是我的尝试。请注意 python 代码有效。这是我遇到问题的js。

if driver.find_element_by_css_selector("img[style='object-fit: cover;']") is not None:
        download_url = driver.find_element_by_css_selector("img[style='object-fit: cover;']").get_attribute('src')

这是我的 js 尝试。

let imageArr = []

for(let post of posts) {
    await page.goto(post)
    await page.waitForTimeout(6000)

    if (await page.type("img[style='object-fit: cover;']") !== null) {

        const image = await page.evaluate(() => {
            document.querySelectorAll("img[style='object-fit: cover;']").forEach(img => {
                let imageUrl = img.getAttribute('src');
                imageArr.push(imageUrl)
            })
        })
    }
}

Answer 1

我认为你需要使用* CSS 属性选择器，来自MDN：

[attr*=value] - 表示属性名称为 attr 的元素，其值包含字符串中至少出现一次的值。

所以对于您的 Javascript 代码，我相信这会起作用：

let imageArr = []

for(let post of posts) {
    await page.goto(post)
    await page.waitForTimeout(6000)

    if (await page.type("img[style*='object-fit: cover;']") !== null) {

        const image = await page.evaluate(() => {
            document.querySelectorAll("img[style*='object-fit: cover;']").forEach(img => {
                let imageUrl = img.getAttribute('src');
                imageArr.push(imageUrl)
            })
        })
    }
}

这将选择字符串中至少出现一次object-fit: cover; 的所有img 元素。