Puppeteer $eval vs $$eval 获取页面元素属性和值

这篇文章我主要想分享如何使用Puppeteer获取页面的元素和元素的值。其实也就是page.$evalpage.$$eval的使用。我这会分享很多例子,通过例子的写法,举一反三。

先声明,我也不太懂 Nodejs,但有 JAVA 语言基础,很多东西依葫芦画瓢照着写的

里面用到一些 Selector 选择器知识,不懂的看廖雪峰老师的文章,只要把第一篇文章看懂就行了。

获 page.$eval() 取单个元素

await page.goto('https://news.ycombinator.com/news')
const name = await page.$eval('.hnname > a', el => el.innerText)
console.log(name)

el.innerText 用来获取标签内的值,比如 <span style="color:red">test1</span>,使用后获取 test1 。

官网还有三个例子

const searchValue = await page.$eval('#search', el => el.value);
const preloadHref = await page.$eval('link[rel=preload]', el => el.href);
const html = await page.$eval('.main-container', e => e.outerHTML);

然后是获取符合条件的多个元素 page.$$eval()

像这张图中,如果要获取每个新闻链接的文本。

await page.goto('https://news.ycombinator.com/news')
const stories = await page.$$eval('a.titlelink', anchors => {
          return anchors.map(anchor => anchor.textContent).slice(0, 10);
})
console.log(stories)

得到结果如下(只取前十个):

再比如这个页面有三张图片,想获取三张图片的链接地址。

await page.goto('https://learnwebcode.github.io/practice-requests/')

const photos = await page.$$eval('img', imgs => {
     return imgs.map(img => img.src);
});
console.log(photos)

通过上面案例可以发现,其实关键在于选择器的写法。

如果实在不知道怎么写,有什么小技巧没呢?可以用复制选择器的方法。

鼠标选择到我们需要的元素,然后右键复制选择器。将复制的内容粘贴到上面函数,这种做法对单个元素貌似很有效

还有种情况,就算我们写了正确的选择器,但就是没办法获取到对应元素。这种情况有可能这个元素是通过 js 异步加载的,那我们需要等待这个元素加载完成才能获取。

比如我博客的例子:

await page.goto('https://guozh.net/');
await page.waitForSelector("body > section > div.sidebar > div.widget.widget_postlist > h3 > strong");
const lastArticleText = await page.$eval("body > section > div.sidebar > div.widget.widget_postlist > h3 > strong",el => el.textContent);
console.log(lastArticleText);

 

未经允许不得转载:老郭种树 » Puppeteer $eval vs $$eval 获取页面元素属性和值

赞 (1)

评论

4+3=

能将我博客放入广告拦截白名单吗?

我尽量分享有用并且长期有用的内容,希望能帮到你,谢谢支持。