如何使用Puppeteer抓取并找到type = hidden的输入？

Question

我正在编写一个机器人，在完成任务后，我将使用该机器人抓取Recaptcha令牌。验证码加载到页面后，我尝试使用await page.evaluate(() => document.getElementById('recaptcha-token').value)，但是每次遇到相同的错误时，都会出现Uncaught (in promise) Error: Evaluation failed: TypeError: Cannot read property 'value' of null。我认为该错误部分是由于我要获取的元素的类型为hidden：`引起的。我将如何绕过这个？

Answer 1

首先，我真的建议您阅读Puppeteer + reCAPTCHA主题上的Thomas Dondorf's answer。

如果您仍然愿意这样做，请在下面阅读我的答案：

---

您当前面临两个问题：

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

2。）您还需要以下args启动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()