前端技術週刊 2018-12-10：前端自動化測試

前端快爆

• 再見 Edge，微軟正式宣佈 Microsoft Edge 瀏覽器將從 EdgeHTML 內核遷移到開源的 Chromium（Blink + V8）上，ChakraCore JS 引擎將會繼續開源並用在其餘項目中，預覽版預計 2019 年年初推出。Mozilla CEO 也發表文章痛呼：從商業角度來看，微軟的決定可能頗有意義，但從用戶的角度來看，這多是場災難，把瀏覽器這樣的網絡基礎設施交給一家公司來主導將會很是糟糕。🔗

  點評：失去競爭便會失去一種選擇，Edge 加入 Chromium 後能有多少話語權，實在使人擔心，Opera 可能就是前車可鑑。

• Puppeteer 是 Headless Chrome 的封裝，如今也支持 Firefox 了。🔗

  點評：支持更多的瀏覽器將會更方便測試。

• Chrome 73 開發者工具新增了 Logpoints 功能，能夠在控制檯快速打印消息。VSCode 早些時候就支持了相似的功能。🔗

  點評：是時候告別 console.log 了。

• Babel 7.2.0 發佈，支持了 Class field 規範中的 Private Instance Methods，Private accessors 也即將支持。至此因爲此前 Chrome 也已經實現，該規範正式進入 Stage 3 階段。🔗

  點評：這是一個最好的時代，也是一個最壞的時代！上週五特別邀請了 Hax 來阿里巴巴分享，詳細講述了該規範的利弊。

• Safari Technology Preview 71發佈，默認啓用了 Web Animations、Intersection Observer 等重要特性，同時還去除了 CSS text-decoration 屬性的前綴。🔗

  點評：Safari 正在努力不讓本身變成新的 IE6 🐶。

• 第13屆 D2 前端技術論壇將於2019年1月6日在杭州盛大開啓，目前還能夠團購買票。🔗

優秀 Demo

• 帶動畫的密碼提示框

• 聖誕節進度條

專題：前端自動化測試

測試是完善的研發體系中不可或缺的一環，前端也不例外，CSS 的變動可能致使頁面錯位，JavaScript 的變動可能致使功能缺陷。因爲前端偏 GUI 軟件的性質，儘管測試領域工具層出不窮，前端的自動化測試的落地實施並不普遍，不少項目依舊以手工測試爲主。本篇便是對前端測試相關的解決方案的一個梳理。

方案

先來了解一下前端測試可能涉及到的環節：

• 基本知識、單元測試、端到端測試、集成測試、可視化測試

目前比較常見的前端自動化測試方案主要集中在單元測試和集成測試階段，實現文件監測和高效快速的執行測試：

• 前端自動化測試概覽

採用像素對比和 DOM 結構對比的方案：

• 早期自動化測試的一些思考和探索
• 視覺迴歸測試

對於 React 則推薦 Jest + Enzyme 搭建測試環境：

• 使用Jest + Enzyme對React項目進行單元測試
• React 與 Redux 的測試策略

工具

在 2018 年年初對測試工具的總體回顧：

• An Overview of JavaScript Testing in 2018

Karma 是目前在 Magix 自動化測試的過程當中使用的框架：

• Karma 測試框架的前生今世

  Karma 的優勢是能經過插件和配置的方式集成大部分的主流的測試框架和前端庫，能方便的一次在多瀏覽器環境執行測試用例，並集成了測試覆蓋率生成功能，生成頁面形式覆蓋率報告並能導出不一樣形式的覆蓋率報告數據。它的缺點是，對測試頁面環境的搭建和資源文件的加載不是常見的形式，最開始搭建環境時會有不少跟預期不一致的狀況，配置不直觀。

Cypress 是一個相對完善的前端 E2E 測試框架，它能夠運行在多瀏覽器環境，能攔截 mock 接口請求，模擬用戶行爲：

• 前端 E2E 測試之 Cypress

---

本期編輯：@壹絲，審閱：@承虎，專題供稿：@弈銘 首發地址：zhuanlan.zhihu.com/mm-fe