使用 Puppeteer 单击复选框时出错答案

【问题标题】：Errors with clicking on a checkbox with Puppeteer使用 Puppeteer 单击复选框时出错
【发布时间】：2021-10-06 22:22:00
【问题描述】：

我在点击 Footlocker Au 结帐页面上的复选框时遇到问题。我曾尝试在网上搜索并尝试使用选择器和 xpath，但两者都不起作用。

https://i.stack.imgur.com/uyXFe.png

这是我用过的，但我试过标准 await page.click(" ");

网站：https://www.footlocker.com.au/en/p/nike-tuned-men-shoes-47241?v=244209281104#!searchCategory=men

await page.evaluate(() => {
   document.querySelector("body > main > div > div.fl-checkout > form > div > div.fl-checkout--content-container--address-block > div.fl-checkout--content-container--address-block--options-field > div:nth-child(3) > div > div > label").click();
});

【问题讨论】：

标签： javascript node.js npm puppeteer

【解决方案1】：

您可以直接定位输入并单击它。使用 id 可以大大简化选择器，而不是使用这种冗长且可能不准确的选择器。

'#fl-input-checkbox-create-account-panel'

如果需要，您甚至可以定位标签：

'label[for="fl-input-checkbox-create-account-panel"]'

【讨论】：

【解决方案2】：

不久前我遇到了类似的问题，我拦截了不必要的请求（例如：样式表、字体...等），这会影响页面的整体方面并破坏await page.click(" "); 功能。那是因为await page.click(" "); 在模仿人类行为。如果它对人类来说不可点击，那么它就不适用于 puppeteer（简而言之）。

为了解决这个问题，我使用了：

page.$eval(`YourSelectorPath`, element => element.click());

【讨论】：