How to bypass captcha using Puppeteer

How to Bypass CAPTCHA in Puppeteer

What is Puppeteer

Puppeteer is a JavaScript library that provides a high-level API to control Chrome or Firefox over the DevTools Protocol or WebDriver BiDi. Puppeteer runs in headless (no visible UI) mode by default but can be configured to run in a visible ("headful") browser.

How You Can Bypass CAPTCHAs Using Puppeteer

You can bypass CAPTCHAs using Puppeteer alone or with the 2Captcha extension.

What Types of CAPTCHA You Can Bypass Using Puppeteer (with 2Captcha Extension)

reCaptcha (v2, v3, Enterprise)
FunCaptcha
Cloudflare Turnstile
Amazon WAF
Image CAPTCHA
Geetest
and other types of CAPTCHA

In the step-by-step description below, we will describe how to solve the CAPTCHA on the page 2Captcha demo.

1. Installing Components

Install Puppeteer and other required packages:

npm i puppeteer puppeteer-extra puppeteer-extra-plugin-stealth

2. Setting Up the Extension

Download the archive with the extension and unzip it to the folder ./2captcha-solver in the root of your project.
The extension has many settings, including automatic CAPTCHA solving, proxy support, and other settings. These settings are available in the file ./common/config.js.

To add settings for automatic reCAPTCHA V2 solution:
- Open the file ./common/config.js and change the value of the autoSolveRecaptchaV2 field to true.
Configure the extension:
- Enter your API key in the extension settings file ./common/config.js. Your key must be written to the value of the apiKey field. You can see and copy your API key on the page.
Example:
```
apiKey: "8080629c1221fdd82m8080000ff0c99c"
```
Disable the opening of the extension settings page after installation. To do this, remove the following lines in ./manifest.json:
```
"options_ui": {
  "page": "options/options.html",
  "open_in_tab": true
}
```

3. Browser Automation

Launch and initialize 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').join(__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 Page

Open the page 2Captcha demo, and send a CAPTCHA.

Using page.goto(), navigate to the page. You can send the CAPTCHA for solution either manually or automatically.

In this example, we send the CAPTCHA manually by waiting for the extension button with the CSS selector .captcha-solver to be available, then click on this button. After clicking the button, the CAPTCHA will be sent to the service for solution.

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

// Waiting for the element with the CSS selector ".captcha-solver" to be available
await page.waitForSelector('.captcha-solver');

// Click on the element with the specified selector
await page.click('.captcha-solver');

3.2 Checking the CAPTCHA Status

After receiving a response from the service, the extension button .captcha-solver will change the value of the data-state attribute. By observing the value of this attribute, you can monitor the state of the extension. After solving the CAPTCHA, the value of this attribute will change to "solved".

Description of the values of the data-state attribute:

Attribute	Description
`data-state="ready"`	The extension is ready to solve the CAPTCHA. Click the button to send it.
`data-state="solving"`	The CAPTCHA is being solved.
`data-state="solved"`	CAPTCHA has been successfully solved.
`data-state="error"`	There was an error receiving a response or the CAPTCHA was not solved.

At this point, wait until the data-state changes to "solved", indicating that the CAPTCHA was successfully solved. Then, you can proceed with the necessary actions.

// Wait for the CAPTCHA to be solved
await page.waitForSelector('.captcha-solver[data-state="solved"]', { timeout: 180000 });

4. Performing Actions

Once the CAPTCHA is solved, you can start performing the necessary actions on the page. In this example, we will click the "Check" button to verify the correctness of the CAPTCHA solution. After passing the check, you will see the message "Captcha is passed successfully!"

// Click on the "Check" button to verify the CAPTCHA solution
await page.click("button[type='submit']");

Congratulations, the CAPTCHA has been successfully passed!

The full example code is available on GitHub here.

Useful Information

The extension has many settings, including automatic CAPTCHA solution for specified types and support for proxies. All these settings are available in the file ./common/config.js in the folder with the unpacked extension.
To automatically solve reCAPTCHA V2, change the value of autoSolveRecaptchaV2 to true in the ./common/config.js file.
You can use sandbox mode for testing. In sandbox mode, sent CAPTCHAs will be sent to you for manual solving. Learn more about the sandbox mode here.
Puppeteer running in headless mode does not support loading extensions. To solve this problem, you can use Xvfb.

Guides

Conclusion

Integrating the 2Captcha extension with Puppeteer enables efficient solving of various CAPTCHA types, significantly simplifying automation tasks such as web scraping, testing, and bot development. By following the provided instructions and examples, you can easily implement CAPTCHA solving in your JavaScript projects.

For a deeper understanding of the 2Captcha API and extension capabilities, visit the official documentation. This guide will help you optimize workflows and enhance automation efficiency.