使用Puppeteer页面运行嵌套的for循环。$$eval(...)_使用puppeteer定位嵌套的iframe_使用puppeteer集群的无限循环(有意) - 腾讯云开发者社区

使用Puppeteer页面运行嵌套的for循环。$$eval(...)

基础概念

Puppeteer 是一个 Node.js 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chrome 或 Chromium。$$eval 是 Puppeteer 中的一个方法，用于在页面上下文中执行 JavaScript 代码，并返回结果。

类型

$$eval 方法接受两个参数：

选择器：用于选择页面上的元素。
函数：将在页面上下文中执行的 JavaScript 函数。

应用场景

当你需要在页面上对一组元素执行相同的操作时，可以使用 $$eval。例如，批量修改元素的属性或内容。

示例代码

以下是一个使用 Puppeteer 和 $$eval 运行嵌套 for 循环的示例：

const puppeteer = require('puppeteer');

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

  // 假设页面上有一组元素，我们想要对它们进行操作
  const elements = await page.$$eval('.item', items => {
    // 嵌套 for 循环示例
    for (let i = 0; i < items.length; i++) {
      for (let j = 0; j < items[i].children.length; j++) {
        // 对每个子元素执行操作，例如修改文本内容
        items[i].children[j].textContent = `Item ${i} - Subitem ${j}`;
      }
    }
    return items;
  });

  console.log(elements);

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

可能遇到的问题及解决方法

问题：`$$eval` 执行时页面没有正确渲染

原因：可能是页面加载不完全或者 JavaScript 代码执行时机不对。

解决方法：

确保页面完全加载后再执行 $$eval，可以使用 page.waitForSelector 等待特定元素出现。
使用 page.waitForFunction 等待某个条件满足后再执行代码。

await page.waitForSelector('.item');
const elements = await page.$$eval('.item', items => {
  // 你的代码
});

问题：`$$eval` 执行时出现安全错误

原因：$$eval 中的代码可能会访问或修改页面上的敏感数据，导致安全问题。

解决方法：

尽量避免在 $$eval 中执行复杂的逻辑，尽量保持代码简单。
使用 page.evaluate 代替 $$eval，并传递必要的参数，减少对页面上下文的访问。

const elements = await page.evaluate((selector) => {
  const items = Array.from(document.querySelectorAll(selector));
  for (let i = 0; i < items.length; i++) {
    for (let j = 0; j < items[i].children.length; j++) {
      items[i].children[j].textContent = `Item ${i} - Subitem ${j}`;
    }
  }
  return items;
}, '.item');