端到端測試神器 cypress 淺入淺出

CarlBenjamin 發布于2019-08-22 18:45 / 2657人閱讀

摘要：我之前寫過關于的文章，，最近在工作中用到比較多了，頓時覺得確實是比較優秀的一個。

我之前寫過關于cypress的文章，https://segmentfault.com/a/11...，最近在工作中用到cypress比較多了，頓時覺得cypress確實是比較優秀的一個。

1. 軟件安裝. 2. 安裝cypress

安裝cypress客戶端：http://download.cypress.io/de...

安裝vscode編輯器：https://code.visualstudio.com...

3. 初始化

假如項目目錄是 /test

打開cypress客戶端，點擊箭頭位置，通過資源管理器選擇/test目錄

如果/test沒有cypress目錄，那么cypress就會在test目錄下新建cypress目錄，并初始化一些文件

4. cypress目錄分析

- cypress // cypress目錄
---- fixtures 測試數據配置文件，可以使用fixture方法讀取
---- integration 測試腳本文件
---- plugin 插件文件
---- support 支持文件
- cypress.json // cypress全局配置文件

5. 基本例子

一般流程

訪問某個頁面

查找DOM進行交互，例如輸入，點擊，選擇之類

進行斷言

describe("Hacker News登錄測試", () => {
  it("登錄頁面", () => {
    cy.visit("https://news.ycombinator.com/login?goto=news")
    cy.get("input[name="acct"]").eq(0).type("test")
    cy.get("input[name="pw"]").eq(0).type("123456")
    cy.get("input[value="login"]").click()

    cy.get("body").should("contain", "Bad login")
  })
})

6. DOM選取

參考： https://docs.cypress.io/guide...

jquery選擇法

通過客戶端GUI工具選取

7. DOM交互

.click() 單擊

.dblclick() 雙擊

.type() 輸入

.clear() 清空

.check() 選中

.uncheck() 取消選中

.select() 下拉框選擇

.trigger() 反轉

8. 斷言

.contains() 查找匹配字符串

.should()

更多斷言參考 https://docs.cypress.io/guide...

8.1. 長度斷言

// retry until we find 3 matching 
cy.get("li.selected").should("have.length", 3)

8.2. 類斷言

// retry until this input does not have class disabled
cy.get("form").find("input").should("not.have.class", "disabled")

8.3. 值斷言

// retry until this textarea has the correct value
cy.get("textarea").should("have.value", "foo bar baz")

8.4. 文本斷言

// retry until this span does not contain "click me"
cy.get("a").parent("span.help").should("not.contain", "click me")

8.5. 可見性斷言

// retry until this button is visible
cy.get("button").should("be.visible")

8.6. 存在性斷言

// retry until loading spinner no longer exists
cy.get("#loading").should("not.exist")

8.7. 狀態斷言

// retry until our radio is checked
cy.get(":radio").should("be.checked")

9. 讀取測試配置數據

Cypress.env() 可以讀取全局配置

fixture(文件名).as(變量), 可以將文件中的配置數據讀取為變量，作為后續的測試用例來使用，注意這一步是異步的，必須放在before或者beforeEach等鉤子函數中使用

describe("軟電話登錄", function () {
  before(() => {
    cy.fixture(Cypress.env("envName") + "-login-data.json").as("loginData")
  })

  it("wellClient test", function () {
    cy.log(this.loginData)

    cy.visit(this.loginData.url)

    cy.get("#config-env").select("CMB-TEST")
    cy.get("#config").click()

    cy.get("#well-code").type(this.loginData.jobNumber)
    cy.get("#well-password").type(this.loginData.password)
    cy.get("#well-namespace").type(this.loginData.domain)
    cy.get("#well-deviceId").type(this.loginData.ext)

    cy.get("#well-login").click()

    cy.wait(3000)
    cy.get("#well-login").should("not.be.visible")
  })
})

10. 全局配置 cypress.json

參考：https://docs.cypress.io/guide...

11. 變量與別稱

參考：https://docs.cypress.io/guide...

12. 鉤子函數

參考： https://docs.cypress.io/guide...

before()

beforeEach()

afterEach()

after()

13. 最佳實踐

參考： https://docs.cypress.io/guide...

其他

cy.window() 異步獲取window對象，無法直接使用window對象

云服務器 GPU云服務器淺入淺出端到端測試端到端 webrtc端到端通信

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96176.html

端到端測試神器Cypress!進階

摘要：前言官方文檔目前只支持英文，好處是官方入門視頻很多，對于英文水平不好的也很容易入手優缺點優點只要你學好語法上應該不是很大問題獲取類似，對前端同學來說是好處缺點內置的工具集成了谷歌內核，決定你只能是在谷歌瀏覽器上測試，但隨著新版的內核采用內核前言官方文檔：https://docs.cypress.io 目前只支持英文，好處是官方入門視頻很多，對于英文水平不好的也很容易入手；優缺點 ...

oysun 2019-08-26 13:55 評論0 收藏0
端到端測試哪家強？不容錯過的Cypress

摘要：閱讀原文目前測試工具有哪些項目不需要不需要端到端測試一般都需要一個容器，來運行前端應用。向快速，一致和可靠的無剝落測試問好。閱讀原文 1. 目前E2E測試工具有哪些？項目 Web Star puppeteer Chromium (~170Mb Mac, ~282Mb Linux, ~280Mb Win) 31906 nightmare Electron 15502 ...

LancerComet 2019-08-22 17:19 評論0 收藏0
SegmentFault 技術周刊 Vol.16 - 淺入淺出 JavaScript 函數式編程

摘要：函數式編程，一看這個詞，簡直就是學院派的典范。所以這期周刊，我們就重點引入的函數式編程，淺入淺出，一窺函數式編程的思想，可能讓你對編程語言的理解更加融會貫通一些。但從根本上來說，函數式編程就是關于如使用通用的可復用函數進行組合編程。 showImg(https://segmentfault.com/img/bVGQuc); 函數式編程（Functional Programming），一...

csRyan 2019-08-22 10:50 評論0 收藏0
Vue-cli淺入淺出

摘要：別名相當于前面先引入了路由插件，然后顯式聲明要用路由。注意到，等都是頁面也可以是組件，接著注冊路由器，然后開始配置路由。搭建環境工欲善其事必先利其器，我們的學習計劃從學會搭建Vue所需要的環境開始，node和npm的環境不用說是必須的，現在前端流程化很熱門，基本上新的技術都會在這套流程的基礎上做開發，我們只需要站在巨人的XX上裝*就可以了。我假設你的機子上已經有了最新的node和n...

endiat 2019-08-01 18:00 評論0 收藏0