Chromium Chronicle #4:使用 WPT 測試網路平台功能

第 4 集:羅伯特在《滑鐵盧》中評論 (2019 年 7 月)
上一集

如果您使用 Blink,可能會知道 web_tests (舊稱 LayoutTests)。web-platform-tests (WPT) 位於 web_test/external/wpt 中。由於這項工具是透過 GitHub 與其他瀏覽器共用,因此建議您使用 WPT 測試網頁公開的功能。它有兩種主要的測試類型:refteststestharness.js 測試。

reftest 會擷取及比較兩個網頁的螢幕截圖。根據預設,系統會在觸發 load 事件後擷取螢幕截圖;如果在 <html> 元素中加入 reftest-wait 類別,系統會在類別移除後擷取螢幕截圖。停用測試表示測試涵蓋範圍會降低。請注意與字型相關的不穩定;請盡可能使用 Ahem 字型。

testharness.js 是 JavaScript 架構,用於測試轉譯以外的任何內容。編寫 testharness.js 測試時,請留意時間,並記得清除全域狀態

不穩定的逾時與可能外洩的狀態:

錯誤做法
<script>
promise_test(async t => {
  assert_equals(await slowLocalStorageTest(), "expected", "message");
  localStorage.clear();
});
</script>

使用長時間的逾時時間和清除功能,獲得更佳的測試:

正確做法
<meta name="timeout" content="long">
<script>
promise_test(async t => {
  t.add_cleanup(() => localStorage.clear());
  assert_equals(await slowLocalStorageTest(), "expected", "message");
});
</script>

如需自動化功能,請使用 testdriver.js,否則網頁版可能無法使用自動化功能。 您可以從 test_driver.bless 取得使用者手勢、使用 test_driver.action_sequence 產生複雜且信任的輸入等。

WPT 還會透過檔案名稱提供一些實用的伺服器端功能。 多全域測試 (.any.js 及其好友) 在不同範圍 (windowworker 等) 中執行相同的測試;.https.sub.html 要求測試透過 HTTPS 載入,並提供伺服器端替代支援,如下所示:

var anotherOrigin = "https://&#123;&#123;hosts[][www1]}}:&#123;&#123;ports[https][0]}}/path/to/page.html";

查詢字串中也可以啟用部分功能。 baz.html?pipe=sub|header(X-Key,val)|trickle(d1) 會啟用替代功能,將 X-Key: val 新增至回應標頭,並延遲 1 秒再回應。詳情請參閱 web-platform-tests.org 上的「管道」。

WPT 也可以測試尚未納入規格的行為;只要將測試命名為 .tentative。如需 Blink 內部 API (例如 testRunnerinternals),請在 web_tests/wpt_internal 中進行測試。

對 WPT 所做的變更會自動匯出至 GitHub。您將會在 CL 中看到機器人的留言。系統也會持續匯入來自其他廠商的 GitHub 變更。如要在匯入新錯誤時自動收到回報的錯誤,請在 WPT 的子目錄中建立 OWNERS 檔案:

# TEAM: your-team@chromium.org
# COMPONENT: Blink>YourComponent
# WPT-NOTIFY: true
emails-here-will-be-cc@chromium.org

其他資源

  • 想知道您的測試如何在其他瀏覽器中執行,以及功能的互通性嗎?使用 wpt.fyi
  • 需要有關 API、指南、範例、提示等的更多說明文件嗎?前往 web-platform-tests.org