Puppeteer 在页面中查找数组元素然后点击 [英] Puppeteer find array elements in page and then click

问题描述

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

Hello I have site that url are rendered by javascript. I want to find all script tags in my site, then math script src and return only valid ones. Next find parent of script and finally click on link. This is what i have:

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.

My problem is that i have script.src is undefined. When i remove that condition i move to forEach loop but i get querySelector is undefined. I can write that code in js inside of console of debug mode but i cant move it to Puppeteer API.

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

from console i get results as expected

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

推荐答案

当你使用 $$ 或 $ 时，会返回一个 JSHandle，它与在 evaluate 中运行 querySelector 时返回的 HTML 节点或节点列表.所以 script.src 将始终返回 undefined.

When you use $$ or $, it will return a JSHandle, which is not same as a HTML Node or NodeList that returns when you run querySelector inside evaluate. So script.src will always return undefined.

您可以改用以下代码，$$eval 将评估一个选择器并为您映射 NodeList/Array of Nodes.

You can use the following instead, $$eval will evaluate a selector and map over the NodeList/Array of Nodes for you.

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 并运行确切的代码并获得确切的所需结果.

There are other ways to achieve this, but I merged all into one. Ie, If it works on browser, then you can also use .evaluate and run the exact code and get exact desired result.

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

这篇关于Puppeteer 在页面中查找数组元素然后点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！