Testing forms with reCAPTCHA can be a challenging task since reCAPTCHA is designed to differentiate between humans and bots. In this guide, we will walk through how to solve and test reCAPTCHA forms using Playwright and a reCAPTCHA solving service, leveraging a reusable component class in TypeScript for clean and efficient implementation.

Examples of reCAPTCHA forms
Table of Contents
- Introduction
- Setting Up Anti-Captcha
- Creating the Component Class
- Integrating the Component Class with Playwright in a spec
- Testing the reCAPTCHA Form
- Handling Errors and Debugging
- Conclusion
Introduction
When automating form submissions with Playwright, reCAPTCHA often poses a hurdle. In this post, we’ll use the Anti-Captcha service to solve reCAPTCHA tasks dynamically. Anti-Captcha’s RecaptchaV2TaskProxyless
is ideal for Playwright, allowing us to handle reCAPTCHA tasks without requiring proxies.
We’ll also implement a TypeScript component class to encapsulate the Anti-Captcha functionality for easy reuse and better organization.
Setting Up Anti-Captcha
To begin, sign up for an account on your favorite reCAPTCHA solving service, like Anti-Captcha, and obtain your API key. This is not an endorsement for the service, it’s just one of them. Most of these online services offer similar prices and solutions, just pick one you like.
This key will be used to communicate with the Anti-Captcha service.
Add any keys given to you from them to your ENV variables file:
- ANTICAPTCHA_API_KEY=???????????????????????????????????
- ANTICAPTCHA_WEBSITE_KEY=?????????????????????????????
Creating the Component Class
The main logic for creating the Anti-Captcha task, checking for the solution, and submitting it is implemented in a reusable TypeScript class. Here is the full class with payload interfaces:
Here’s a simplified overview of the key methods:
- createTask: Sends a request to Anti-Captcha to create a new task.
- getTaskSolution: Polls the Anti-Captcha API for the task solution.
- submitSolution: Uses the solution to solve the reCAPTCHA in the browser.
There are several tricks I use in the class, like hiding the reCAPTCHA when it’s trying to solve it, and in my case calling a local `formSubmit()` JavaScript method.
Integrating the Component Class with Playwright in a spec
Now, let’s integrate the Anti-Captcha class into a Playwright test specification to automate a reCAPTCHA-protected form:
Testing the reCAPTCHA Form
With the integration in place, you can now test various scenarios:
- Successful Submission:
- Verify that the form submits successfully with the correct reCAPTCHA solution.
- Failed CAPTCHA:
- Test how the form behaves when an incorrect or expired CAPTCHA is submitted.
- Edge Cases:
- Handle scenarios like Anti-Captcha API timeouts or invalid site keys.
Handling Errors and Debugging
When working with Anti-Captcha and Playwright, you may encounter issues such as:
- Task Creation Failures: Ensure your API key and site key are correct.
- Solution Timeouts: Increase the polling interval or set a longer timeout when waiting for a solution.
- Browser Script Errors: Use Playwright’s page.evaluate to debug the execution of client-side scripts.
Most of the online captcha solving services offer a way to send feedback, like report if a solution they provided was wrong so they can improve their service but also refund you for that solution.
Conclusion
Automating tests for reCAPTCHA forms with Playwright becomes manageable with the help of an online service like Anti-Captcha and a well-structured TypeScript component class. This approach saves time and ensures your tests remain reliable and scalable.