puppeteer - 识别 reCaptcha 挑战何时变为活动/可见答案

【问题标题】：puppeteer - identify when reCaptcha challenge becomes active/visiblepuppeteer - 识别 reCaptcha 挑战何时变为活动/可见
【发布时间】：2020-06-15 19:39:17
【问题描述】：

使用此 reCaptcha 演示页面：https://recaptcha-demo.appspot.com/recaptcha-v2-invisible.php

使用 puppeteer，我的目标是等待并确定挑战（必须从网格中选择特定图像）何时在页面上可见。我不是在问如何绕过或解决 reCaptcha，只是想知道它何时处于活动状态并准备好被解决。

通过 DevTools，我发现了代表可见 reCaptcha 挑战的 HTML 元素： recaptcha element tree

不幸的是，我一直无法让 puppeteer “找到”特定元素。即使 reCaptcha 在浏览器中清晰可见并且 #rc-imageselect 元素在元素树中可见，以下代码将始终打印“未找到”。我已经尝试过主框架、子框架等，但无法让 puppeteer 找到 reCaptcha 元素。

let recap = await myframe.$("body #rc-imageselect")  //.rc-imageselect-payload") // #rc-imageselect
if (recap == null) {
  console.log("imageselect NOT found")
} else {
  console.log("imageselect found")
}

为什么这是必要的？在真实世界的页面（不是这个演示页面）上，reCaptcha 挑战不会对某些用户触发，只会对某些用户弹出。我的目标是确定它何时弹出，然后选择如何处理 reCaptcha，方法是解决（单独，手动）、后退或完全放弃。

非常欢迎任何有关 puppeteer 代码以查找 reCaptcha 元素的帮助。谢谢。

【问题讨论】：

你是否使用任何特定的参数来启动 Puppeteer？
@theDavidBarton in puppeteer.launch 我设置了defaultViewport，扩展了timeout，并将headless 设置为false。我还尝试将devTools 设置为true 并将sloMo 设置为各种长度。我还尝试了自定义userAgent。这目前正在开发中......最终我想在无头模式下运行它。

标签： node.js puppeteer recaptcha chromium invisible-recaptcha

【解决方案1】：

有一些错误永远不会进入控制台，因此仍然无法识别，并且是由 iframe 内部的安全问题引起的（这对于 Chrome/Chromium 浏览器来说始终是一个关键点）。您将需要以下安全禁用参数来启动 puppeteer，因为由于同源策略，默认情况下不允许您进入 iframe。

const browser = await puppeteer.launch({
    headless: true, args: ['--disable-web-security', '--disable-features=IsolateOrigins,site-per-process']
})

在 reCaptcha 场景中将始终需要这些参数。

【讨论】：

非常感谢@theDavidBarton ...一旦我添加了这些标志，“丢失”的帧就可以识别了。在flags之前，所有帧的计数只找到2，现在我相信是6。
对未来读者的另一条评论：微软的playwright 无需设置任何启动标志就可以本地找到框架。使用 Chromium 和 Firefox 测试。

【解决方案2】：

你不需要进入 iframe DOM，你可以通过检查 iframe 元素来弄清楚：

let height = await page.evaluate(() => document.querySelector('iframe[title="recaptcha challenge"]').offsetHeight)

根据我的经验，在处理验证码时，您不必使用特殊标志启动。

【讨论】：

@pguardino 这也是一个了不起的答案。我只检查了 DavidBarton's，因为这可能有点令人困惑。当 iframe 不可见时，它似乎仍然具有 150px 的 offsetHeight。当它变得可见时它会增加（并包含要检查的烦人照片），这是了解它是否可见所需的触发器。但在我弄清楚这一点之前，我花了一些时间测试 offsetHeight 的非零值。但是，就像您说的那样，此解决方案无需任何额外的启动标志即可工作，这是一个优点。

【解决方案3】：

这也适用于我

let height = await page.evaluate(() => document.querySelector('iframe[title="recaptcha challenge"]').offsetHeight)

但由于某种原因，除非我这样做，否则高度总是 150

await page.waitFor(8000)

我正忙着跑，所以我可以看到验证码已经可见......但它只在等待 8 秒后显示高度 >150.. 非常烦人

【讨论】：