Puppeteer中.$eval()与.$$eval()的正确使用指南

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://example.com");

  // 等待 #words 元素出现
  const wordsSelector = await page.waitForSelector('#words');

  // 使用 .$eval 获取 #words 内部第一个 div 的 innerHTML
  const firstDivContent = await wordsSelector.$eval('div', element => element.innerHTML);
  console.log("第一个 div 的内容:", firstDivContent);

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

const puppeteer = require("puppeteer");

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

  // 假设页面上有cookie同意弹窗，先点击拒绝
  try {
    const rejectAllButton = await page.waitForSelector(".rejectAll", { timeout: 5000 });
    if (rejectAllButton) {
      await rejectAllButton.click();
    }
  } catch (error) {
    console.log("未找到cookie拒绝按钮或已处理。");
  }

  // 等待 #words 元素出现
  const wordsEl = await page.waitForSelector('#words');

  // 使用 .$$eval 获取 #words 内部所有 .word 元素的 innerHTML
  // 注意：回调函数接收的是一个元素数组，需要使用 map 进行处理
  const allWordsContent = await wordsEl.$$eval('.word', elements =>
    elements.map(el => el.innerHTML)
  );
  console.log("所有单词的 HTML 内容:", allWordsContent);

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

const puppeteer = require("puppeteer");

(async () => {
  let browser;
  try {
    browser = await puppeteer.launch({ headless: true }); // 设置 headless: false 可见浏览器操作
    const [page] = await browser.pages();

    // 启用请求拦截，提高性能和稳定性，只允许必要的资源加载
    await page.setRequestInterception(true);
    page.on('request', request => {
      const allowedUrls = [
        "https://monkeytype.com",
        "https://www.monkeytype.com",
        "https://api.monkeytype.com",
        "https://fonts.google.com", // 允许加载字体
      ];
      if (allowedUrls.some(url => request.url().startsWith(url))) {
        request.continue();
      } else {
        request.abort(); // 阻止不必要的请求
      }
    });

    await page.goto("https://monkeytype.com/", { waitUntil: "domcontentloaded" });

    // 处理Cookie同意弹窗
    try {
      const rejectAllButton = await page.waitForSelector(".rejectAll", { timeout: 5000 });
      if (rejectAllButton) {
        await rejectAllButton.click();
        console.log("已点击拒绝所有Cookie。");
      }
    } catch (error) {
      console.log("未找到Cookie拒绝按钮或已处理，继续执行。");
    }

    // 等待第一个活动单词出现
    await page.waitForSelector("#words .word.active");

    const wordsContainer = await page.$("#words"); // 获取单词容器元素

    // 循环模拟打字过程
    console.log("开始模拟打字...");
    for (let i = 0; i < 50; i++) { // 限制循环次数，避免无限循环
      try {
        // 使用 .$eval 获取当前活动单词的纯文本内容
        const activeWordText = await wordsContainer.$eval(".word.active", el =>
          el.textContent.trim() // 使用 textContent 获取纯文本并去除首尾空格
        );
        console.log(`正在输入: "${activeWordText}"`);
        // 模拟键盘输入单词，并在每个单词后输入一个空格
        await wordsContainer.type(activeWordText + " ");
      } catch (e) {
        // 如果找不到 .word.active 元素，说明打字可能已结束或出现异常
        console.log("未找到活动单词，可能已完成打字或发生错误。", e.message);
        break; // 退出循环
      }
      // 可以在此处添加短暂延迟，模拟更真实的用户输入速度
      // await page.waitForTimeout(50);
    }

    // 滚动到结果区域并截图
    const resultsElement = await page.$("#result");
    if (resultsElement) {
      await resultsElement.evaluate(el => el.scrollIntoView()); // 滚动到结果视图
      await resultsElement.screenshot({ path: "typing-results.png" });
      console.log("打字结果已保存到 typing-results.png");
    } else {
      console.log("未找到结果区域。");
    }

  } catch (error) {
    console.error("自动化过程中发生错误:", error);
  } finally {
    if (browser) {
      await browser.close();
      console.log("浏览器已关闭。");
    }
  }
})();