e2e test

注意一個健康專案裡,單元測試和整合測試加起來的量應該要遠遠超過e2e測試的量才是健康的專案,人們所稱的測試金字塔

modern e2e test framework 大比拼

共同之處:

其他差異:

名稱敘述官網文件完整度有GUI介面多瀏覽器?github
protractorangular官方發展出來的, 建構在selenium之上的軟體不太好是,只要OS裡有,就能用,透過pluging去擴充link
cypresscypress.io公司的產品強,甚至有影片有GUI介面,整合得超好否,目前只支援chrome家族,有說要支援其他的link
puppeteerGoogle推出,headless chrome,適合用來測試網頁執行效能,載入速度。預設不顯示畫面,因為是'headless'否,只支援chrome家族,以後應該也是link

以下開始介紹Cypress...

安裝

  1. project必須要是一個有package.json的專案(npm init過 之類的這樣)
  2. yarn add cypress --save-dev or npm install cypress --save-dev,看要用哪一個。以下將以npm為範例
  3. package.json script區塊加上一個指令
     # in pacaage.json file
      # ...其他設定
      "scripts": {
          # ......其他 npm script
        "test:e2e": "cypress open",
        # script名稱當然是隨意的,重點是內容
        # 其他 npm script
      }
  4. npm run test:e2e,之後就會跑出一個GUI    magic~ cypress_open

如果cypress偵測到沒有它所需要的資料夾的話,在專案資料夾底下會長出

cypress資料夾 跟 cypress.json檔

│──cypress │  ├── fixtures │  │   └── example.json │  ├── integration │  │   └── example │  │       └── ....很多範例test.js檔案 │  ├── plugins │  │   └── index.js │  └── support │      ├── commands.js │      └── index.js │ ├── cypress.json │ │── ...其他原本就有的檔案, src, node_moduules資料夾之類的 │

cypress/integration資料夾底下就是放我們寫的自動e2e測試腳本,每一個檔案會出現在GUI視窗裡讓你去點來執行,也可以一次跑多個。
cypress/support/command.js裡可以寫測試腳本裡共用的util function。如打api,要登入token...這樣的事   @see_customCommand

如何寫e2e測試

這邊也附上我寫的一個cypress e2e測試範例,並註解一下,相信一定能秒會 link
也可以考慮直接git clone我的todoList example之後跑起來玩玩

    // 讓寫test的時候能讓vscode幫忙自動完成
/// <reference types="Cypress" />

describe('first test', () => {
  it('can open page', () => {
    // 連上 webpack dev server url
    cy.visit('http://localhost:8087')
    // 暫停一下測試執行 讓cy瀏覽器 render一下畫面和套用CSS
    cy.wait(2000)
    // 選取畫面上 第一個 <input />
    const firstInput = cy.get('input:first')
    // 做一個assert( .should ) 這個input 它有`placeholder`屬性 值是 `+ Add Task`
    firstInput.should('have.attr', 'placeholder', '+ Add Task')
    //按下這個input
    firstInput.click()
 
    cy.wait(200)
    // 這時畫面上會打開一個編輯視窗,
    // 再做一個assert 整個document上的 第二個 <input />  會有`placeholder`屬性 值是 `Type Something Here…`
    cy.get('input:nth-child(2)').should('have.attr', 'placeholder', 'Type Something Here…')

    // 按下現在document上的第一個<section /> 底下一層第5個<div /> 底下的 第一個 <a />,它是一個把編輯視窗關閉的 `cancel` button
    cy.get('section:first > div:nth-child(5) > a:first').click()
    // document上的 第一個<input /> 裡的placeholder就應該要變回  `+ Add Task` again
    cy.get('input:first')
      .should('have.attr', 'placeholder', '+ Add Task')
    
  })
})

如果這個測試通過,代表我們的tolist app能夠打開隱藏的編輯視窗,然後按下cancel按鈕後,能夠關閉。 todoList_cypress_test