Clicking on button in iframe in Cypress

Question

Ran into the issue, where the test code should click the button Process in the iframe. Used npm i cypress-iframe lib, but came up to nothing. Cypress could not find the button.

Tried cy.iframe('[class="resp-iframe"]').find('resp-iframe[id="submit"]')

HTML of the problem

Tried the other ways to click on iframe button:

cy.get('iframe[class="resp-iframe"]').then($element => {
             const $body = $element.contents().find('body')
             cy.wrap($body).find('resp-iframe[class="btn btn-block btn-primary"]').eq(0).click();
         })

also

cy.get('[class="resp-iframe"]').then($element => {
            const $body = $element.contents().find('body')
            let stripe = cy.wrap($body)
            stripe.find('[class="resp-iframe"]').click(150,150)
          })

and

cy.iframe('#resp-iframe').find('[name="submitButton"]')

Error Error 2

Updated FYI: The first part of code - clicking the Google button in bottom-right:

const getIframeBody = () => {
            // get the iframe > document > body
            // and retry until the body element is not empty
            return cy
            .get('[id="popup-contentIframe"]')
            .its('0.contentDocument.body')
            // wraps "body" DOM element to allow
            // chaining more Cypress commands, like ".find(...)"
            // https://on.cypress.io/wrap
            .then(cy.wrap)
          }
getIframeBody().find('[id="payWithout3DS"]').click()

Then, waiting for secure payment preloader to finish up:

cy.wait(20000)

Then, trying to catch the Process button by suggestions:

cy.iframe('[name="AcsFrame"]').find('#submit').click()

or

cy.iframe('[class="resp-iframe"]').find('[id="submit"]')

whole code part looks:

const getIframeBody = () => {
            // get the iframe > document > body
            // and retry until the body element is not empty
            return cy
            .get('[id="popup-contentIframe"]')
            .its('0.contentDocument.body')
            // wraps "body" DOM element to allow
            // chaining more Cypress commands, like ".find(...)"
            // https://on.cypress.io/wrap
            .then(cy.wrap)
          }
      getIframeBody().find('[id="payWithout3DS"]').click()
      cy.wait(20000)
      cy.iframe('[name="AcsFrame"]').find('#submit').click()

But still, getting:

Maybe anyone had something like that? Thanks.

What is the error you are getting? – Alapan Das Aug 26 '22 at 10:38 — Alapan Das, Aug 26 '22 at 10:38
Updated with the screenshots in the post. – SimonB88 Aug 26 '22 at 12:07 — SimonB88, Aug 26 '22 at 12:07

score 0 · Answer 1 · answered Aug 26 '22 at 12:15

0

How about you try this:

cy.iframe('[name="AcsFrame"]').find('#submit').click()

answered Aug 26 '22 at 12:15

Alapan Das

17,144
3
29
52

Updated the post FYI. – SimonB88 Sep 06 '22 at 08:05

score 0 · Answer 2 · answered Aug 27 '22 at 01:21

0

You don't need to repeat the resp-iframe inside the .find().

The selector .find('resp-iframe[id="submit"]') means look for HTML like this: <resp-iframe id="submit"> but the element you want is <input id="submit">.

Everything else looks ok

cy.iframe('[class="resp-iframe"]').find('[id="submit"]')

answered Aug 27 '22 at 01:21

Fody

23,754
3
20
37

Updated the post FYI. – SimonB88 Sep 06 '22 at 08:04

Clicking on button in iframe in Cypress

2 Answers2