方法一：不使用插件
单层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的实际内容。