How can I use Google reCAPTCHA with Cypress?

Testing Google reCAPTCHA with Cypress can be challenging because reCAPTCHA is designed to prevent automated access. However, there are a few approaches you can take. Here's how you can approach this problem:

1. Disable reCAPTCHA in Test Environment:

- The recommended approach is to disable reCAPTCHA in your test environment. This ensures Cypress can run tests without interference from reCAPTCHA.

- You can achieve this by using environment variables to conditionally render reCAPTCHA. If an environment variable like NODE_ENV is set to 'test', then reCAPTCHA is not loaded.

2. Using a Bypass Token:

- Some reCAPTCHA implementations allow the use of a bypass token specifically for testing. This bypass token simulates the reCAPTCHA verification process.

- Check your reCAPTCHA configuration to see if a test token is available.

3. Mocking the reCAPTCHA Response:

- You can intercept the network request made to Google's reCAPTCHA servers and mock a successful response. This allows Cypress to proceed as if the reCAPTCHA challenge was successfully completed.

4. Using Cypress Intercept:

- With Cypress's cy.intercept() command, you can intercept the reCAPTCHA API request and provide a mock response.

- Example:

cy.intercept('POST', 'https://www.google.com/recaptcha/api2/reload', (req) => {
  req.reply({
    body: 'OK',
  });
});

5. Automating the Challenge (Not Recommended):

- While technically possible, automating the reCAPTCHA challenge is generally not recommended. Google actively works to prevent this, and it's against their terms of service. It also makes your tests brittle.

Here is an example of disabling reCAPTCHA based on environment variables:

In your React component (or wherever you're using reCAPTCHA):

{process.env.NODE_ENV !== 'test' && (
       sitekey="YOUR_RECAPTCHA_SITE_KEY"
    onChange={onChange}
  />
)}

In your Cypress test:

it('should submit the form without reCAPTCHA in test environment', () => {
  cy.visit('/your-form-page');
  cy.get('#name').type('John Doe');
  cy.get('#email').type('john.doe@example.com');
  cy.get('button[type="submit"]').click();
  cy.contains('Form submitted successfully').should('be.visible');
});

By disabling reCAPTCHA in the test environment or mocking its response, you can effectively use Cypress to test forms protected by reCAPTCHA without actually solving the challenge.

Learn more about this