在进行网页自动化或数据抓取时，Puppeteer提供了强大的能力来与页面DOM进行交互。其中，page.$eval()和page.$$eval()（以及它们的元素句柄版本elementHandle.$eval()和elementHandle.$$eval()）是执行JavaScript代码并获取DOM元素信息的关键方法。理解它们的区别和正确使用方式对于高效编写Puppeteer脚本至关重要。
1. 理解.$eval()：针对单个元素的评估
.$eval(selector, pageFunction)方法用于在浏览器环境中执行一个pageFunction，并将其结果返回给Node.js环境。它的核心特点是：
它只对页面中第一个匹配selector的元素执行pageFunction。pageFunction会接收到这个匹配到的DOM元素作为其第一个参数。
示例：提取单个元素的HTML内容
假设我们需要从一个ID为#words的容器中，提取第一个div元素的内部HTML。
const puppeteer = require('puppeteer');(async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://monkeytype.com/', { waitUntil: 'domcontentloaded' }); // 等待 #words 元素出现 const wordsSelector = await page.waitForSelector('#words'); // 使用 .$eval 提取第一个 div 的 innerHTML const innerHtml = await wordsSelector.$eval('div', wordsDiv => wordsDiv.innerHTML); console.log("第一个div的innerHTML:", innerHtml); // 预期输出如 ... await browser.close();})();
在这个例子中，wordsDiv参数在pageFunction中代表了#words元素内部第一个匹配div选择器的DOM元素，我们可以直接访问它的innerHTML属性。
2. 理解.$$eval()：针对多个元素的评估
.$$eval(selector, pageFunction)方法同样用于在浏览器环境中执行pageFunction，但它与.$eval()有显著不同：
它对页面中所有匹配selector的元素执行pageFunction。pageFunction会接收到一个DOM元素数组作为其第一个参数。
常见误区与正确用法
许多初学者在使用.$$eval()时，会错误地认为pageFunction中的参数是单个DOM元素，并尝试直接访问其属性，例如：
// 错误示例：尝试直接访问数组的 innerHTML 属性// const words = await wordsSelector.$$eval('div', elements => elements.innerHTML);// 这里的 elements 是一个数组，elements.innerHTML 将是 undefined
正确的做法是，在pageFunction内部，你需要遍历或映射这个DOM元素数组，对每个元素执行操作。
示例：提取所有匹配元素的HTML内容
为了提取#words容器内所有.word元素的内部HTML，我们需要在pageFunction中对传入的元素数组进行映射：
const puppeteer = require('puppeteer');(async () => { const browser = await puppeteer.launch({ headless: true }); const [page] = await browser.pages(); await page.goto('https://monkeytype.com/', { waitUntil: 'domcontentloaded' }); // 接受 Cookies const rejectAllButton = await page.waitForSelector('.rejectAll'); if (rejectAllButton) { await rejectAllButton.click(); } // 等待第一个活跃的单词出现，确保页面加载完成 await page.waitForSelector('#words .word.active'); const wordsEl = await page.$('#words'); // 获取 #words 元素句柄 // 使用 $$eval 提取所有 .word 元素的 innerHTML const wordsHtmlArray = await wordsEl.$$eval('.word', els => els.map(el => el.innerHTML) // 对每个元素执行 .innerHTML 操作 ); console.log("所有单词的HTML:", wordsHtmlArray); // 预期输出如 ["...", ...] await browser.close();})();
在这个例子中，els是一个包含所有.word元素的数组。我们使用map方法遍历这个数组，对每个元素el获取其innerHTML，最终返回一个包含所有HTML字符串的数组。
最佳实践：使用.textContent
在大多数情况下，如果你只需要元素的纯文本内容，推荐使用.textContent而不是.innerHTML。.textContent会返回元素及其所有子元素的文本内容，不包含任何HTML标签，这通常更简洁且不易出错。
// 提取所有 .word 元素的纯文本内容const wordsTextArray = await wordsEl.$$eval('.word', els => els.map(el => el.textContent.trim()) // 使用 .textContent 并去除首尾空白);console.log("所有单词的文本:", wordsTextArray); // 预期输出如 ["interest", "word", ...]
3. 高级应用：模拟打字测试与请求拦截
.$eval()和.$$eval()是构建复杂自动化脚本的基础。结合其他Puppeteer功能，我们可以实现更高级的交互，例如自动化一个打字测试网站。
下面的示例展示了如何：
启动一个无头浏览器。拦截并过滤网络请求，以优化性能或避免不必要的资源加载。导航到打字测试网站。模拟用户点击接受Cookie。在一个循环中识别当前需要输入的单词，并使用type()方法模拟键盘输入。捕获打字测试结果的截图。
const puppeteer = require("puppeteer");let browser;(async () => { browser = await puppeteer.launch({headless: true}); // 启动无头浏览器 const [page] = await browser.pages(); const url = "https://monkeytype.com/"; // 启用请求拦截 await page.setRequestInterception(true); const allowed = [ "https://monkeytype.com", "https://www.monkeytype.com", "https://api.monkeytype.com", "https://fonts.google", // 允许加载字体文件 ]; page.on("request", request => { // 只允许特定域名的请求通过，其他请求一律阻止 if (allowed.some(e => request.url().startsWith(e))) { request.continue(); } else { request.abort(); } }); await page.goto(url, {waitUntil: "domcontentloaded"}); // 导航到页面 // 辅助函数，等待选择器并返回元素句柄 const $ = (...args) => page.waitForSelector(...args); // 点击接受Cookies按钮（如果存在） const rejectAllButton = await $(".rejectAll"); if (rejectAllButton) { await rejectAllButton.click(); } // 等待第一个活跃的单词出现 await $("#words .word.active"); const wordsContainer = await page.$("#words"); // 获取单词容器的句柄 try { // 循环直到无法找到下一个活跃单词（表示测试结束） for (;;) { // 使用 .$eval 提取当前活跃单词的文本内容 const word = await wordsContainer.$eval(".word.active", el => el.textContent.trim() ); // 模拟键盘输入单词，并在末尾加上空格 await wordsContainer.type(word + " "); } } catch (err) { // 捕获循环结束时的错误（例如找不到 .word.active 元素） console.log("打字测试结束或发生错误:", err.message); } // 等待结果显示 const results = await $("#result"); // 滚动到结果区域，确保截图可见 await results.evaluate(el => el.scrollIntoView()); // 截取结果区域的屏幕截图 await results.screenshot({path: "typing-results.png"}); console.log("打字结果截图已保存为 typing-results.png");})() .catch(err => console.error("自动化过程中发生错误:", err)) .finally(() => browser?.close()) // 无论成功失败，最后都关闭浏览器;
注意事项：
请求拦截： page.setRequestInterception(true) 开启拦截，page.on(‘request’, …) 监听请求并决定是continue()（继续）还是abort()（阻止）。这对于减少页面加载时间、过滤广告或特定资源非常有用。元素句柄的.$eval()： 在循环中，我们使用wordsContainer.$eval()，而不是page.$eval()。这是因为wordsContainer是一个元素句柄，在其上下文中使用.$eval()可以提高效率，因为它只在该元素的子树中查找匹配的元素。错误处理： try…catch块用于优雅地处理打字测试结束时可能出现的错误（例如，当不再有.word.active元素时，.$eval会抛出错误）。资源管理： finally块确保无论脚本执行成功与否，浏览器实例都会被关闭，避免资源泄露。
总结
.$eval()和.$$eval()是Puppeteer中执行页面内JavaScript评估的核心工具。正确理解它们之间的区别——.$eval()处理单个元素，.$$eval()处理元素数组——并掌握在pageFunction中如何操作这些元素，是编写健壮、高效Puppeteer脚本的关键。结合请求拦截、模拟用户输入等高级功能，你可以构建出功能强大的自动化解决方案。在实际应用中，优先使用.textContent进行文本提取，并始终注意资源管理和错误处理。
以上就是深入理解Puppeteer的元素评估方法：.$eval()与.$$eval()的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1602700.html
微信扫一扫 
支付宝扫一扫 
