How to solve reCAPTCHA in Puppeteer using extension

We wrote an in-depth article – “How to solve reCAPTCHA in Puppeteer using extension“

Have made a quick instruction beneath, and with the complete textual content you may learn on the link.

1. Putting in parts

Putting in Puppeteer and different required packages:
npm i puppeteer puppeteer-extra puppeteer-extra-plugin-stealth

2. Organising the extension

Obtain archive with the extension, and unzip it to the folder ./2captcha-solver within the root of the mission.

The extension has many settings, together with automated answer of the desired sort of captcha, help for proxy, and different settings. The settings can be found within the file ./frequent/config.js. So as to add settings for the automated reCAPTCHA V2 answer, you could open the file ./frequent/config.js and alter the worth of the autoSolveRecaptchaV2 discipline to true.

Subsequent, you could configure the extension:

1. Enter your API key within the extension settings file ./frequent/config.js. Your key have to be written to the worth of the apiKey discipline. You possibly can see and replica you are API key on the page. Instance: apiKey: "8080629c1221fdd82m8080000ff0c99c"
2. Disable opening the extension settings web page after set up. To do that, within the file ./manifest.json delete the next strains:

"options_ui": {
    "web page": "choices/choices.html",
    "open_in_tab": true
},

3. Browser Automation

Launching and initializing the extension in Puppeteer:

const puppeteer = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth');
const { executablePath } = require('puppeteer'); 

(async () => {
  const pathToExtension = require('path').be a part of(__dirname, '2captcha-solver');
  puppeteer.use(StealthPlugin())
  const browser = await puppeteer.launch({
    headless: false,
    args: [
      `--disable-extensions-except=${pathToExtension}`,
      `--load-extension=${pathToExtension}`,
    ],
    executablePath: executablePath()
  });

  const [page] = await browser.pages()
})();

3.1 Opening a web page

Opening a web page reCAPTCHA demo, and sending a captcha.

Utilizing web page.goto() we go to the web page reCAPTCHA demo. Subsequent, you could ship a captcha for an answer, this may be accomplished manually or mechanically.

In our instance, we are going to ship a captcha manually, for this we wait till the extension button with the CSS selector .captcha-solver is accessible, then click on on this button. After clicking on the button, the captcha will go to the service for an answer.

// Opening a web page
await web page.goto('https://2captcha.com/demo/recaptcha-v2') 

// Ready for the ingredient with the CSS selector ".captcha-solver" to be accessible
await web page.waitForSelector('.captcha-solver')
// Click on on the ingredient with the desired selector
await web page.click on('.captcha-solver')

3.2 Checking the captcha standing

After receiving a response from the service, the extension button .captcha-solver will change the worth of the info attribute data-state. By observing the worth of this data-state attribute, you may monitor the state of the extension. After fixing the captcha, the worth of this attribute will change to "solved".

Description of the values of the data-state attribute:

data-state="prepared" – The extension is able to resolve the captcha. To ship a captcha, you could click on on the button.
data-state="fixing" – Fixing the captcha.
data-state="solved" – Captcha has been efficiently solved
data-state="error" – An error when receiving a response or a captcha was not efficiently solved.

At this step, you could wait till the captcha is solved, after that the attribute worth will change to "solved", this may sign the profitable answer of the captcha. After this step, you are able to do the required actions.

// By default, waitForSelector waits for 30 seconds, however this time is often not sufficient, so we specify the timeout worth manually with the second parameter. The timeout worth is laid out in "ms".
await web page.waitForSelector(`.captcha-solver[data-state="solved"]`, {timeout: 180000})

4. Performing actions

After fixing the captcha, we will begin doing the required actions on the web page. In our instance, we are going to click on on the “Test” button to test the correctness of the obtained captcha answer. After efficiently passing the test, you will note the message “Captcha is handed efficiently!”.

// Click on on the "Test" button to test the profitable answer of the captcha.
await web page.click on("button[type="submit"]")

Congratulations, the captcha has been efficiently handed! The full source code of the example.