How to Bypass CAPTCHA in Cypress

[CAPTCHAFORUM]

CAPTCHAs are an essential tool for securing websites against automated attacks. However, for developers working with automated testing frameworks like Cypress, CAPTCHAs can pose a significant challenge. This guide will demonstrate how to bypass CAPTCHA in Cypress using 2Captcha, a reliable CAPTCHA-solving service that makes this process simple and efficient.

Why 2Captcha?​

2Captcha is a popular service that specializes in solving various types of CAPTCHAs, including image, text, and reCAPTCHA challenges. With its API, you can easily integrate CAPTCHA-solving capabilities into your Cypress tests. Some benefits of using 2Captcha include:

• High Accuracy: Real people solve CAPTCHAs, ensuring high accuracy.
• Wide Support: Works with different types of CAPTCHAs, including the latest versions of reCAPTCHA and hCaptcha.
• Affordable Pricing: Cost-effective for developers and QA teams.
• Fast Response: Typically solves CAPTCHAs in just a few seconds.

Step-by-Step Guide to Bypass CAPTCHA in Cypress​

Here’s how to bypass CAPTCHA in your Cypress test automation setup:

Step 1: Create a 2Captcha Account​

1. Go to 2Captcha and create an account.
2. Add funds to your account to ensure uninterrupted CAPTCHA solving.
3. Retrieve your API key from the account dashboard.

Step 2: Install Required Dependencies​

Cypress doesn’t have a built-in way to handle CAPTCHAs. You’ll need to interact with the 2Captcha API using a Node.js HTTP client like Axios. Install Axios by running the following command in your project directory:

npm install axios

Step 3: Create a Utility Function for CAPTCHA Solving​

In your Cypress project, create a new file (e.g., captchaHelper.js) and add the following code to handle CAPTCHA solving:

const axios = require('axios');

async function solveCaptcha(apiKey, siteKey, url) {
  try {
    // Submit CAPTCHA solving request to 2Captcha
    const submitResponse = await axios.post('https://2captcha.com/in.php', null, {
      params: {
        key: apiKey,
        method: 'userrecaptcha',
        googlekey: siteKey,
        pageurl: url,
        json: 1
      }
    });

    if (submitResponse.data.status !== 1) {
      throw new Error('Failed to submit CAPTCHA for solving');
    }

    const requestId = submitResponse.data.request;

    // Poll for the CAPTCHA solution
    while (true) {
      await new Promise(resolve => setTimeout(resolve, 5000)); // Wait 5 seconds

      const resultResponse = await axios.get('https://2captcha.com/res.php', {
        params: {
          key: apiKey,
          action: 'get',
          id: requestId,
          json: 1
        }
      });

      if (resultResponse.data.status === 1) {
        return resultResponse.data.request; // CAPTCHA solution
      }

      if (resultResponse.data.request !== 'CAPCHA_NOT_READY') {
        throw new Error('Error solving CAPTCHA: ' + resultResponse.data.request);
      }
    }
  } catch (error) {
    throw new Error('Error in CAPTCHA solving process: ' + error.message);
  }
}

module.exports = solveCaptcha;

Step 4: Integrate CAPTCHA Solving in Your Cypress Test​

Use the utility function in your Cypress test script. Here’s an example of how to incorporate it:

const solveCaptcha = require('./captchaHelper');

describe('Bypass CAPTCHA Test', () => {
  it('should bypass CAPTCHA and proceed with the test', async () => {
    const apiKey = 'YOUR_2CAPTCHA_API_KEY'; // Replace with your 2Captcha API key
    const siteKey = 'CAPTCHA_SITE_KEY'; // Replace with the site key for the CAPTCHA
    const url = 'https://example.com'; // Replace with the URL of the page containing the CAPTCHA

    // Solve the CAPTCHA
    const captchaSolution = await solveCaptcha(apiKey, siteKey, url);

    // Visit the page and fill in the CAPTCHA solution
    cy.visit(url);
    cy.get('#g-recaptcha-response').then($el => {
      $el.val(captchaSolution); // Set the CAPTCHA response value
    });

    // Submit the form or perform the next action
    cy.get('#submit-button').click();

    // Add assertions to validate successful bypass
    cy.contains('Welcome!').should('be.visible');
  });
});

Step 5: Run Your Test​

Run your Cypress test as usual:

npx cypress open

Observe as your test seamlessly bypasses the CAPTCHA and continues execution.