How to click on the Hcaptcha using puppeteer-extra

Question

I'm using puppeteer-extra and trying to click on recaptcha and I can't find a solution for two days in google I tried more than one way and it didn't work I want it to click on the checkbox automatically using puppeteer

My problem is not in solving the captcha, my problem is in clicking on its checkbox

This is iframe Selector :
#app-mount > div.app-1q1i1E > div > div > div > section > div > div.flexCenter-3_1bcw.flex-1O1GKY.justifyCenter-3D2jYp.alignCenter-1dQNNs > div > iframe
This is iframe :
<iframe src="https://newassets.hcaptcha.com/captcha/v1/f9bf301/static/hcaptcha-checkbox.html#id=29x2xvbwuudm&amp;host=discord.com&amp;sentry=true&amp;reportapi=https%3A%2F%2Faccounts.hcaptcha.com&amp;recaptchacompat=true&amp;custom=false&amp;hl=en&amp;tplinks=on&amp;sitekey=f5561ba9-8f1e-40ca-9b5b-a0b3f719ef34&amp;theme=dark" title="widget containing checkbox for hCaptcha security challenge" tabindex="0" frameborder="0" scrolling="no" data-hcaptcha-widget-id="29x2xvbwuudm" data-hcaptcha-response="" style="width: 303px; height: 78px; overflow: hidden;"></iframe>
--------
This is checkbox :
<div id="checkbox" aria-haspopup="true" aria-checked="false" role="checkbox" tabindex="0" aria-live="assertive" aria-labelledby="a11y-label" style="position: absolute; width: 28px; height: 28px; border-width: 1px; border-style: solid; border-color: rgb(245, 245, 245); border-radius: 4px; background-color: rgb(250, 250, 250); top: 0px; left: 0px;"></div>

await page.waitForFunction(`#app-mount > div.app-1q1i1E > div > div > div > section > div > 
div.flexCenter-3_1bcw.flex-1O1GKY.justifyCenter-3D2jYp.alignCenter-1dQNNs > div > iframe`)

await page.click(`#checkbox`),

Answer 1

Your selector seems to be wrong. When hcaptcha launches, it generates random class names (hashes), so you can't try on your machine, get the class name, and put it in production, because every execution is a different class name.