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

Question

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 http

Answer 1

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;
    }
  });
};

Answer 2

in order to avoid using:

cy.wait(5000)

I found a better way to do it following the instructions cypress provides in this tutorial about how to work with iframes

   cy.get('iframe[name="__privateStripeFrame5"]')
    .its("0.contentDocument.body")
    .should("not.be.empty")
    .then((body) => {
      cy.wrap(body)
        .find("[name=cardnumber]")
        .type("6011111111111117", { force: true });
   });