使用Puppeteer提取页面内容的技巧

在现代的Web开发和爬虫开发中，Puppeteer是一个非常强大的工具，它可以帮助我们自动化浏览器操作，提取页面内容。本文将从初阶到高阶，详细介绍如何使用Puppeteer提取页面内容的各种技巧，特别关注多层类关系选择器的使用。

初阶技巧

1. 提取单个元素的文本内容

使用page.$和page.evaluate来提取单个元素的文本内容。

const titleElement = await page.$('h1');
const title = await titleElement.getProperty('textContent').then(t => t.jsonValue());
console.log(title);

2. 提取多个元素的文本内容

使用page.$$和page.$$eval来提取多个元素的文本内容。

const spanTexts = await page.$$eval('span', spans => spans.map(span => span.textContent));
console.log(spanTexts);

3. 提取元素的属性

使用page.$和page.evaluate来提取单个元素的属性。

const linkElement = await page.$('a');
const href = await linkElement.getProperty('href').then(h => h.jsonValue());
console.log(href);

4. 提取多个元素的属性

使用page.$$和page.$$eval来提取多个元素的属性。

const links = await page.$$eval('a', links => links.map(link => link.getAttribute('href')));
console.log(links);

中阶技巧

1. 提取嵌套元素的内容

使用page.evaluate来提取嵌套元素的内容。

const nestedData = await page.evaluate(() => {
   
   
  const items = document.querySelectorAll('.item');
  return Array.from(items).map(item => ({
   
   
    title: item.querySelector('h2').textContent,
    description: item.querySelector('p').textContent
  }));
});
console.log(nestedData);

2. 提取动态加载的内容

使用page.waitForSelector来等待动态加载的内容。

await page.waitForSelector('.dynamic-content');
const dynamicContent = await page.$eval('.dynamic-content', el => el.textContent);
console.