一、可選的測(cè)試工具
單元測(cè)試
- jasmine
- karma
- mocha
- jest
e2e測(cè)試
- nightwatch
- cypress
e2e的瀏覽器支持
- LambdaTest
- Selenium
二、方案
項(xiàng)目技術(shù)棧
- vue3
- typescript
- scss
- eslint + prettier
- jest + vue-test-utils + cypress
- webpack4 / webpack5 / rollup
- 封裝element / 封裝antd / 自己從0實(shí)現(xiàn)
- axios
- xxxxxxxxxxxxxxxx
- 離線緩存
- 性能監(jiān)控
測(cè)試方案
- jest + vue-test-utils + cypress
- 組件單元測(cè)試(包括快照測(cè)試、事件測(cè)試等)
- 頁(yè)面 e2e 測(cè)試
- 報(bào)告覆蓋率
三、OKR
o: 構(gòu)建前端自動(dòng)化測(cè)試能力
- kr1: 實(shí)現(xiàn)一個(gè)至少擁有2級(jí)頁(yè)面、2種組件的網(wǎng)站 demo
- kr1.1: 搭建新項(xiàng)目,并編寫一個(gè)網(wǎng)站 demo
- kr1.2: 寫各個(gè)庫(kù)的配置文件,寫簡(jiǎn)單的測(cè)試文件,使項(xiàng)目能正常開(kāi)發(fā)、lint、測(cè)試、打包
- kr2: 每個(gè)組件擁有完備的單元測(cè)試
- kr2.1: 通讀 jest 文檔 + vue-test-utils 文檔
- kr2.2: 學(xué)習(xí) vue-next 項(xiàng)目中的單元測(cè)試,了解測(cè)試的對(duì)象、范圍和粒度
- kr2.3: 為項(xiàng)目demo的每個(gè)組件編寫單元測(cè)試用例
- kr3: 每個(gè)頁(yè)面擁有完備的 e2e 測(cè)試
- kr3.1: 通過(guò) cypress 文檔學(xué)習(xí)其用法
- kr3.2: 通過(guò) nuxtjs.org 項(xiàng)目學(xué)習(xí) e2e 測(cè)試的寫法
- kr2.3: 為項(xiàng)目demo的每個(gè)頁(yè)面編寫 e2e 測(cè)試用例
- kr4: 測(cè)試運(yùn)行結(jié)束后正確報(bào)告結(jié)果和測(cè)試覆蓋率