前言
iframe 是一種常見的 web 頁面上遇到的場景，像有些網站的登錄就是放到 iframe 里面的。
cypress 如何處理 iframe 上的元素呢，cypress 目前沒有提供類似 selenium 上的 switch_to.frame 這種直接切換的方法，得自己封裝一個操作方法。
iframe場景
打開 https://www.126.com/ 首頁，登錄的輸入框就是嵌套在iframe里面
/**
* Created by dell on 2020/6/9.
* 作者：上海-悠悠 交流QQ群:939110556
*/
describe('iframe login',function(){
// 定義getIframeBody方法
const getIframeBody = () => {
// 嘗試獲取 iframe > document > body
// 直到 body element 不為空
return cy
.get('iframe')
.its('0.contentDocument.body').should('not.be.empty')
// 包裝body DOM元素以允許鏈接更多Cypress 命令, 如 ".find(...)"
// warp命令使用文檔地址 https://on.cypress.io/wrap
.then(cy.wrap)
}
before( function() {
cy.visit("https://www.126.com/")
})
it("iframe type", function() {
// 定位輸入框，輸入賬號
getIframeBody().find('[name="email"]').type("123@qq.com")
// 輸入密碼
getIframeBody().find('[name="password"]').type("123456")
// 點登陸按鈕
getIframeBody().find('#dologin').click()
})
})
運行結果
注意：iframe 上的操作無法使用快照功能
自定義命令
我們可能會在多個測試用例訪問iframe的元素，因此在 cypress 自定義命令 cypress/support/index.js 的文件里面添加一個命令。
自定義命令將自動在所有用例文件中使用，因為支持文件與每個用例文件串聯在一起。
// cypress/support/index.js
/**
* Created by dell on 2020/6/9.
* 作者：上海-悠悠 交流QQ群:939110556
*/
Cypress.Commands.add('getIframeBody', () => {
// 定義getIframeBody方法
// and retry until the body element is not empty
return cy
.get('iframe')
.its('0.contentDocument.body').should('not.be.empty')
// 包裝body DOM元素以允許鏈接更多Cypress 命令, 如 ".find(...)"
// warp命令使用文檔地址 https://on.cypress.io/wrap
.then(cy.wrap)
})
用例文件內容 cypress/integration/iframe_login.js
// cypress/integration/iframe_login.js
/**
* Created by dell on 2020/6/9.
* 作者：上海-悠悠 交流QQ群:939110556
*/
describe('iframe login 126mail',function(){
before( function() {
cy.visit("https://www.126.com/")
})
it("login mail", function() {
// 定位輸入框，輸入賬號
cy.getIframeBody()
.find('[name="email"]').type("123@qq.com")
.should('have.value', '123@qq.com')
// 輸入密碼
cy.getIframeBody()
.find('[name="password"]').type("123456")
.should('have.value', '123456')
// 點登陸按鈕
cy.getIframeBody()
.find('#dologin').click()
})
})
運行結果
禁用log
我們可以通過禁用內部命令的日志記錄來隱藏代碼內部每個步驟的細節。
// cypress/support/index.js
/**
* Created by dell on 2020/6/9.
* 作者：上海-悠悠 交流QQ群:939110556
*/
Cypress.Commands.add('getIframeBody', () => {
// 定義getIframeBody方法
// and retry until the body element is not empty
return cy
.get('iframe', { log: false })
.its('0.contentDocument.body', { log: false }).should('not.be.empty')
.then((body) => cy.wrap(body, { log: false }))
})
這樣重新運行，日志就會簡潔一些了
關於cypress 處理iframe 相關資料https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/
warp命令使用文檔地址 https://on.cypress.io/wrap