本教程旨在指导读者如何使用Node.js的Puppeteer库从TripAdvisor网站抓取景点信息，包括标题、链接、图片和描述。文章将详细阐述如何识别和构建稳定的CSS选择器，避免常见的抓取错误，并提供一个完整的代码示例，帮助开发者构建高效且可靠的网页爬虫。
1. 理解Puppeteer与网页抓取基础
puppeteer是一个node库，它提供了一个高级api来通过devtools协议控制chrome或chromium。这意味着你可以像人类用户一样，通过代码模拟浏览器行为，例如导航页面、点击按钮、填写表单，以及最重要的——从动态加载的网页中提取数据。对于像tripadvisor这样大量使用javascript渲染内容的网站，puppeteer是进行网页抓取的理想工具。
在开始之前，请确保你已安装Node.js，并通过npm安装了Puppeteer：
npm init -y npm install puppeteer
2. 识别目标元素与构建CSS选择器
网页抓取的核心挑战在于准确地识别和定位目标数据所在的HTML元素。许多网站，特别是动态内容网站，会频繁更新其HTML结构或使用动态生成的类名，这使得选择器容易失效。因此，构建稳定且具有韧性的CSS选择器至关重要。
以TripAdvisor的景点列表页为例，我们需要抓取每个景点卡片的标题、链接、图片和描述。
初始错误与修正：
初学者常犯的错误是使用过于泛化或依赖动态类名的选择器。例如，尝试使用#lithium-root .jemSU或.VLKgo等类名作为主选择器，但这些类名可能随时改变，或者在DOM中并非唯一标识。
正确的策略是寻找更稳定的HTML结构。观察TripAdvisor页面，每个景点通常被包裹在一个<article>标签内。这是一个语义化的标签，通常用于表示独立的、可分发的内容单元，因此它是一个相对稳定的容器。
获取标题和链接：
在<article>内部，标题通常位于一个链接（<a>标签）内，并且这个链接可能没有额外的类名，或者其父元素有一个稳定的类名，例如.VLKGO。
- 不推荐的简单选择器： ‘.VLKGO’ (可能选中多个不相关的元素)
- 推荐的稳定选择器： ‘.VLKGO a:not([class])’ (选中.VLKGO内部的，且没有class属性的<a>标签，这通常是标题链接)
- 另一种获取标题文本的方式： ‘.VLKGO span > div’ (选中.VLKGO内部span的直接子div，通常包含标题文本)
代码示例：获取标题
以下代码片段演示了如何使用page.$$eval或page.evaluate来获取页面上所有景点卡片的标题。
const puppeteer = require("puppeteer"); (async () => { const browser = await puppeteer.launch({ headless: true }); // 生产环境建议设置为true const page = await browser.newPage(); const url = 'https://www.tripadvisor.com/Attractions-g297476-Activities-c42-Cartagena_Cartagena_District_Bolivar_Department.html'; await page.goto(url, { waitUntil: 'load', timeout: 30000 }); await page.waitForSelector('main', { timeout: 10000 }); // 等待主内容区加载 // 方法一：使用page.evaluate和querySelectorAll const titles1 = await page.evaluate(() => Array.from(document.querySelectorAll('article .VLKGO a:not([class])'), (e) => ({ title: e.innerText.split('.').pop().trim() // 移除序号，清理文本 })) ); console.log('Titles (Method 1):', titles1); // 方法二：使用page.$$eval const titles2 = await page.$$eval('article .VLKGO span > div', el => el.map(x => x.textContent.split('.').pop().trim()) ); console.log('Titles (Method 2):', titles2); await browser.close(); })().catch(err => console.error(err));
3. 抓取多字段信息：标题、链接、图片、描述及更多
为了获取每个景点卡片的完整信息，我们将采用更细致的策略：首先定位所有景点卡片的容器（<article>），然后遍历每个容器，在其内部提取所需的各个字段。
完整抓取流程：
- 启动浏览器并导航： 初始化Puppeteer，打开新页面，并导航到目标URL。
- 等待页面加载： 使用waitUntil: ‘load’和waitForSelector确保页面内容完全加载。
- 定位所有卡片： 使用page.$$(‘article’)获取所有景点卡片的元素句柄。
- 遍历并提取数据： 循环遍历每个卡片句柄，使用elementHandle.$eval在其内部提取特定字段。$eval在元素句柄的上下文中执行，效率更高。
- 数据清洗与结构化： 对提取到的文本进行清洗（如移除序号、多余空格），并将数据存储为结构化的对象数组。
示例代码：抓取标题、链接、图片、描述、价格等
const puppeteer = require("puppeteer"); let browser; // 声明浏览器实例以便在finally块中关闭 (async () => { browser = await puppeteer.launch({ headless: true }); // 建议生产环境设为true const page = await browser.newPage(); const url = 'https://www.tripadvisor.com/Attractions-g297476-Activities-c42-Cartagena_Cartagena_District_Bolivar_Department.html'; await page.goto(url, { waitUntil: 'load', timeout: 30000 }); await page.waitForSelector('main', { timeout: 10000 }); // 等待主要内容区加载 // 获取所有景点卡片的元素句柄 let places = await page.$$('article'); let data = []; for (let place of places) { let header = {}; let image = ''; let desc = ''; let by = {}; let price = ''; let priceTxt = ''; try { // 提取标题和链接 header = await place.$eval('.VLKGO a:not([class])', el => { // 移除标题前的序号（如 "1."） const name = el.textContent.split('.').pop().trim(); const link = el.getAttribute('href'); return { name, link: `https://www.tripadvisor.com${link}` }; // 拼接完整链接 }); } catch (e) { console.warn("Title/Link not found for a card:", e.message); // 可以选择跳过或赋予默认值 } try { // 提取图片URL，通常在srcset中包含多尺寸图片，取最大的 image = await place.$eval('picture > img[srcset]', el => { const srcset = el.getAttribute('srcset'); if (srcset) { // 获取最后一个（通常是最大尺寸）的图片URL，并移除' 2x'等描述 return srcset.split(',').pop().replace(/2x/gi, '').trim(); } return ''; }); } catch (e) { console.warn("Image not found for a card:", e.message); } try { // 提取描述 desc = await place.$eval('a:not([class]) > div > span', el => el.textContent.trim()); } catch (e) { console.warn("Description not found for a card:", e.message); } try { // 提取提供者/作者信息 by = await place.$eval('.VLKGO div > div > div > a', el => { const name = el.textContent.replace('By ', '').trim(); const link = el.getAttribute('href'); return { name, link: `https://www.tripadvisor.com${link}` }; }); } catch (e) { // 提供者信息可能不是所有卡片都有 // console.warn("Provider info not found for a card:", e.message); } try { // 提取价格（如果存在） price = await place.$eval('[data-automation=cardPrice]', el => el.textContent.trim()); } catch (e) { // 价格信息可能不是所有卡片都有 } try { // 提取价格文本（如 "起" 或 "每人"） priceTxt = await place.$eval('div:nth-child(1) > div:nth-child(3):not([class])', el => el.textContent.trim()); } catch (e) { // 价格文本可能不是所有卡片都有 } // 将提取到的数据添加到结果数组 data.push({ name: header.name || 'N/A', link: header.link || 'N/A', desc: desc || 'N/A', image: image || 'N/A', price: price || 'N/A', priceTxt: priceTxt || 'N/A', by: by.name ? by : { name: 'N/A', link: 'N/A' } }); } console.log(JSON.stringify(data, null, 2)); // 打印结构化的JSON数据 })().catch(err => console.error("An error occurred:", err)).finally(() => { // 确保浏览器在任何情况下都被关闭 if (browser) { browser.close(); } });
4. 注意事项与最佳实践
- 选择器稳定性： 网页结构随时可能更新，导致选择器失效。定期检查并更新选择器是维护爬虫的必要工作。
- 错误处理： 使用try…catch块包裹可能失败的选择器，以防止因某个元素缺失而导致整个爬虫崩溃。
- 等待机制： 对于动态加载的页面，使用page.waitForSelector()或page.waitForNavigation()等方法确保元素在尝试抓取之前已经加载完成。
- 无头模式（Headless Mode）： 在开发和调试阶段，可以将headless设置为false，以便观察浏览器行为。在生产环境中，应将其设置为true以提高性能和效率。
- 负责任的抓取： 遵守网站的robots.txt协议，不要对网站造成过大负载。考虑添加延迟（page.waitForTimeout()）来模拟人类行为，避免被封禁IP。
- IP限制与代理： 频繁的请求可能会导致IP被网站封禁。在生产环境中，可能需要结合代理IP池来规避此问题。
- API优先： 尽管本教程专注于网页抓取，但如果目标网站提供官方API，始终优先考虑使用API，因为这通常更稳定、合法且高效。
总结
通过本教程，我们学习了如何使用Puppeteer从TripAdvisor这样的动态网站抓取结构化数据。关键在于理解Puppeteer的工作原理，构建稳定的CSS选择器，并采用分步遍历的方式提取多字段信息。掌握这些技术，你将能够应对各种复杂的网页抓取挑战，为数据分析、市场研究等提供有力支持。记住，在进行任何网页抓取活动时，始终要遵守道德规范和法律法规。
css javascript java html js node.js json node go 浏览器 ipad 工具 JavaScript css chrome html npm try catch 循环 class JS 对象 dom 选择器 数据分析