iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

手動測試好累喔!一起來寫前端自動化測試吧~ 系列

簡述「測試」這件事,並帶到「前端網頁測試」的重要性、測試方向及方法。
前端工程師會進入的產業很多元,有的公司具備專門的 QA,有的公司則仰賴網頁開發者進行手動、自動化測試。手動測試憑藉肉眼去觀察測試結果並自行撰寫測試報告,非常耗費時間。如果把前端的測試都導向自動化,可以節省開發成本,也可以讓開發者藉由提前知道測試需求來改善開發方向。

鐵人鍊成 | 共 30 篇文章 | 13 人訂閱 訂閱系列文 RSS系列文
DAY 11

[Day 11] 理解單元測試(二)- 簡介 Jest

今天要來簡介一下最廣為使用的測試框架 - Jest。其 官方文件 寫得十分平易近人。 安裝與運行 首先,於專案中安裝 jest。npm install --sa...

2023-09-25 ‧ 由 Boolean Cat 分享
DAY 12

[Day 12] 理解單元測試(三)- 簡介 Mocha

Mocha.js(官方文件) 是一個專為 Node.js 設計的 JavaScript 測試框架。其不具備斷言庫。一般常見熱門的搭配是使用 Chai 斷言庫。亦...

2023-09-26 ‧ 由 Boolean Cat 分享
DAY 13

[Day 13] 理解單元測試(四)- 測試替身

會有測試替身的出現,要先介紹「被測試目標」(SUT, System Under Test)與「被依賴組件」(DOC, Depended-on Component...

2023-09-27 ‧ 由 Boolean Cat 分享
DAY 14

[Day 14] 理解整合測試(ㄧ)

整合測試(Integration Test)與單元測試的區別如其字面上意思。整合測試是針對多個單元測試之間的交互進行測試。通常也使用 Jest、Mocha.js...

2023-09-28 ‧ 由 Boolean Cat 分享
DAY 15

[Day 15] 理解整合測試(二)- 何時該寫整合測試

整合測試關注各個 components 的功能性,也關注 components 之間的協同整合是否達到產品規格書上的預期。因為需要針對「不同 component...

2023-09-29 ‧ 由 Boolean Cat 分享
DAY 16

[Day 16] 理解端對端測試(ㄧ)

今天要講前端測試金字塔頂層的端對端測試(E2E test)。端對端測試與前端整合測試的差異在於: 框架的選用前端整合測試使用 Jest、Mocha.js 等...

2023-09-30 ‧ 由 Boolean Cat 分享
DAY 17

[Day 17] 理解端對端測試(二)- 何時該寫端對端測試

依照前端測試金字塔的理論而言,若有時間應該先寫單元測試、整合測試,然後才是端對端測試。優先從小錯誤排除,最後才是模擬真實使用者體驗。 撰寫端對端測試案例,需要花...

2023-10-01 ‧ 由 Boolean Cat 分享
DAY 18

[Day 18] 理解端對端測試(三)- 簡介 Cypress

Cypress 的 官方文件 寫得頗詳細。首先在專案中安裝 Cypress: npm install cypress --dev-save 接著,開啟它的圖形...

2023-10-02 ‧ 由 Boolean Cat 分享
DAY 19

[Day 19] 理解端對端測試(四)- Cypress 使用方法

昨天簡介如何安裝 cypress、將 GUI 介面跑起來,並說明各個資料夾的意義。今天要來簡介 cypress 撰寫端對端測試的方法。 抓取元素 在抓取 DOM...

2023-10-03 ‧ 由 Boolean Cat 分享
DAY 20

[Day 20] 理解端對端測試(五)- 一些好用的 Cypress 外掛

介紹完 Cypress 使用方法後,由於它真的是一個上手難度低且非常好用的端對端測試框架,今天要來介紹好用的外掛。 Cypress Real Events 鑑於...

2023-10-04 ‧ 由 Boolean Cat 分享