赛普拉斯 - iframe 处理答案

【问题标题】：Cypress - iframe handling赛普拉斯 - iframe 处理
【发布时间】：2021-12-07 09:44:08
【问题描述】：

我有一些代码试图捕获 iframe 中的元素，但我总是被抛出一个错误

it('Send Medication',function(){
       cy.get('.aut-iframe') 
       .should(iframe => expect(iframe.contents().find('body')).to.exist)
       .then(iframe => cy.wrap(iframe.contents().find('body')))
       .within({}, $iframe => {
            cy.get('.pending-medication-check-box').click({force:true})

这是我得到的错误：

最后，这是 iframe 信息：

【问题讨论】：

<iframe id="Your App: '...'" class="aut-iframe" src="..."></iframe> 是赛普拉斯测试运行器的一部分，因此您不能使用赛普拉斯测试命令来访问它 - 为什么要这样做？如果您有另一个 iframe 实际上是应用程序的一部分，则需要在测试中更改选择器。
你是对的，Fody，在进行了更多挖掘之后，我注意到我需要的实际 iframe 已嵌入到我最初尝试使用的 iframe 中

标签： javascript iframe cypress cypress-component-test-runner

【解决方案1】：

安装cypress-iframe 插件。
安装后在cypress/support/commands.js下写import 'cypress-iframe';
最后你的代码应该是这样的：

cy.frameLoaded('.aut-iframe')
cy.iframe('.aut-iframe')
  .find('.pending-medication-check-box')
  .should('be.visible')
  .click()

【讨论】：

感谢 Alapan 的信息，但我收到以下错误。 Timed out retrying after 4000ms: Expected to find element: .aut-iframe, but never found it
您能否发布 iframe 和您尝试点击的元素的整个 html 代码？
<iframe id="Your App: 'CypressAutomationTest'" class="aut-iframe" src="https://demo.******.com/****"></iframe> <input type="checkbox" class="pending-medication-check-box"> <span class="checkbox"></span> ::after
我可以看到 iframe 外的复选框。能不能直接试试cy.get(‘.pending-medication-check-box’).click()看看能不能行。
感谢 Alapan 的帮助，您的代码示例提供了非常好的帮助

【解决方案2】：

我假设您只是在加载正文之前错过了获取 iframe 的重试。简单的get 和should 组合不会等待这种情况发生。官方文档说明您在使用 iframe 时应该 .its('body')，因此请尝试以下操作：

cy.get('.aut-iframe').its('body').then((body) => { cy.wrap(body).should('...') }

参考：https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/#header

【讨论】：