Chromium Chronicle #4: WPT を使用してウェブ プラットフォームの機能をテストする

エピソード 4: Robert in Waterloo, ON（2019 年 7 月）
前のエピソード

Blink の場合は、web_tests（旧称 LayoutTests）をご存じかもしれません。web-platform-tests（WPT）は web_test/external/wpt 内にあります。ウェブで公開される機能をテストするには、WPT を使用することをおすすめします。GitHub を介して他のブラウザと WPT が共有されるためです。主に reftests テストと testharness.js テストという 2 種類のテストがあります。

reftests は、2 つのページのスクリーンショットを取得して比較します。デフォルトでは、スクリーンショットは load イベントが発生した後に撮影されます。reftest-wait クラスを <html> 要素に追加すると、クラスが削除されたときにスクリーンショットが撮影されます。テストを無効にすると、テスト カバレッジが縮小します。フォント関連の不安定性に注意し、可能であれば 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 とその友だち）は、異なるスコープ（window、worker など）で同じテストを実行します。.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 で「pipes」を検索してください。

WPT では、まだ仕様に含まれていない動作もテストできます。テストの名前は .tentative にします。Blink の内部 API（testRunner、internals など）が必要な場合は、テストを web_tests/wpt_internal に配置します。

WPT に加えた変更は、GitHub に自動的にエクスポートされます。CL に bot からのコメントが表示されます。他のベンダーによる 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 にアクセスします。