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

阿里媽媽前端快爆發表於2018-12-11

image.png | left | 827x345

前端快爆

  • 再見 Edge,微軟正式宣佈 Microsoft Edge 瀏覽器將從 EdgeHTML 核心遷移到開源的 Chromium(Blink + V8)上,ChakraCore JS 引擎將會繼續開源並用在其他專案中,預覽版預計 2019 年年初推出。Mozilla CEO 也發表文章痛呼:從商業角度來看,微軟的決定可能很有意義,但從使用者的角度來看,這可能是場災難,把瀏覽器這樣的網路基礎設施交給一家公司來主導將會非常糟糕。?

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

image.png | left | 440x330

  • 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 來阿里巴巴分享,詳細講述了該規範的利弊。

image.png | left | 719x308

  • Safari Technology Preview 71釋出,預設啟用了 Web Animations、Intersection Observer 等重要特性,同時還去除了 CSS text-decoration 屬性的字首。?

    點評:Safari 正在努力不讓自己變成新的 IE6 ?。

  • 第13屆 D2 前端技術論壇將於2019年1月6日在杭州盛大開啟,目前還可以團購買票。?

優秀 Demo

shot.gif | center | 520x390

cps.gif | center | 520x320

專題:前端自動化測試

測試是完善的研發體系中不可或缺的一環,前端也不例外,CSS 的變更可能導致頁面錯位,JavaScript 的變更可能導致功能缺陷。由於前端偏 GUI 軟體的性質,儘管測試領域工具層出不窮,前端的自動化測試的落地實施並不廣泛,很多專案依舊以手工測試為主。本篇即是對前端測試相關的解決方案的一個梳理。

方案

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

目前比較常見的前端自動化測試方案主要集中在單元測試和整合測試階段,實現檔案監測和高效快速的執行測試:

採用畫素對比和 DOM 結構對比的方案:

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

工具

在 2018 年年初對測試工具的整體回顧:

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

  • Karma 測試框架的前生今世

    Karma 的優點是能通過外掛和配置的方式整合大部分的主流的測試框架和前端庫,能方便的一次在多瀏覽器環境執行測試用例,並整合了測試覆蓋率生成功能,生成頁面形式覆蓋率報告並能匯出不同形式的覆蓋率報告資料。它的缺點是,對測試頁面環境的搭建和資原始檔的載入不是常見的形式,最開始搭建環境時會有很多跟預期不一致的情況,配置不直觀。

Cypress 是一個相對完善的前端 E2E 測試框架,它可以執行在多瀏覽器環境,能攔截 mock 介面請求,模擬使用者行為:


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

相關文章