Puppeteer 在页面中查找数组元素，然后单击答案

【问题标题】：Puppeteer find array elements in page and then clickPuppeteer 在页面中查找数组元素，然后单击
【发布时间】：2019-01-17 20:19:11
【问题描述】：

您好，我有一个 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 未定义。我可以在调试模式控制台内的 js 中编写该代码，但我无法将其移至 Puppeteer API。

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

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

【问题讨论】：

标签： javascript puppeteer

【解决方案1】：

当您使用$$ 或$ 时，它将返回一个JSHandle，这与您在evaluate 中运行querySelector 时返回的HTML 节点或NodeList 不同。所以script.src 总是会返回 undefined。

您可以改用以下代码，$$eval 将为您评估一个选择器并映射到节点列表/节点数组。

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();
    })
})

【讨论】：