Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I enter data into a form input in an iframe using cypress?

I have been trying to test a stripe checkout form using cypress.io

If anyone has managed to get this to work please let me know. I found a thread on the matter here https://github.com/cypress-io/cypress/issues/136 and based on this I came up with:

   cy.get('iframe.stripe_checkout_app')
      .wait(10000)
      .then($iframe => {
        const iframe = $iframe.contents()
        const myInput0 = iframe.find('input:eq(0)')
        const myInput1 = iframe.find('input:eq(1)')
        const myInput2 = iframe.find('input:eq(2)')
        const myButton = iframe.find('button')

        cy
          .wrap(myInput0)
          .invoke('val', 4000056655665556)
          .trigger('change')
        cy
          .wrap(myInput1)
          .invoke('val', 112019)
          .trigger('change')

        cy
          .wrap(myInput2)
          .invoke('val', 424)
          .trigger('change')

        cy.wrap(myButton).click({ force: true })
      })

But the problem is that the stripe form still does not register the input values. Here is a little gif of what happens http://www.giphy.com/gifs/xT0xeEZ8CmCTVMwOU8. Basically, the form does not register the change input trigger.

Does anyone know how to enter data into a form in an iframe using cypress?

like image 436
Josh Pittman Avatar asked Nov 16 '17 08:11

Josh Pittman


People also ask

Does Cypress work with iframe?

Users of Cypress need to access elements in an <iframe> and additionally access an API to “switch into” and switch back out of different iframes. Currently the Test Runner thinks the element has been detached from the DOM (because its parent document is not the expected one).

How do I change the iframe in Cypress?

Browser Automation with Cypress and Gherkin 2022 For the frame implementation in Cypress, we have to add the statement import 'cypressiframe'in the code. A tagname called frame/iframe is used to represent frames in the html code. Cypress command frameload is used to move the focus from the main page to the frame.

How do you handle nested iframe in Cypress?

The solution is to create an iframe command that returns a promise upon iframe loading completion. These commands, aliased as iframe() , can be chained together to deal with nested iframes.


1 Answers

The following snippet should work for you. I copied/pasted it from @izaacdb's post in this thread.

cy.wait(5000)
cy.get('.__PrivateStripeElement > iframe').then($element => {

  const $body = $element.contents().find('body')

  let stripe = cy.wrap($body)
  stripe.find('.Input .InputElement').eq(0).click().type('4242424242424242')
  stripe = cy.wrap($body)
  stripe.find('.Input .InputElement').eq(1).click().type('4242')
  stripe = cy.wrap($body)
  stripe.find('.Input .InputElement').eq(2).click().type('424')
})

However, in order for the above to work, you need to do the following (copied/pasted from @nerdmax's post from the same thread linked above):

Big Thanks to @Vedelopment @brian-mann !

I tested with react-stripe-checkout component and it works.

Just add some solution details so it may save others some time.

chromeWebSecurity disable:

// cypress.json

{
  "chromeWebSecurity": false
}

--disable-site-isolation-trials:

Check: https://docs.cypress.io/api/plugins/browser-launch-api.html# AND #1951

// /plugins/index.js

module.exports = (on, config) => {
  on("before:browser:launch", (browser = {}, args) => {
    if (browser.name === "chrome") {
      args.push("--disable-site-isolation-trials");
      return args;
    }
  });
};
like image 77
p4t Avatar answered Oct 07 '22 00:10

p4t