cypress를 사용하여 iframe의 양식 입력에 데이터를 입력하는 방법은 무엇입니까?

Question

나는 cypress.io를 사용하여 스트라이프 체크 아웃 양식을 테스트하려고 시도했습니다.

누구든지이 기능을 작동 시키려면 알려주십시오.

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

그러나 문제는 스트라이프 형태는 여전히 입력 값을 등록하지 않는다는 것입니다 : 여기 https://github.com/cypress-io/cypress/issues/136 및 기반이에 내가 생각 해낸 문제에 스레드를 발견했다. 여기에 무슨 일이 일어나는지에 대한 약간의 GIF가있다. http://www.giphy.com/gifs/xT0xeEZ8CmCTVMwOU8. 기본적으로 폼은 변경 입력 트리거를 등록하지 않습니다.

누구나 사이 프러스를 사용하여 iframe의 양식에 데이터를 입력하는 방법을 알고 있습니까?

Answer 1

iframe 워크 플로우는 여전히 (this feature이 구현 될 때까지) 꽤 clunky합니다. 지금 당장은 모든 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 }); 
});