puppeteer - identify when reCaptcha challenge becomes active/visible

user_13751866 0
Viewed 4019

Using this reCaptcha demo page: https://recaptcha-demo.appspot.com/recaptcha-v2-invisible.php

Using puppeteer, my goal is to wait for and identify when the challenge (having to pick specific images from a grid) becomes visible on the page. I am NOT asking how to bypass or solve the reCaptcha, just to know when it is active and ready to be solved.

Via DevTools, I have found the HTML elements representing the visible reCaptcha challenge: recaptcha element tree

Unfortunately, I have been unable to get puppeteer to "find" the specific elements. The following code will ALWAYS print "NOT found" even when the reCaptcha is clearly visible in the browser and the #rc-imageselect element is visible in the element tree. I have experimented with the main frame, child frames, etc and have been unable to get puppeteer to find the reCaptcha elements.

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")
}

Why is this necessary? On real-world pages (not this demo page), the reCaptcha challenge won't be triggered for some users, and will only pop up for some. My goal is identify when it pops up, then choose how to handle the reCaptcha, either by solving (separately, by hand), backing off, or abandoning entirely.

Any help with puppeteer code to find the reCaptcha elements would be greatly welcomed. Thank you.

invisible-recaptcha puppeteer node.js recaptcha chromium
3 Answers

There are some errors which never goes to the console so remains unrecognized and caused by security issues inside iframes (which is always a critical point with Chrome/Chromium browser). You will need the following security disabling args to launch puppeteer, because due to the same-origin policy you are not allowed to go inside the iframe by default.

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

These args will be always required in case of reCaptcha scenarios.

user_124125950

You don't need to go into the iframe DOM, you can figure it out by inspecting the iframe element:

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

In my experience you don't have to launch with special flags when dealing with captcha.

user_9660230

This also works for me

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

but for some reason, height is always 150 unless i do

await page.waitFor(8000)

I'm running in headful so I can see that the captcha is visible already... but it only shows height >150 after an 8 second wait.. Very annoying

user_55959810
Related