Puppeteer .click 悬停而不是单击

Posted 2023-03-07

【中文标题】Puppeteer .click 悬停而不是单击

【英文标题】：Puppeteer .click hovers instead of clicking

【发布时间】：2021-01-08 04:43:44

【问题描述】：

我正在使用 puppeteer 自动重启我的 wifi (Linksys Velop)，但我似乎无法单击锚标记来弹出最终对话框。

await page.waitForSelector('.tab-section > #diagnostics > #reboot > .block-row > .showForNodes', visible: true);
await page.$eval('.tab-section > #diagnostics > #reboot > .block-row > .showForNodes', elem => elem.click());

点击元素后，锚标记看起来好像被悬停在上面，带有蓝色下划线。以下是相关标记：

            <fieldset id="reboot" class="left">
                <legend>Restart</legend>
                <div class="block-row text-orphan">
                    <a class="reboot-router showForLinksysRouters">Restart router</a>
                    <a class="reboot-router showForNodes">Restart Velop system</a>
                </div>
            </fieldset>

我尝试了 page.click() 和 page.$eval()，更改了点击次数和点击延迟，但我无法让它工作。它不会抛出错误只是不会点击。所有其他按钮单击（其中一个是锚标记）都有效，这只是最后一个。我有什么明显的遗漏吗？

谢谢！

【问题讨论】：

(1) 如果您通过 DevTools 控制台运行它，它是否工作：$('.tab-section > #diagnostics > #reboot > .block-row > .showForNodes').click()？ (2) 链接不是在框架内还是在阴影 DOM 元素中？

@theDavidBarton (1) 是的，如果我通过 devtools 运行它（在浏览页面后）它可以工作我也尝试将它放入page.evaluate()，但它仍然拒绝点击 pupeteer。 (2) 不，它不在框架或阴影内

我明白了。 (3) 最大化窗口是否有帮助：await puppeteer.launch( headless: false, defaultViewport: null, args: ['--start-maximized'] );？有时选择器名称会随着视口而变化（无论如何它无法解释为什么它会成功悬停）。 (4) 可能是强制等待：await page.waitFor(4000); 在点击之前？ page.evaluate 是一个很好的方法，很抱歉它没有解决您的问题。

Page.waitFor() 有效，谢谢！ （如果你回答问题我可以设置为答案）

【参考方案1】：

由于所有可能的点击解决方案都无法点击该元素，（即使使用page.waitForSelector）：作为终极黑客，您可以尝试通过强制等待几毫秒来等待链接变为可点击。可以使用 page.waitFor 来完成，它在 pptr 5.3.0 中已弃用，因为可以使用 page.waitForTimeout。

await page.waitFor(4000);
await page.$eval('#reboot > .block-row > .showForNodes', elem => elem.click());

Puppeteer 5.3.0+

await page.waitForTimeout(4000);
await page.$eval('#reboot > .block-row > .showForNodes', elem => elem.click());