等到 page.click 返回 true

Question

我正在抓取一个网站 weather.com，我想点击一个 html 元素来获取数据并显示它，然后我抓取该数据。

但它并不总是对我有用，大多数时候点击不会发生，我在尝试抓取这些元素时遇到错误

await page.waitFor('#twc-scrollabe > table > tbody > tr:nth-child(1)')
await page.click('#twc-scrollabe > table > tbody > tr:nth-child(1)')

我应该怎么做才能确保点击发生？

Answer 1

尝试指定您希望元素可见

await page.waitFor('#twc-scrollabe > table > tbody > tr:nth-child(1)', { visible:true }) （你注意到{visible:true} 选项了吗？）

因为当waitFor 找到该元素时，该元素可能在页面中但不可点击。

更多细节

• 当您将 waitFor 与选择器一起使用时，您实际上是在使用 waitForSelector (see the docs)
• waitForSelector 有一系列选项 (see the docs)
• 其中一个选项是 visible，文档说

等待元素出现在 DOM 中并可见，即不具有 display: none 或 visibility: hidden CSS 属性。默认为false。

最后但同样重要的是：@FeliFong 向您询问了有关您的问题的更多信息，因为您没有提供足够的信息。你可以

• 指定您要从中获取的页面（如果它是公开的）
• 否则，您可以创建一个 GitHub 存储库，从项目中删除所有内容，只留下您正在谈论的表格和 Puppeteer 脚本
• 一般来说，当您进行 repo 时，您自己会发现问题（这发生在我身上很多次）
• 如果您在创建 repo 时没有自己解决问题...没关系，我们就是为此而准备的，但是下载 repo、启动它、解决问题、提出拉取请求要容易得多给你，然后回到这里给你一些解释。
  它对我们很有用，但主要是对你有用，因为我试图回复你......但我不知道我提供的解决方案是否适合你的需求......如果我有机会通过你的回购检查它，我会确定我已经解决了问题?

[更新] 我在你提供给我的存储库上解决了这个问题，在 GitHub 上接受我的 PR。

我做了什么：我做了一些测试，但我不知道该站点中的 Puppeteer 到底是什么“阻止”（或者，更好的是，停止等待）......但没关系，这是我的代码

let i = 0;
    let found = false;
    const maxRetries = 100;
    do {
        // waits for the element we need to click
        await page.waitForSelector('#twc-scrollabe > table > tbody > tr:nth-child(1)')
        // clicks it
        await page.click('#twc-scrollabe > table > tbody > tr:nth-child(1)')
        try {
            // waits for the content we need
            await page.waitForSelector('tr:nth-child(3) > td.sunrise > div > span:nth-child(2)', {timeout:1000});
            // if the content won't be showed the code doesn't go on and the next line won't be reached
            found = true;
        } catch(e) {}
    } while(!found || i > maxRetries) // the maxRetries variable is mere prudence

• 等待我们需要点击的元素
• 点击它
• 等待显示详细内容（超时1000毫秒）
• 如果不显示，只需重试（最多 100 次）
• 然后继续 第一次点击后，您的脚本会快速运行?