前端自动化测试框架Cypress（六）–iframe元素定位qq33676825的博客-

方法一：不使用插件
单层iframe

<iframe name="" frameborder="0" id="x-URS-iframe" scrolling="no"> <form id='login-from'> <div class="inputbox" id="account-box"> <input data-placeholder="邮箱帐号或手机号码" name="email" data-required="true" class="j-   inputtext dlemail j-nameforslide" type="text" autocomplete="off" id="auto-id-" placeholder="邮箱帐号或手机号码"> </div> </from> </iframe> 

it("处理单层iframe",function(){         cy.get('iframe#x-URS-iframe').then($iframe=>{                 cy.wrap($iframe.contents().find('[placeholder="邮箱帐号或手机号码"]')).then($user=>{                     cy.wrap($user).type("12121") }) }); }) 

多层iframe

<iframe name="" frameborder="0" id="x-outer-iframe" scrolling="no"> <iframe name="" frameborder="0" id="x-inner-iframe" scrolling="no"> <form id='login-from'> <div class="inputbox" id="account-box"> <input data-placeholder="邮箱帐号或手机号码" name="email" data-required="true" class="j-   inputtext dlemail j-nameforslide" type="text" autocomplete="off" id="auto-id-" placeholder="邮箱帐号或手机号码"> </div> </from> </iframe> </iframe> 

it("处理多层iframe",function(){         cy.get("iframe#x-outer-iframe").then($outeriframe =>{             cy.wrap($outeriframe.contents().find('iframe#x-inner-iframe').then($inneriframe => {                 cy.wrap($inneriframe.contents().find('[placeholder="邮箱帐号或手机号码"]').then($user =>{                     cy.wrap($user).type("12121211") })) })) }) }) 

方法二：使用插件
向Cypress添加iframe支持
安装：

npm install -D cypress-iframe 

在cypress/support/commands.js文件中，添加以下内容：

import 'cypress-iframe' // or require('cypress-iframe') 

//在测试的顶部添加

.frameLoaded() 检查是否已将iframe加载到页面上

// This will verify that the iframe is loaded to any page other than 'about:blank' cy.frameLoaded() // This will verify that the iframe is loaded to any url containing the given path part cy.frameLoaded({ url: 'https://google.com' }) cy.frameLoaded({ url: '/join' }) cy.frameLoaded({ url: '?some=query' }) cy.frameLoaded({ url: '#/hash/path' }) // You can also give it a selector to check that a specific iframe has loaded cy.frameLoaded('#my-frame') cy.frameLoaded('#my-frame', { url: '/join' }) 

.iframe() 后续命令在给定的iframe中执行

// This will verify that the iframe is loaded to any page other than 'about:blank' cy.iframe().find('.some-button').should('be.visible').click() cy.iframe().contains('Some hidden element').should('not.be.visible') cy.find('#outside-iframe').click() // this will be executed outside the iframe // You can also give it a selector to find elements inside of a specific iframe cy.iframe('#my-frame').find('.some-button').should('be.visible').click() cy.iframe('#my-second-frame').contains('Some hidden element').should('not.be.visible') 

.enter() 在iframe中执行一组命令

// This will verify that the iframe is loaded to any page other than 'about:blank' cy.enter().then(getBody => { getBody().find('.some-button').should('be.visible').click() getBody().contains('Some hidden element').should('not.be.visible') }) // You can also give it a selector to find elements inside of a specific iframe cy.enter('#my-iframe').then(getBody => { getBody().find('.some-button').should('be.visible').click() getBody().contains('Some hidden element').should('not.be.visible') }) 

警告
Cypress不对iframe内部的dom状态进行快照。因此，即使您正在使用该库，在测试中，当将鼠标悬停在iframe内执行的命令上时，也会显示占位符，而不是执行命令时显示iframe的实际内容。