Tilted sphere with longitudinal stripes Modern Web Guides Docs Blog Toggle darkmode

Web Test Runner

Test runner for web applications.

👉   Headless browsers with Puppeteer, Playwright, Selenium or WebdriverIO.
🚧   Reports logs, 404s, and errors from the browser.
🔍   Debug opens a real browser window with devtools.
📦   Mock es modules using Import Maps.
🔧   Exposes browser properties like viewport size and dark mode.
⏱  Runs tests in parallel and isolation.
👀   Interactive watch mode.
🏃   Fast development by rerunning only changed tests.
🚀   Powered by esbuild and rollup plugins

Installation

Install the web test runner:

npm i --save-dev @web/test-runner

Then add the following to the "scripts" section in package.json:

"test": "web-test-runner test/**/*.test.js --node-resolve"

Or use the shorthand:

"test": "wtr test/**/*.test.js --node-resolve"

Note, the examples below assume an npm script is used.

Basic commands

Do a single test run:

web-test-runner test/**/*.test.js --node-resolve
wtr test/**/*.test.js --node-resolve

Run in watch mode, reloading on file changes:

web-test-runner test/**/*.test.js --node-resolve --watch
wtr test/**/*.test.js --node-resolve --watch

Run with code coverage profiling (this is slower):

web-test-runner test/**/*.test.js --node-resolve --coverage
wtr test/**/*.test.js --node-resolve --coverage

Transform JS to a compatible syntax based on user agent:

web-test-runner test/**/*.test.js --node-resolve --esbuild-target auto
wtr test/**/*.test.js --node-resolve --esbuild-target auto

Guide

Check out this step by step guide to get started.

Example projects

Check out the example projects for a fully integrated setup.