赛普拉斯 - iframe 处理

Posted 2023-02-16

【中文标题】赛普拉斯 - iframe 处理

【英文标题】：Cypress - iframe handling

【发布时间】：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 中

【参考方案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