如何使用 Puppeteer 从 iframe 中检索 reCAPTCHA 令牌？

Question

我正在编写一个机器人，我试图在任务完成后使用它来抓取 reCAPTCHA 令牌。我正在尝试使用：

await page.evaluate(() => document.getElementById('recaptcha-token').value)

验证码加载到页面后，但每次我都收到相同的错误：Uncaught (in promise) Error: Evaluation failed: TypeError: Cannot read property 'value' of null。

我相信这个错误的部分原因是我试图获取的元素是隐藏类型的：

<input type="hidden" id="recaptcha-token value="[very long string of letters and numbers]">

我将如何绕过这个？

Answer 1

首先我真的推荐你阅读Thomas Dondorf's answer关于 Puppeteer + reCAPTCHA 的话题。

如果你仍然愿意走这条路，那么请阅读下面的答案：

---

<input> 是type=hidden 的事实不会影响 puppeteer 与元素交互的方式，因为它已经在 DOM 中。您甚至可以通过运行$('#recaptcha-token').value 在 Chrome DevTools Console 选项卡中对其进行测试：您将毫无问题地获得它的价值。事实上，问题出在其他地方。

您目前面临两个问题：

1.) reCAPTCHA 位于 iframe 内，您需要进入 以让 Puppeteer 与所需元素进行交互。为此，您需要通过其元素句柄获取确切的 iframe，然后使用 contentFrame() 从“浏览器”上下文切换到“框架”上下文。

2.) 您还需要以下 安全禁用参数 来启动 puppeteer：args: ['--disable-web-security', '--disable-features=IsolateOrigins,site-per-process'] 因为由于同源策略，默认情况下不允许您进入 iframe。

reCAPTCHA 页面示例：https://patrickhlauke.github.io/recaptcha/

示例脚本：

const puppeteer = require('puppeteer')

async function getToken() {
  const browser = await puppeteer.launch({
    headless: false,
    args: ['--disable-web-security', '--disable-features=IsolateOrigins,site-per-process']
  })
  const page = await browser.newPage()

  try {
    await page.goto('https://patrickhlauke.github.io/recaptcha/')

    await page.waitForSelector('.g-recaptcha > div > div > iframe')
    const elementHandle = await page.$('.g-recaptcha > div > div > iframe')
    const frame = await elementHandle.contentFrame()
    const value = await frame.evaluate(() => document.getElementById('recaptcha-token').value)
    console.log(value)
  } catch (e) {
    console.error(e)
  }

  await browser.close()
}
getToken()