Puppeteer中.$eval()与.$$eval()的高效使用指南

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', element => element.innerHTML);
    console.log(innerHtml); // 预期输出：<letter>i</letter><letter>n</letter>...

    await browser.close();
})();

// 错误示例：
// const wordsSelector = await page.waitForSelector('#words');
// console.log(await wordsSelector.$$eval('div', words => words.innerHTML)); 
// 这里的 'words' 是一个数组，没有 innerHTML 属性

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    const url = "https://monkeytype.com/";
    await page.goto(url, { waitUntil: "domcontentloaded" });

    // 假设页面有隐私政策弹窗，需要点击拒绝
    const rejectAllButton = await page.waitForSelector(".rejectAll");
    if (rejectAllButton) {
        await rejectAllButton.click();
    }

    // 等待激活的单词元素出现
    await page.waitForSelector("#words .word.active");

    const wordsEl = await page.$("#words");
    // 使用 $$eval 获取所有 .word 元素的 innerHTML
    const wordsInnerHtmlArray = await wordsEl.$$eval(".word", els =>
        els.map(el => el.innerHTML) // 遍历数组，提取每个元素的 innerHTML
    );
    console.log(wordsInnerHtmlArray); // 预期输出：['<letter>w</letter>...', '<letter>o</letter>...']

    // 最佳实践：如果只需要纯文本，推荐使用 .textContent
    const wordsTextContentArray = await wordsEl.$$eval(".word", els =>
        els.map(el => el.textContent.trim()) // 提取纯文本并去除空白
    );
    console.log(wordsTextContentArray); // 预期输出：['word1', 'word2', ...]

    await browser.close();
})();

const puppeteer = require("puppeteer");

let browser;
(async () => {
  browser = await puppeteer.launch({ headless: true }); // 设置 headless: false 可观察浏览器操作
  const [page] = await browser.pages();
  const url = "https://monkeytype.com/";

  // 1. 设置请求拦截以优化性能和稳定性
  await page.setRequestInterception(true);
  const allowedDomains = [
    "https://monkeytype.com",
    "https://www.monkeytype.com",
    "https://api.monkeytype.com",
    "https://fonts.google", // 允许加载字体文件
  ];
  page.on("request", request => {
    if (allowedDomains.some(domain => request.url().startsWith(domain))) {
      request.continue();
    } else {
      request.abort(); // 阻止加载其他不必要的资源，如广告、分析脚本等
    }
  });

  // 2. 导航到目标页面并等待DOM加载完成
  await page.goto(url, { waitUntil: "domcontentloaded" });

  // 3. 处理隐私政策弹窗（如果存在）
  const rejectAllButton = await page.waitForSelector(".rejectAll");
  if (rejectAllButton) {
      await rejectAllButton.click();
  }

  // 4. 等待打字测试区域加载完成，确保单词可见
  await page.waitForSelector("#words .word.active");
  const wordsContainer = await page.$("#words"); // 获取单词容器的 ElementHandle

  // 5. 模拟打字过程
  try {
    for (;;) { // 无限循环，直到没有活动的单词或出现错误
      // 使用 .$eval 获取当前活动单词的纯文本
      const activeWord = await wordsContainer.$eval(".word.active", el =>
        el.textContent.trim()
      );
      console.log(`正在输入: ${activeWord}`);
      // 使用 ElementHandle.type() 模拟键盘输入
      await wordsContainer.type(activeWord + " "); // 输入单词并加上空格
    }
  } catch (err) {
    // 当没有 .word.active 元素时，.$eval 会抛出错误，表示打字测试可能已完成
    console.log("打字测试可能已完成或遇到其他错误:", err.message);
  }

  // 6. 捕获测试结果
  const results = await page.waitForSelector("#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()); // 无论成功失败，确保关闭浏览器实例