javascript - Puppeteer 在页面中找到数组元素，然后单击

Question

您好，我有一个网站，其 url 由 javascript 呈现。我想找到我的网站中的所有脚本标签，然后查找数学脚本 src 并仅返回有效的脚本标签。接下来找到脚本的父级，最后单击链接。这就是我所拥有的:

const scripts = await page.$$('script').then(scripts => {
    return scripts.map(script => {
        if(script.src.indexOf('aaa')>0){
            return script
        }
    });
});
scripts.forEach(script => {
    let link = script.parentElement.querySelector('a');
    link.click();
});

我的问题是 script.src 未定义。当我删除该条件时，我移动到 forEach 循环，但我得到 querySelector 未定义。我可以在 Debug模式控制台内用 js 编写该代码，但无法将其移至 Puppeteer API。

从控制台我得到了预期的结果

let scripts = document.querySelectorAll('script');
scripts.forEach(script=>{
let el = script.parentElement.querySelector('a');
console.log(el)
})

Answer 1

当您使用$$或$时，它将返回一个JSHandle，它与运行querySelector时返回的HTML Node或NodeList不同内评估。因此，script.src将始终返回未定义。

您可以使用以下内容，$$eval 将评估选择器并为您映射 NodeList/Node 数组。

page.$$eval('script', script => {
    const valid = script.getAttribute('src').indexOf('aaa') > 0 // do some checks
    const link = valid && script.parentElement.querySelector('a') // return the nearby anchor element if the check passed;
    if (link) link.click(); // click if it exists
})

还有其他方法可以实现这一目标，但我将所有方法合并为一个。即，如果它在浏览器上运行，那么您还可以使用 .evaluate 并运行确切的代码并获得确切的所需结果。

page.evaluate(() => {
    let scripts = document.querySelectorAll('script');
    scripts.forEach(script => {
        let el = script.parentElement.querySelector('a');
        console.log(el) // it won't show on your node console, but on your actual browser when it is running;
        el.click();
    })
})