Help us understand the problem. What is going on with this article?

WPTをChromeで実行してHTML5 APIを理解する

More than 3 years have passed since last update.

WPTとは

WPT (web-platform-tests)という、ブラウザを作っている人のためのテストスイートがある。これは、ブラウザがどう動くべきかを定義している様々なWeb標準を、各ブラウザが満たしていてるかを確認するためのテストなのだが、Webサイトを作っているWebデベロッパーが新しいWebのAPIをどう使ったらいいかを調べるときにも役立つと思う。

という話を、電車で横に座っていたとある人に話したら「じゃあ、やり方を(日本語で)紹介してくださいよ。」と言われたので、簡単に紹介したい。

手軽に試す

手軽に試したければ、https://w3c-test.org 以下にある目的のテストファイルを開くといい。

例えば、Service Worker Navigation Preloadのテストであれば https://w3c-test.org/service-workers/service-worker/navigation-preload/chunked-encoding.https.html を開くと、色々と実行されて、最終的に下のように表示される。
w3c-test.png

F12またはCtrl+Shit+IでDevToolsを起動することができるので、ブレークポイントを仕掛けてページをリロードするとステップ実行していきながら挙動を確認することができる。

ローカルで試す

テストファイルを少し変更しながら挙動を試していきたいという場合は、ローカルでサーバを立てればよい。

  1. まず、https://github.com/w3c/web-platform-tests を手元の環境にcloneする。
  2. hostsファイルを書き換える権限がある場合は、WPTのREADMEにかかれている通りに、テスト用のドメインを127.0.0.1に向くようにhostsファイルを書き換える。権限がない、もしくは面倒な場合は、config.default.jsonファイルをconfig.jsonにコピーして、ファイルを開いてcheck_subdomainsbind_hostnametruefalseに書き換える。
  3. ./wpt serveでサーバーを起動。Windowsの場合はpython wpt serve
  4. Chromeを--user-data-dir=適当な空のディレクトリ--ignore-certificate-errorsの引数付きで起動する。(注意:証明書エラーを無視する設定で起動するのでこの環境はテスト以外の目的で使わないこと。) 2.でhostsファイルを書き換えなかった場合は--host-resolver-rules="MAP *.test 127.0.0.1"も追加する。
  5. https://web-platform.test:8443/ にアクセスし、目的のテストファイルを開く。

ChromiumのLayoutTest

WPTのプロジェクトが始まる前は、ChromiumのWebのテストはレポジトリthird_party/WebKit/LayoutTests/に置かれていた。徐々にWPTに移行していこうという動きはあるが、一部のテストはまだ移行されずに残っている。ChromiumのLayoutTestを試してみたい場合は、Chromiumのソースをcheckoutし、third_party/WebKit/Tools/Scripts/run-blink-httpd実行し、http://127.0.0.1:8000 にアクセスすると良い。http以外のディレクトリにあるテストファイルは直接開いて実行できる。(ちなみに、LayoutTestという名前は歴史的な理由で、レイアウト処理以外のテストも含まれている。)

どこにテストがあるか検索したい

WPTは定期的にChromiumのレポジトリthird_party/WebKit/LayoutTests/external/wpt/と同期されているので、Chromiumのコードサーチ cs.chromium.org でChromiumのLayoutTestとWPTの両方を検索することができる。ここから使いたいAPIで検索すると、目当てのテストを見つけることができる。

horo
Chrome作ってる中の人の一人です。 Qiita上の私の記事・コメントは個人的な意見に基づくものであり、所属する組織、団体とは一切関係ありません。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした