cypress 舉行 e2e 測試之理論
cypress 是現在 e2e 很火的一個測試組件,內部綁定了 macha、chai、chai-jquery 之類的斷言,為了讓代碼代碼
更有說服力,削減提交測試毛病,舉行 e2e 測試明顯黑白常有必要的。
官網 \
自創官網一句話來講:
Cypress is a next generation front end testing tool built for the modern web. We address the key
pain points developers and QA engineers face when testing modern applications.
<!– more –>
本文環境
node v9.5\
npm v5.5
e2e 簡介
e2e 測試端對端測試的簡稱, e2e 即為end to end
,
指恣意一個人的交際、生意業務、休閑都能夠直接與別的恣意一個人發生關聯,去中間化、渠道化.
cypress
cypress 環境搭建
做前端怎樣少的多的了 npm 呢
$ npm i -D cypress
然後為了輕易起見,我們在package.json
中寫入下面劇本:
{
"scripts": {
"e2e:open": "cypress open",
"e2e:run": "cypress run"
}
}
運轉npm run e2e:open
,啟動一個 cypress 的服務器,以下:
以下圖這就完成了一個啟動一個 cypress。第一次點開時刻,cypress 會幫你建立一個初始化設置目次,這是
cypress 引薦的目次的構造,固然也能夠本身建立。
點擊 example_spec.js 文件,然後能夠看到以下界面,cypress 最先測試:
上面就看到 cypress 的運轉歷程了。下面看看 example_spec.js(文件的位置
:projectName/cypress/integration)文件中寫了啥:
describe('Kitchen Sink', function() {
it('.should() - assert that <title> is correct', function() {
// ...
}
})
這是主要構造的,下面大部份都是在一個it
函數內部,是測試內里的回調函數。細緻能夠檢察 TDD 和 BDD 測試
框架,cypress 綁定了這些測試框架。
cy.visit
這是 cypress 內里一個很主要的要領,能夠接見一個鏈接,列入 example.js 文件以下:
beforeEach(function() {
// Visiting our app before each test removes any state build up from
// previous tests. Visiting acts as if we closed a tab and opened a fresh one
cy.visit('https://example.cypress.io/commands/querying')
})
這裏就是在前置鈎子函數內里接見了https://...../querying
這個鏈接。假如代碼須要瀏覽器調試,比方用戶交
互點擊,用戶輸入之類的。第一步就是接見:cy.visit
cy.get
照樣從 example_spec.js 問中提及:
it('cy.get() - query DOM elements', function() {
// https://on.cypress.io/get
// Get DOM elements by id
cy.get('#query-btn').should('contain', 'Button')
// Get DOM elements by class
cy.get('.query-btn').should('contain', 'Button')
cy.get('#querying .well>button:first').should('contain', 'Button')
// ↲
// Use CSS selectors just like jQuery
})
這裏定義了一個測試單位,在這個內里做了啥呢?第一步獵取 id 為 query-btn 這個按鈕。接下來 should 操縱
,送上一張表自行檢察:
cy.get 另有一個弄法就是 cy.get(‘@app’)這類,意義說之前你已cy.get('.app').as('app')
,不須要再次獲
取了,直接運用別號就好了
從官網截圖的表格,詳
細jquery-chai 文檔表格
這裏看到cy.get()
和jquery.$
是不是是很像,在官網這裏說了如許一句話:
The querying behavior of this command matches exactly how $(…) works in jQuery.
所以能夠將 cy.get()當$一樣來用即可,不過這裏返回的不過 jquery 對象罷了,這裏返回的事經由過程 cypress 包
裝過的對象能夠在控制台看到如許的東西,見下圖:
是一個用於 cypress 一切要領的對象。然後能夠操縱他的 api 了。
第一部份,主如果查詢,查詢頁面元素是不是根據我們開闢想要的存在,下面看第二部份:
context('Actions', function() {
beforeEach(function() {
cy.visit('https://example.cypress.io/commands/actions')
})
// Let's perform some actions on DOM elements
// https://on.cypress.io/interacting-with-elements
it('.type() - type into a DOM element', function() {
// https://on.cypress.io/type
cy
.get('.action-email')
.type('fake@email.com')
.should('have.value', 'fake@email.com')
// .type() with special character sequences
.type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
.type('{del}{selectall}{backspace}')
// .type() with key modifiers
.type('{alt}{option}') //these are equivalent
.type('{ctrl}{control}') //these are equivalent
.type('{meta}{command}{cmd}') //these are equivalent
.type('{shift}')
// Delay each keypress by 0.1 sec
.type('slow.typing@email.com', { delay: 100 })
.should('have.value', 'slow.typing@email.com')
cy
.get('.action-disabled')
// Ignore error checking prior to type
// like whether the input is visible or disabled
.type('disabled error checking', { force: true })
.should('have.value', 'disabled error checking')
})
})
這一部份主如果舉行獵取元素交互, 下面來講交互是怎樣搞得。 與 cy.get 類似另有:
- cy.contains 經由過程文本獵取元素
- cy.closet 見 jqery
- cy.next/cy.nextAll 能夠和 cy.contains 團結運用獵取該節點的下一個節點
- cy.prev/cy.prevAll 同上
- cy.children/cy.parents/cy.parent 獵取子節點/ 一切的父節點 / 父節點
- cy.first/cy.last
- cy.url 獵取當前頁面 url
- cy.title 獵取當前頁面題目
- … API 挺多的,一樣奉
上api 文檔
cypress 交互邏輯
既然要交互一定須要點擊輸入轉動,能夠還存在拖拽等等。我們就臨時從輸入最先提及啦
cy.type
這不是一個能夠直接運用的要領,要合營cy.get
運用的,作用是給空間舉行輸入。比方:
測試輸入比方 text, textarea
cy.get('input').type('hello world')
測試 tabIndex
<div class="el" tabIndex="1">
This is TabIndex div.
</div>
cy.get('.el').type('laldkadaljdkljasf') // 這個內里是隨機字符串
測試 input 為日期的
cy.get('input[type=date]').type('2008-8-9')
鍵盤綁定
下面直接是對 input 舉行組合鍵盤操縱
cy.get('input').type('{shift}{alt}Q')
按住鍵盤操縱
cy.get('input').type('{alt}這裡是按了一下alt后輸入的內容')
另有長按鍵盤之類的操縱,細緻就看官網了這裏之類送上鏈
接https://docs.cypress.io/api/commands/type.html#Key-Combinations
這裏就是關於鍵盤的組合操縱。
關於挑選比方 radio, checkbox
這些就只須要應用點擊事宜即可,以下:
cy
.get('input[type=radio]')
.as('radio')
.click()
cy.get('@radio').should('be.checked')
定時
cy.wait
下面是守候 1s
cy.wait(1000)
cy.clock 和 cy.tick
本身的代碼:
var seconds = 0
setInterval(() => {
$('#seconds-elapsed').text(++seconds + ' seconds')
}, 1000)
測試代碼
cy.clock()
cy.visit('/index.html')
cy.tick(1000)
cy.get('#seconds-elapsed').should('have.text', '1 seconds')
cy.tick(1000)
cy.get('#seconds-elapsed').should('have.text', '2 seconds')
這裏就會湧現關於 clock 和 tick
的用法,更多用法看文檔,我也有部份疑惑的。待厥後再處理。老例子文檔地點:
地點
關於 cypress 的設置
先複製一段出來:
{
"baseUrl": "http://localhost:8080",
"pageLoadTimeout": 3000,
"viewportHeight": 667,
"viewportWidth": 375
}
這是一個異常精簡的設置了:
- baseUrl 基礎鏈接,以後在是運用 cy.visit 的時刻,只須要接見詳細路由比方: cy.visit(‘/Hello’)
viewport 兩個屬性
- viewportHeight 測試窗口的高度
- viewportWidth 測試窗口的寬度
- pageLoadTimeout 頁面家安在凌駕 3000ms 即為超時。
總結
上面是 cypress 的基礎用法,cypress 是基於 electron 的一個測試框架,供應 web 環境舉行點對點的測試,在
programer 頭腦下,舉行自動化的交互操縱,必要點檢測申明,這是一個異常棒的用途。比方以後具有數據埋點,
能夠在牢固的位置檢測是不是有埋點。測試想要的處所是不是婚配的數據。模仿用戶的點擊操縱,這都黑白常棒的。在
jquery 操縱年代,種種 id 和 class 新鮮命名下,這些都能夠輕易找到,在 vue 和 react 大行其道的年代,但
是卻能夠經由過程文本尋覓節點。這也黑白常棒的體驗,更多隱秘須要去體驗,送上官方地點
:官網 cypress