Cypress recaptcha command

commands.js

Cypress.Commands.add("clickRecaptcha", () => {
  cy.window().then(win => {
    win.document
      .querySelector("iframe[src*='recaptcha']")
      .contentDocument.getElementById("recaptcha-token")
      .click();
  });
});

1. For reCAPTCHA v2, use the following test key:
   const globalSettings: RecaptchaSettings = {siteKey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'};

2. In cypress.config.ts file set chromeWebSecurity: false

3. Click recaptcha:

 cy.get('iframe[src*=recaptcha]')
      .its('0.contentDocument')
      .should(d => d.getElementById('recaptcha-token').click())

Here's my take (reCAPTCHA v2), which doesn't require waiting:

cy.get('iframe[src*=recaptcha]')
        .its('0.contentDocument')
        .should(d => d.getElementById('recaptcha-token').click())

This is interesting. I was able to get it to work as well as the following code here:

        cy.get('iframe[src*=recaptcha]').then(($iframe) => {
            const iframeDocument = $iframe.contents();
            const recaptchaToken = iframeDocument.find('#recaptcha-token');
            recaptchaToken.click();
        });

However, the next day after a few tests it would not work and was not able to find the #recaptcha-token or the .its() would fail. This is what my team was seeing while reviewing a PR I'd created. I had set up the chromewebsecurity to false and was using the correct test keys provided by Google.

I ended up spending the entire day troubleshooting and trying to figure out what was happening. After a lot of frustrations, I hard reloaded and emptied the cache and now both versions of the click work!!! I have no clue why or what is going on frankly.