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 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?

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

The '.Input .InputElement' selector from @user8888 did not work for me. Instead, I'm accessing each input by it's name attribute.

        cy.get(".__PrivateStripeElement > iframe").then(($element) => {
                const $body = $element.contents().find("body");

                let stripe = cy.wrap($body);
                stripe
                    .find('[name="cardnumber"]')
                    .click()
                    .type(MOCK_CC_NUMBER);

                stripe = cy.wrap($body);
                stripe
                    .find('[name="exp-date"]')
                    .click()
                    .type(MOCK_CC_EXP);

                stripe = cy.wrap($body);
                stripe
                    .find('[name="cvc"]')
                    .click()
                    .type(MOCK_CC_CVC);

                stripe = cy.wrap($body);
                stripe
                    .find('[name="postal"]')
                    .click()
                    .type(MOCK_CC_ZIP);
            });

Answer 3

I just spent way too long trying to get this working, none of the answer I found would work completely. I added my solution to the cypress github issue for iframes (there is a bit more context there), also putting it here to hopefully save others some time.

I stole the onIframeReady() function from this stackoverflow answer.

Basically what it is doing is checking if the iframe has loaded, if the iframe has loaded it will do $iframe.contents().find("body"); to switch to the contents. If it has not loaded it will hook that same code into the load event so it will run as soon as the iframe loads.

This is written as a custom command to allow use of cypress chaining after switching to the iframe, so put the following into your support/commands.js file:

Cypress.Commands.add("iframe", { prevSubject: "element" }, $iframe => {
  Cypress.log({
    name: "iframe",
    consoleProps() {
      return {
        iframe: $iframe,
      };
    },
  });

  return new Cypress.Promise(resolve => {
    onIframeReady(
      $iframe,
      () => {
        resolve($iframe.contents().find("body"));
      },
      () => {
        $iframe.on("load", () => {
          resolve($iframe.contents().find("body"));
        });
      }
    );
  });
});

function onIframeReady($iframe, successFn, errorFn) {
  try {
    const iCon = $iframe.first()[0].contentWindow,
      bl = "about:blank",
      compl = "complete";
    const callCallback = () => {
      try {
        const $con = $iframe.contents();
        if ($con.length === 0) {
          // https://git.io/vV8yU
          throw new Error("iframe inaccessible");
        }
        successFn($con);
      } catch (e) {
        // accessing contents failed
        errorFn();
      }
    };

    const observeOnload = () => {
      $iframe.on("load.jqueryMark", () => {
        try {
          const src = $iframe.attr("src").trim(),
            href = iCon.location.href;
          if (href !== bl || src === bl || src === "") {
            $iframe.off("load.jqueryMark");
            callCallback();
          }
        } catch (e) {
          errorFn();
        }
      });
    };
    if (iCon.document.readyState === compl) {
      const src = $iframe.attr("src").trim(),
        href = iCon.location.href;
      if (href === bl && src !== bl && src !== "") {
        observeOnload();
      } else {
        callCallback();
      }
    } else {
      observeOnload();
    }
  } catch (e) {
    // accessing contentWindow failed
    errorFn();
  }
}

Then you would call this like so from your tests:

cy.get('iframe.stripe_checkout_app')
  .iframe()
  .find('input:eq(0)')
  .type("4000056655665556")

You can .alias() after calling .iframe() to refer to it for the rest of your inputs or .get() the iframe several times, I'll leave that up to you to figure out.

Answer 4

The solution in this link is working for me. Basically, the steps are as below:

1. Set chromeWebSecurity to false in cypress.json
2. Add cypress command to get the iframe in command.js
3. Use the iframe command in the script

Answer 5

This doesn't directly answer your question, but after several days of trying to wrangle manipulating elements in the iframe using jQuery, re-implementing a bunch of stuff that Cypress already did, I smacked myself and started doing this:

Cypress.Commands.add('openiframe', () => {
    return cy.get("iframe[src^='/']").then(iframe => {
        cy.visit(Cypress.$(iframe).attr('src'), { timeout: Cypress.config("pageLoadTimeout") });
    });
});

That allowed me to just cy.openiframe().then(() => {}); and proceed as if the site I was testing didn't put a bunch of functionality in an iframe in the first place.

The downside is that you've got to finish up what you're doing not in the iframe before doing anything in the iframe, so you can't go back and forth too easily.

It might not work for your use case, but if/when it does, it's the easiest workaround I've found.

Answer 6

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

Answer 7

The iframe workflow is still pretty clunky (until this feature is implemented). For now, you can try forcing pretty much every DOM interaction:

cy.visit("https://jsfiddle.net/1w9jpnxo/1/");
cy.get("iframe").then( $iframe => {

    const $doc = $iframe.contents();
    cy.wrap( $doc.find("#input") ).type( "test", { force: true });
    cy.wrap( $doc.find("#submit") ).click({ force: true });
});

Answer 8

I released a plugin yesterday that adds a simple Cypress API for filling in Stripe Elements:

cy.fillElementsInput('cardNumber', '4242424242424242');

This plugin avoids cy.wait() calls, peeking into <iframe>s manually, and other awkward selectors.

Answer 9

For me, this iframe has a random behavior, so I used some of the code, but finally tried with force: true because the last value was failing. The name was not valid for me, I had to use a different attribute which is more specific.

    cy.get(".__PrivateStripeElement > iframe").then(($element) => {
        const $body = $element.contents().find("body");

    cy.wrap($body)
        .find('[data-elements-stable-field-name="cardNumber"]')
        .click()
        .type('value')

    cy.wrap($body)
        .find('[data-elements-stable-field-name="cardExpiry"]')
        .click()
        .type('value')

    cy.wrap($body)
        .find('[data-elements-stable-field-name="cardCvc"]')
        .click()
        .type('value', { force: true });

Answer 10

The other answers didn't work for me because the name attribute has changed. Here's what I used:

cy.get('.__PrivateStripeElement > iframe').then(($element) => {
      const $body = $element.contents().find('body')

      let stripe = cy.wrap($body)
      stripe.find('input[name="number"]').click().type('4242424242424242')
      stripe = cy.wrap($body)
      stripe.find('input[name="expiry"]').click().type('4242')

      stripe = cy.wrap($body)
      stripe.find('input[name="cvc"]').click().type('424')

      stripe = cy.wrap($body)
      stripe.find('input[name="postalCode"]').click().type('92222')
})