title: puppeteer - identify when reCaptcha challenge becomes active/visible
body: <p>Using this reCaptcha demo page: <a href="https://recaptcha-demo.appspot.com/recaptcha-v2-invisible.php" rel="nofollow noreferrer">https://recaptcha-demo.appspot.com/recaptcha-v2-invisible.php</a></p>
  
  <p>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.</p>
  
  <p>Via DevTools, I have found the HTML elements representing the visible reCaptcha challenge:
  <a href="https://i.stack.imgur.com/U609g.png" rel="nofollow noreferrer">recaptcha element tree</a></p>
  
  <p>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 <code>#rc-imageselect</code> 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.</p>
  
  <pre><code>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")
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Any help with puppeteer code to find the reCaptcha elements would be greatly welcomed. Thank you.</p>