如何使用cypress将数据输入iframe中的表单输入？

Question

我一直在尝试使用cypress.io测试条带结帐表单

如果有人设法让这个工作,请告诉我.我在这里找到了一个关于这个问题的帖子https://github.com/cypress-io/cypress/issues/136并基于此我想出了:

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

但问题是条带形式仍然没有注册输入值.以下是http://www.giphy.com/gifs/xT0xeEZ8CmCTVMwOU8发生的一些小故事.基本上,表单不会注册更改输入触发器.

有谁知道如何使用cypress将数据输入到iframe中的表单中？

Answer 1

以下代码段应该适合您.我在这个帖子中从@ izaacdb的帖子中复制/粘贴了它.

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

但是,为了使上述功能正常工作,您需要执行以下操作(从上面链接的同一个线程中复制/粘贴@ nerdmax的帖子):

非常感谢@Vedelopment @ brian-mann!

我测试了react-stripe-checkout组件并且它可以工作.

只需添加一些解决方案细节,这样可以节省其他时间.

chromeWebSecurity disable:

// cypress.json

{
  "chromeWebSecurity": false
}

--disable-site-isolation-trials:

检查: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

@user8888 的选择'.Input .InputElement'器对我不起作用。相反，我input通过每个属性的name属性来访问它。

        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

iframe 工作流程仍然相当笨重（直到实现此功能）。现在，您可以尝试强制执行几乎所有 DOM 交互：

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