CODEWITHSUNDEEP
testingcypresse-commercee2ecypress-iframe
SimonB88
SimonB88

Reputation: 41

Clicking on button in iframe in Cypress

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

First step

Then, waiting for secure payment preloader to finish up:

cy.wait(20000)

Preloader

Then, trying to catch the Process button by suggestions:

Secure page

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:

First attempt Second attempt

Maybe anyone had something like that? Thanks.

Upvotes: 3

Views: 1005

Answers (2)

Fody
Fody

Reputation: 31954

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"]')

Upvotes: 0

Alapan Das
Alapan Das

Reputation: 18634

How about you try this:

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

Upvotes: 0

Related Questions