Question

您好，我有一个网址由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)
})

Answer 1

使用$$或$时，它将返回JSHandle，这与在querySelector中运行evaluate时返回的HTML Node或NodeList不同。。因此script.src将始终返回undefined。

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

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

人偶在页面中找到数组元素，然后单击

1 个答案: