Cypress安裝使用（E2E測試框架）

 

 

一、簡介

　　Cypress是為現代網絡打造的下一代前端測試工具，解決了開發人員和QA工程師在測試現代應用程序時面臨的關鍵難點問題。

　　Cypress包含免費的、開源的、可本地安裝的Test Runner 和 能夠記錄你測試的控制面板服務。

 

二、安裝

　　1)　通過npm來安裝Cypress：

　　　　①　那么首先安裝node.js（npm是一個node包管理和分發工具），下載：https://nodejs.org/en/

　　　　②　打開CMD命令行，利用 mkdir 新建目錄，利用 cd 命令切換到指定目錄（也可以手動先新建好）

　　　　　　

　　　　③　使用 npm install cypress --save-dev 安裝Cypress（如果有WARN可忽略，不影響）

　　　　　　

　　　　④　使用 node_modules\.bin\cypress open 啟動Cypress

　　　　　　

　　　　　　

　

　　2)　直接下載Cypress壓縮包

　　　　①　官網下載地址：https://download.cypress.io

 　　　  ②　解壓到指定目錄，然后進入目錄，執行Cypress.exe

　　　　　　

　　　　③　選擇你的項目路徑

 　　　　　　

 

三、使用

　　1）　默認已經為我們准備了一些豐富的例子 ，可以直接點擊運行。

　　　　

　　　2）我們也可以自己新建一個測試文件：

　　　　①　首先切換至目錄 ~\Cypress\cypress\integration（任意編輯器都可以，我使用的時PyCharm）

　　　　

　　　　②　然后新建一個測試文件 sample_spec.js，代碼如下：

describe('My First Test', function () {
    it('Does not do much!', function () {
        cy.visit("https://www.baidu.com")
        cy.get("#kw").type("cypress test")
        cy.wait(60)
        cy.get("#su").click()
        cy.contains('cypress website').click()
    })
})

　　　　③　最后打開Cypress運行此文件即可，你會發現運行速度很快，這就是Cypress的優勢所在。

　　　　④　更多API詳解參考：https://docs.cypress.io/zh-cn/guides/guides/module-api.html#cypress-run

 

四、設置

　　1）　運行情況：　從左向右分別顯示成功數、失敗數、未運行、耗時，以及自動滾屏和重新運行按鈕

　　　　

 

　　2）　控件定位：　1.點擊選擇器　->2.點擊定位元素　->3.復制生成代碼

　　　　

 

　　3）　窗口設置：

　　　　①　默認情況下，除非由cy.viewport命令指定，否則視口將為1000*660px

　　　　

　　　　②　我們可以通過在cypress.json中指定這些值來覆蓋默認視口維度

{ “viewportWidth”：1200， “viewportHeight”：800 }

 

 

 ----- 轉載請注明原作，謝謝：https://www.cnblogs.com/leozhanggg/p/10973820.html