使用 Puppeteer 通过元素 ID 点击复选框。

Question

我有以下 Puppeteer 代码：

(async () => {
  const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
  const page = await browser.newPage();

  await page.goto("https://myurl.com/page");
  await page.waitForSelector("#select-all-checkbox");

  var bodyHTML = await page.content();
  console.log(bodyHTML + "\n\n");

  await page.click("#select-all-checkbox");
  await page.close();
  await browser.close();
})();

记录HTML到控制台，我已验证我正在访问的页面具有此HTML：

<label><input type="checkbox" name="" id="select-all-checkbox" value="" checked=""><span class="ifaFs"><span data-testid="icon-checkbox-someselected" class="hdDWuD"></span></span></label>

在 page.click 行上，我收到以下错误：

(node:3827) UnhandledPromiseRejectionWarning: Error: Node is either not visible or not an HTMLElement
at ElementHandle._clickablePoint (/path/to/node_modules/puppeteer/lib/JSHandle.js:217:13)
at process._tickCallback (internal/process/next_tick.js:68:7)
-- ASYNC --
at ElementHandle. (/path/to/node_modules/puppeteer/lib/helper.js:111:15)
at DOMWorld.click (/path/to/node_modules/puppeteer/lib/DOMWorld.js:367:18)
at process._tickCallback (internal/process/next_tick.js:68:7)
-- ASYNC --
at Frame. (/path/to/node_modules/puppeteer/lib/helper.js:111:15)
at Page.click (/path/to/node_modules/puppeteer/lib/Page.js:1037:29)

提示：元素可能不可见或不是一个 HTMLElement。

- J05H

---

我还通过在 Puppeteer 中截取屏幕截图来确认该元素可见。虽然 CSS 改变了复选框的外观，但这就是它 https://i.imgur.com/iUDHTi8.png。 - J05H

所以，我认为你在截图中看到的不是复选框，而是标签。也许你可以尝试点击父级标签元素。 - hardkoded

那就是问题所在。谢谢@hardkoded - J05H

Answer 1

通过我上面的代码示例，这就是我解决问题的方法。

(async () => {
  const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
  const page = await browser.newPage();

  await page.goto("https://myurl.com/page");
  await page.waitForSelector("#select-all-checkbox");

  await page.evaluate(() => {
    document.querySelector("#select-all-checkbox").parentElement.click();
  });

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

- J05H

Answer 2

这种方法对我很有效：

(async () => {
  const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
  const page = await browser.newPage();

  await page.goto("https://myurl.com/page");
  const checkboxEl = await page.waitForSelector("#select-all-checkbox");
  await checkboxEl.click();

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

- Israel

---

我会使用 await checboxEl.click()。 - ggorlen