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