Cypress - testing a contact form with google recaptcha

Question

How can I test a contact form with google recaptcha ?

I want to test if "We will respond you soon." message appear.

Answer 1

After some attempts, I came up with this:

Cypress.Commands.add('confirmCaptcha', function () {
  cy.get('iframe')
    .first()
    .then((recaptchaIframe) => {
      const body = recaptchaIframe.contents()
      cy.wrap(body).find('.recaptcha-checkbox-border').should('be.visible').click()
    })
})

Also make sure you have this in your cypress.json file, otherwise iFrames cannot be accessed:

"chromeWebSecurity": false

Answer 2

I created my own Cypress command in order to test Google reCAPTCHA

Cypress.Commands.add('solveGoogleReCAPTCHA', () => {
  // Wait until the iframe (Google reCAPTCHA) is totally loaded
  cy.wait(500);
  cy.get('#g-recaptcha *> iframe')
    .then($iframe => {
      const $body = $iframe.contents().find('body');
      cy.wrap($body)
        .find('.recaptcha-checkbox-border')
        .should('be.visible')
        .click();
    });
});

I combined this command with the instructions given by Google:

https://developers.google.com/recaptcha/docs/faq#id-like-to-run-automated-tests-with-recaptcha.-what-should-i-do

So, I had to do minor changes to my source code:

export const RECAPTCHA_SITE_KEY: string = window.Cypress
  ? '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'
  : 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';

Answer 3

This works for me, which has no need for a cy.wait(500) or other fixed amount of time, because it uses the cypress implicit wait in its for the iframe contents to load.

         cy.get('iframe')
            .first()
            .its('0.contentDocument.body')
            .should('not.be.undefined')
            .and('not.be.empty')
            .then(cy.wrap)
            .find('#recaptcha-anchor')
            .should('be.visible')
            .click();

This can be added as a custom command as well. It is based off of this blog post: https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/