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

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.