簡述「測試」這件事,並帶到「前端網頁測試」的重要性、測試方向及方法。
前端工程師會進入的產業很多元,有的公司具備專門的 QA,有的公司則仰賴網頁開發者進行手動、自動化測試。手動測試憑藉肉眼去觀察測試結果並自行撰寫測試報告,非常耗費時間。如果把前端的測試都導向自動化,可以節省開發成本,也可以讓開發者藉由提前知道測試需求來改善開發方向。
今天要來簡介一下最廣為使用的測試框架 - Jest。其 官方文件 寫得十分平易近人。 安裝與運行 首先,於專案中安裝 jest。npm install --sa...
Mocha.js(官方文件) 是一個專為 Node.js 設計的 JavaScript 測試框架。其不具備斷言庫。一般常見熱門的搭配是使用 Chai 斷言庫。亦...
會有測試替身的出現,要先介紹「被測試目標」(SUT, System Under Test)與「被依賴組件」(DOC, Depended-on Component...
整合測試(Integration Test)與單元測試的區別如其字面上意思。整合測試是針對多個單元測試之間的交互進行測試。通常也使用 Jest、Mocha.js...
整合測試關注各個 components 的功能性,也關注 components 之間的協同整合是否達到產品規格書上的預期。因為需要針對「不同 component...
今天要講前端測試金字塔頂層的端對端測試(E2E test)。端對端測試與前端整合測試的差異在於: 框架的選用前端整合測試使用 Jest、Mocha.js 等...
依照前端測試金字塔的理論而言,若有時間應該先寫單元測試、整合測試,然後才是端對端測試。優先從小錯誤排除,最後才是模擬真實使用者體驗。 撰寫端對端測試案例,需要花...
Cypress 的 官方文件 寫得頗詳細。首先在專案中安裝 Cypress: npm install cypress --dev-save 接著,開啟它的圖形...
昨天簡介如何安裝 cypress、將 GUI 介面跑起來,並說明各個資料夾的意義。今天要來簡介 cypress 撰寫端對端測試的方法。 抓取元素 在抓取 DOM...
介紹完 Cypress 使用方法後,由於它真的是一個上手難度低且非常好用的端對端測試框架,今天要來介紹好用的外掛。 Cypress Real Events 鑑於...