Cypress web自動化37-cy.wrap() 操做 iframe 上的元素

前言

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