Cypress入門

Cypress 簡介

• 基於 JavaScript 的前端測試工具，可以對瀏覽器中運行的任何內容進行快速、簡單、可靠的測試

• Cypress 是自集成的，提供了一套完整的端到端測試，無須借助其他外部工具，安裝后即可快速地創建、編寫、運行測試用例，且對每一步操作都支持回看

• 不同於其他只能測試 UI 層的前端測試工具，Cypress 允許編寫所有類型的測試，覆蓋了測試金字塔模型的所有測試類型【界面測試，集成測試，單元測試】

• Cypress 底層協議不采用 WebDriver

 

1.安裝Cypress

• 需要node在 12 或 14 及以上，檢查node版本，node -v

• 使用npm 安裝：npm install cypress --save-dev

 

2.啟動Cypress

• 通過npx運行：npx cypress open

• 通過yarn運行：yarn run cypress open

• 啟動后，會彈出如圖窗口

  

   

   

  integration存放的是cypress提供的一些列子，雙擊對應的js文件，可以運行

   

  3.下載Cypress編輯器visual

  下載並安裝visual：https://code.visualstudio.com/Download

   

  4.編輯一個簡單的js腳本

  •  三種專用的定位器data-cy ，data-test ，data-testid需要前端增加對應的標簽，較難推廣
  • 通過id選擇器，class選擇器，attribute屬性選擇器，:nth-child(n)選擇器，Cypree.$定位器

    //用id定位
    cy.get("#id的值")
    //用class定位
    cy.get(".class的值")
    //用attributes屬性定位
    cy.get("button[id='main']")
    //查找父元素的第幾個子元素
    cy.get(":nth-child(1)")
    cy.get(":nth-child(3)>.nav-menu-item-content")
    ​
    Cypress的定位器優先級順序
    date-cy >date-test >date-testid >id >calss >tag >attributes >nth-child

     

  •  Cypress關鍵字說明

    descrribe 聲明一個測試用例集
    beforeEach 測試用例前置操作，相當於setup
    it聲明一個測試用例
    cy.get定位元素，可以用css selector定位選擇器
    type輸入文本
    should 斷言，hace.value是元素的value屬性值，clear清空輸入值
    cy.screenshot()進行截圖
    cy.reload() 刷新頁面
    cy.reload(true) 強制刷新頁面
    cy.visit()訪問網址
    cy.url()獲取當前頁面的URL
    cy.title()獲取當前頁面的title
    cy.viewport('iphone-6')設置屏幕訪問大小
    it.only()只測試這個case
    it.skip()不測試這個case
    

     

  •  編寫一個百度搜索的實列

    describe('百度測試',function(){
        this.beforeEach(()=>{
            cy.visit('https://www.baidu.com/') 
        })
        it('百度搜索測試',function(){
            //定位到輸入框，輸入robot，進行斷言
            cy.get('#kw').type('robot').should('have.value','robot')
            //清空輸入框，並進行斷言
            .clear().should('have.value','')
        })
    })

     

  • 需要登錄權限時，修改node_modules.bin\cypress\support路徑下的 commands.js

  • Cypress.Commands.add('login', (userType, options = {}) => {
        const accountTypes = {
            admin:{
                "username":"xxx",
                "password":"xxx",
            }
        }
        cy.request({
            url:'your URL address',
            method:'POST',
            body:accountTypes[userType]
        })
    })

     

  • 用例中需要登錄時，調用即可

  • cy.login('admin')

     

  • 與Jenkins結合運行
  •