iT邦幫忙

2022 iThome 鐵人賽

DAY 17
2
Modern Web

今天我想來在 Angular 應用程式上加上測試保護系列 第 17

Day 17 - 端對端測試 - 初探

  • 分享至 

  • xImage
  •  

前言

這一系列文章的第一部份說明了如何在 Angular 撰寫單元測試程式,而這一篇開始則會進行第二部份,針對端對端測試進行說明。

什麼是端對端測試 (End-to-End Testing, E2E Testing)

在撰寫單元測試程式時,我們會把測試範圍限制在一個方法或職責內,而且利用 Spy 物件替代原始的服務,來隔絕任何的外部資源,因此單元測試著重的是單一對象的處理邏輯是否如預期的執行。然而一個應用程式內是多個元件互動溝通而組成的,兩兩元件是否如預期的互動就不是單元測試能覆蓋到的範圍,需要利用整合測試 (Integration Testing) 或是端對端測試 (End-to-End Testing, E2E Testing) 來確認。

相對於單元測試,端對端測試是從使用者操作的這端到資料記錄的另一端,去對整個應用程式完整的系統流程進行測試。也因為是從使用者角度去做測試,所以更能反映出應用程式的實作是否是使用者所要的;但也因為針對的是整個應用程式,而讓撰寫與維護的成本相對高,因此常會只針對商業價值高的對象做端對端測試。

端對端測試框架

Protractor

https://ithelp.ithome.com.tw/upload/images/20221002/20109645xMDHvK4yv3.png

Protractor 測試框架是 Angular 團隊在 2013 利用 WebDriver API 所開發,在 Angular 12 之前是 Angular 預設的端對端框架,然而,2021 年在 GitHub Issue 中確認了 Angular 團隊會在 2022 年底結束對 Protractor 框架的開發。

Cypress

Cypress 測試框架是由 cypress.io 所開發的,它採用了新的架構來執行端對端測試,以解決基於 Selenium 進行測試的問題。與 Jasmine 一樣,此框架也內含了如 Chai 語法等測試所需要的 API 語法;除此之外,Cypress 還提供了圖形使用者介面來讓我們確認測試的結果。

接下來

除了上述兩個框架外,目前常用的還有很多如 Selenium 或 PlayWright 等等,這一篇簡單說明了端對端測試,接下來會陸續說明在 Angular 專案中,要如何使用 Cypress 撰寫測試程式。


上一篇
Day 16 - 單元測試 - Karma 組態設定與使用
下一篇
Day 18 - 端對端測試 - Cypress 的安裝與使用
系列文
今天我想來在 Angular 應用程式上加上測試保護30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言