时间戳

首页 > 解决方案 > 使用 puppeteer 循环遍历列表并单击按钮

javascript - 使用 puppeteer 循环遍历列表并单击按钮

问题描述

我正在尝试使用 puppeteer 来：

我尝试了多种使用方法page.evaluate，但我的数组似乎总是空的。有人可以告诉我我在这里做错了什么。

<ul>
  <li><button>Connect</button></li>
  <li><button>Wait</button></li>
  <li><button>Connect</button></li>
  <li><button>Connect</button></li>
</ul>

小路：puppeteer.js

const buttons = await page.evaluate(() =>
  Array.from(document.querySelectorAll("ul > li button"))
);

for (let button of buttons) {
  if (button.innerText === "Connect") {
    button.click();
    document
      .querySelector(
        "div.artdeco-modal"
      )
      .click();
  }
}

标签： javascriptnode.jspuppeteer

解决方案

page.evaluate不能返回 DOM 节点，因为它只能返回可序列化的数据。这是可以包装的数据，JSON.stringify以将其从浏览器环境传输到 Node.js

相反，您需要使用page.$$来获取 DOM 元素的列表。由于您也只是在寻找具有特定文本的按钮，因此我建议使用page.$xwhich 运行 XPath 查询，并且还可以根据按钮的文本进行过滤。

代码示例

const buttons = await page.$x("//ul/li//button[contains(text(), 'Connect')]");
for (let button of buttons) {
    await button.click();
    const modal = await page.$('div.artdeco-modal');
    await model.click();
}

上面的代码，首先查询页面上所有带有“Connect”文本的按钮并遍历它们。它单击每个按钮，并在每次单击后查询模型对话框并单击它。

推荐阅读