深入理解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', wordsDiv => wordsDiv.innerHTML);
    console.log("第一个div的innerHTML:", innerHtml); // 预期输出如 <letter>...</letter>

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

// 错误示例：尝试直接访问数组的 innerHTML 属性
// const words = await wordsSelector.$$eval('div', elements => elements.innerHTML);
// 这里的 elements 是一个数组，elements.innerHTML 将是 undefined

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); // 预期输出如 ["<letter>...</letter>", ...]

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

// 提取所有 .word 元素的纯文本内容
const wordsTextArray = await wordsEl.$$eval('.word', els =>
    els.map(el => el.textContent.trim()) // 使用 .textContent 并去除首尾空白
);
console.log("所有单词的文本:", wordsTextArray); // 预期输出如 ["interest", "word", ...]

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()) // 无论成功失败，最后都关闭浏览器
;