这篇文章我主要想分享如何使用Puppeteer获取页面的元素和元素的值。其实也就是page.$eval和page.$$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);

 

本文由老郭种树原创，转载请注明：https://guozh.net/puppeteer-eval-vs-eval-gets-page-element-properties-and-values/