The Chromium Chronicle #4: Test your Web Platform Features with WPT

Episode 4: by Robert in Waterloo, ON (July, 2019)
Previous episodes

If you work on Blink, you might know of web_tests (formerly LayoutTests). web-platform-tests (WPT) lives inside web_test/external/wpt. WPT is the preferred way to test web-exposed features as it is shared with other browsers via GitHub. It has two main types of tests: reftests and testharness.js tests.

reftests take and compare screenshots of two pages. By default, screenshots are taken after the load event is fired; if you add a reftest-wait class to the <html> element, the screenshot will be taken when the class is removed. Disabled tests mean diminishing test coverage. Be aware of font-related flakiness; use the Ahem font when possible.

testharness.js is a JavaScript framework for testing anything except rendering. When writing testharness.js tests, pay attention to timing, and remember to clean up global state.

Flaky timeout & potential leaked states:

promise_test(async t => {
  assert_equals(await slowLocalStorageTest(), "expected", "message");

A better test with long timeout & cleanup:

<meta name="timeout" content="long">
promise_test(async t => {
  t.add_cleanup(() => localStorage.clear());
  assert_equals(await slowLocalStorageTest(), "expected", "message");

Use testdriver.js if you need automation otherwise unavailable on the web. You can get a user gesture from test_driver.bless, generate complex, trusted inputs with test_driver.action_sequence, etc.

WPT also provides some useful server-side features through file names. Multi-global tests (.any.js and its friends) run the same tests in different scopes (window, worker, etc.); .https.sub.html asks the test to be loaded over HTTPS with server-side substitution support like below:

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

Some features can also be enabled in query strings. baz.html?pipe=sub|header(X-Key,val)|trickle(d1) enables substitution, adds X-Key: val to the headers of the response, and delays 1 second before responding. Search for "pipes" on for more.

WPT can also test behaviors that are not included in specs yet; just name the test as .tentative. If you need Blink internal APIs (e.g. testRunner, internals), put your tests in web_tests/wpt_internal.

Changes made to WPT are automatically exported to GitHub. You will see comments from a bot in your CL. GitHub changes from other vendors are also continuously imported. To receive automatically filed bugs when new failures are imported, create an OWNERS file in a subdirectory in WPT:

# COMPONENT: Blink>YourComponent
# WPT-NOTIFY: true

Additional Resources

  • Want to find out how your tests run on other browsers, and how interoperable your feature is? Use
  • Looking for more documentation on APIs, guidelines, examples, tips and more? Visit