iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
Modern Web

前端工程師在工作中的各種實戰技能 (Vue 3)系列 第 25

[Day25] Vue3 E2E Testing: Cypress 實戰之 Todo MVC (上)

在經過前兩天簡單的介紹 Cypress,現在我想透過一個實際的範例來讓大家更加了解 Cypress 以及到底如何攥寫 E2E 測試。

我們這次測試的目標網站是非常經典的 TodoMVC ,不過為了呼應 Vue 的主題,所以我會拿 Vue.js • TodoMVC 當作測試的目標網站。

大家可以透過連結自由操作一下,會對於接下來的測試例子更佳有感!

https://i.imgur.com/w29OiBy.png

Test Cases

以下是這次測試的案例規劃:

  • Case 1: 初始狀態
    • Case 1-1: 初始狀態下,無任何 Todo。
    • Case 1-2: 初始狀態下,Todo 清單以及 Footer 將會隱藏。
  • Case 2: 新增 Todo
    • Case 2-1 可以新增一至多個 Todo。
    • Case 2-2: Todo 新增完後,輸入框的文字會被清除。
    • Case 2-3: Todo 會被新增至清單的最後一個。
    • Case 2-4: 當有 Todo 新增後,Todo 清單以及 Footer 將會顯示。
  • Case 3: 編輯 Todo
    • Case 3-1: 對 Todo 連擊兩下後進入編輯模式,並在 blur 時完成編輯。
    • Case 3-2: 如果編輯後的 Todo 為空內容,則自動刪除。
  • Case 4: 改變 Todo 狀態
    • Case 4-1: 可以一一將 Todo 標示為完成。
    • Case 4-2: 可以一一將完成的 Todo 標示為未完成。
    • Case 4-3: 可以一次將所有 Todo 標示為完成。
    • Case 4-4: 可以一次將所有完成的 Todo 標示為未元成。
  • Case 5: 刪除 Todo
    • Case 5-1: 可以一一將 Todo 刪除。
    • Case 5-2: 可以一次將標示為完成的 Todo 刪除。

我大部分是參考 TodoMVC 原作者所攥寫的 E2E 測試,並從中挑選重要的核心操作來示範撰寫測試,如果想瞭解涵蓋率 100% 的 TodoMVC E2E 測試可以去查看原作的 Source Code

實務上 E2E 測試也不常達到 100%,因為 E2E 所要花費的成本是所有測試類型中最高的,而且通常在涵蓋率達到 60~70 % 後測試的效益就會大幅降地 (成本太大),也因此通常僅會為產品的核心功能攥寫 E2E 測試。

Case 1: 初始狀態

  • Case 1-1: 初始狀態下,無任何 Todo。
  • Case 1-2: 初始狀態下,Todo 清單以及 Footer 將會隱藏。
describe('Todo MVC', () => {
  context('Case 1: Initial State', () => {
    beforeEach(() => {
      cy.visit('https://todomvc.com/examples/vue')
    })
    it('Case 1-1: start with zero todo item', () => {
      cy.get('.todo-list .todo').should('have.length', 0)
    })
    it('Case 1-2: hide .main and .footer', () => {
      cy.get('.main').should('not.be.visible')
      cy.get('.footer').should('not.be.visible')
    })
  })
})

語法說明:

  • visit(): 訪問瀏覽目標 URL,基本上每一條測試都是使用 visit 到目標頁面開始測試。
  • get(): get() 使用和 Document.querySelector() 一樣的語法,如果有成功找到目標元素就會回傳目標元素,如果超過 retry 時間仍沒有找到目標元素則會報錯導致測試失敗。
  • should(): should 可以傳入來自 Chai, Chai-jQuerySinon-Chai 的 Chainer,並且創建一個不斷自動重試的斷言,直到通過或超時。
  • beforeEach(): 在區塊中的每個測試開始之前會執行的 hook。

Console output

https://i.imgur.com/UAVCDSd.png

在控制台中可以看到 Cypress 輸出的資訊,點擊 Command Log 中的每一行命令都可以看到當時的樣貌以及 console 資訊,來幫助我們開發或是除錯

  • Command(已發出的命令)
  • Yieled(此命令返回的內容)
  • Elements(找到的元素數量)
  • Selector(我們使用的選擇器)

參考資料


今天的分享就到這邊,如果大家對我分享的內容有興趣歡迎點擊追蹤 & 訂閱系列文章,如果對內容有任何疑問,或是文章內容有錯誤,都非常歡迎留言討論或指教的!

我們明天見!


上一篇
[Day24] Vue3 E2E Testing: Cypress 基本結構
下一篇
[Day26] Vue3 E2E Testing: Cypress 實戰之 Todo MVC (中)
系列文
前端工程師在工作中的各種實戰技能 (Vue 3)30

尚未有邦友留言

立即登入留言