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.

本文環境

node v9.5\
npm v5.5

e2e 簡介

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'),不需要再次獲
取了，直接使用別名就好了

這裡看到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('[email protected]')
      .should('have.value', '[email protected]')

      // .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('[email protected]', { delay: 100 })
      .should('have.value', '[email protected]')

    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後輸入的內容')

這裡就是關於鍵盤的組合操作。

對於選擇例如 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