Cypress recaptcha command

commands.js

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

Using this helped... tho when I click my Captcha it gives me second validation (click images). is there a way to get around this? if so how to?
I'm new to Cy and captcha validation

You have to use test key for captcha https://developers.google.com/recaptcha/docs/faq#id-like-to-run-automated-tests-with-recaptcha.-what-should-i-do

I've read that article, yet I can't seem to understand where the test key should be stored to send it. should I use a cy.route? to stub with the test key? or is another thing I need to do?

You use it on both backend and frontend. On frontend you are passing it to recaptcha component.

hmmm, then it's not easy way to do it with only Cypress on the front end. I should request my backend dev to also apply it on his code, am I right?

Sure. It's understandable— you cannot use robot (cypress) to pass captcha test. 😃 This is exactly why they exist in the first place.

Thanks, still works

Hi guys, on this point would anyone have evidence of this working? I'm looking at a scenario with recaptcha validation and need to learn how to implement it in my tests.

Thx a lot!

How to pass recaptcha v3 in Cypress ?

Did you try this one? You can try to find what element you must target with querySelector.

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())

I managed to resolve it by passing my script.

`

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();
`

In your package.json:

 {
    "ng-recaptcha": "^7.0.1"
  },

how to set

1. You must have recaptcha configured for test mode: https://developers.google.com/recaptcha/docs/faq#id-like-to-run-automated-tests-with-recaptcha.-what-should-i-do
2. There should be only one recaptcha on the page.
3. use it like cy.clickRecaptcha()

how to configured setep number 1?

How to pass recaptcha v3 in Cypress ?

I have the same problem. Captcha v3. Please anyone advise how can we deal with v3 in cypress test.

This does not work for this type of captcha

Of course it won't work. Because this is real Captcha, you can't expect to be allowed to pass real Captcha with any automated software. This is for Captcha in developer mode only. It is for e2e tests and not for "solving" captcha's........

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 ();
`
Em seu package.json:

 {
    "ng-recaptcha": "^7.0.1"
  },

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

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

`"chromeWebSecurity": false`

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 ();
`
Em seu package.json:

 {
    "ng-recaptcha": "^7.0.1"
  },

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

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

`"chromeWebSecurity": false`

Hi, I wonder what is the purpose of the contentDocument ? Also on my end seems to not work even if we used both google recommendation and the solution you provided.

Hi,
Could you please explain step by step how should we store site key and secret key described here: https://developers.google.com/recaptcha/docs/faq#id-like-to-run-automated-tests-with-recaptcha.-what-should-i-do ?

Site key is stored on both frontend and backend, secret key is stored on a backend only. Usually this is done via environment variables. For frontend — while building it, for backend — they are passed by something like kubernetes at the application start

Site key is stored on both frontend and backend, secret key is stored on a backend only. Usually this is done via environment variables. For frontend — while building it, for backend — they are passed by something like kubernetes at the application start

Spasibo!

Spasibo!

Всегда пожалуйста! 🙂

How can I bypass or automate this kind of Captcha Verification using cypress

I've already said — this is for TESTMODE captcha ONLY!

You must have recaptcha configured for test mode: https://developers.google.com/recaptcha/docs/faq#id-like-to-run-automated-tests-with-recaptcha.-what-should-i-do

Hello @Dema,
I have read the article, but I don't understand where exactly I should store the sitekey and secretKey in cypress!
in the cypress.json or where?

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

the verification is displayed with the pictures but I don't want to see it displayed.

This does not work for this type of captcha

Any solution for that? Please

Why are you guys keep asking how to pass automation blocking software using automation software? It is meant to not to be passed like that by design and byt its solely purpose

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.