如何使用cypress将数据输入到iframe中的表单输入中？ [英] How do I enter data into a form input in an iframe using cypress?

问题描述

我一直在尝试使用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（myBu tton）.click（{force：true}）
}）
  

但问题是条带形式仍不注册输入值。这是发生了什么事的一些gif信息。 。基本上，表单不注册更改输入触发器。

有人知道如何使用cypress在iframe中将数据输入表单吗？

解决方案

以下代码段应该对您有用。我在此线程的@izaacdb帖子中复制/粘贴了它。

  cy.wait（5000）
 cy.get（'.__ PrivateStripeElement> iframe'）。then（$元素=> {
 
 const $ body = $ element.contents（）。find（'body'）
 
让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，（浏览器= {}，参数）=> {{
 if（browser.name === chrome）{
参数。 push（-disable-site-isolation-trials）; 
 return args; 
} 
}）； 
}; 
  

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?

解决方案

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

这篇关于如何使用cypress将数据输入到iframe中的表单输入中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！