Chromium Chronicle n°4: tester les fonctionnalités de votre plate-forme Web avec le WPT

Épisode 4:Robert à Waterloo, Ontario (juillet 2019)
Épisodes précédents

Si vous travaillez sur Blink, vous connaissez peut-être web_tests (anciennement LayoutTests). Web-platform-tests (WPT) se trouve dans web_test/external/wpt. WPT est le moyen privilégié pour tester les fonctionnalités exposées sur le Web, car il est partagé avec d'autres navigateurs via GitHub. Il comporte deux types de tests principaux: reftests et testharness.js.

reftests prend et compare des captures d'écran de deux pages. Par défaut, les captures d'écran sont effectuées après le déclenchement de l'événement load. Si vous ajoutez une classe reftest-wait à l'élément <html>, la capture d'écran est effectuée lorsque la classe est supprimée. Si vous désactivez les tests, la couverture de test diminue. Tenez compte des irrégularités liées à la police ; utilisez la police Ahem lorsque cela est possible.

testharness.js est un framework JavaScript permettant de tester n'importe quel élément, à l'exception de l'affichage. Lorsque vous écrivez des tests testharness.js, faites attention au timing et n'oubliez pas de nettoyer l'état global.

Délai d'expiration incohérent et états de fuite potentiels:

À éviter
<script>
promise_test(async t => {
  assert_equals(await slowLocalStorageTest(), "expected", "message");
  localStorage.clear();
});
</script>

Test plus efficace avec un délai d'inactivité prolongé et un nettoyage:

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

Utilisez testdriver.js si vous avez besoin d'automatisation, mais pas sur le Web. Vous pouvez obtenir un geste utilisateur depuis test_driver.bless, générer des entrées complexes et fiables avec test_driver.action_sequence, etc.

WPT fournit également des fonctionnalités utiles côté serveur via des noms de fichiers. Les tests multi-globals (.any.js et ses amis) exécutent les mêmes tests dans différents champs d'application (window, worker, etc.). .https.sub.html demande au test d'être chargé via HTTPS avec une substitution côté serveur, comme ci-dessous:

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

Certaines fonctionnalités peuvent également être activées dans les chaînes de requête. baz.html?pipe=sub|header(X-Key,val)|trickle(d1) active la substitution, ajoute X-Key: val aux en-têtes de la réponse et retarde d'une seconde la réponse. Pour en savoir plus, recherchez "pipes" sur web-platform-tests.org.

WPT peut également tester des comportements qui ne sont pas encore inclus dans les spécifications. Nommez le test .tentative. Si vous avez besoin d'API internes Blink (par exemple, testRunner ou internals), exécutez vos tests dans web_tests/wpt_internal.

Les modifications apportées à WPT sont automatiquement exportées vers GitHub. Vous verrez les commentaires d'un bot dans votre CL. Les modifications GitHub provenant d'autres fournisseurs sont également importées en continu. Pour recevoir des bugs signalés automatiquement lorsque de nouveaux échecs sont importés, créez un fichier OWNERS dans un sous-répertoire dans WPT:

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

Autres ressources

  • Vous voulez savoir comment vos tests s'exécutent sur d'autres navigateurs et quel est le degré d'interopérabilité de votre fonctionnalité ? Utilisez wpt.fyi.
  • Vous recherchez plus de documentation sur les API, des consignes, des exemples, des conseils et plus encore ? Accédez à web-platform-tests.org.