cypress進行e2e測試之理論

cypress 進行 e2e 測試之理論

cypress 是目前 e2e 很火的一個測試組件，內部綁定了 macha、chai、chai-jquery 之類的斷言,爲了讓代碼代碼
更有說服力，減小提交測試錯誤，進行 e2e 測試顯然是很是有必要的。

官網 \
GitHub

借鑑官網一句話來講:

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