Walk in more browsers and on devices

By default a run captures every step in Chromium, in each locale and viewport of the scenario. You can add browser engines, device presets, dark mode and a few more settings. Every combination becomes its own capture, so add only what the task is about: a Safari bug needs WebKit on the affected steps, not every setting on every step.

In the scenario #

viewports: [iphone-se, iphone-15, pixel-8, ipad-landscape, laptop]
browsers: [chromium, webkit, firefox]
color_schemes: [light, dark]
reduced_motion: [no-preference, reduce]   # optional
forced_colors: [none, active]             # optional, Windows high contrast
display_modes: [browser, standalone]      # optional, the page as an installed web app

Defaults for the whole project go under walk: in kaloko.config.yml. The command line wins over the scenario, and the scenario over the config.

For one run #

npx kaloko start --scenario qa/flows/checkout.yml --env staging \
  --browsers chromium,webkit --color-schemes light,dark --viewports iphone-se,pixel-8,desktop-hd
npx kaloko walk                      # one pass per engine and device
npx kaloko walk --browsers webkit    # only the WebKit captures of the run

Device presets #

npx kaloko devices lists the presets: phones (iphone-se, iphone-15, pixel-8, galaxy-s24…), foldables (fold-folded, fold-open), tablets (ipad-portrait, ipad-landscape…), computers (laptop, desktop-hd, desktop-wide) and tv-1080p. Add -landscape to turn a phone, foldable or tablet sideways (iphone-15-landscape). A preset sets the size, pixel ratio, touch and the device's user agent. It catches layout bugs; a real device catches the rest.

Install the engines #

WebKit (Safari's engine) and Firefox are downloaded once per machine or CI job:

npx kaloko browser install --browsers webkit,firefox

npx kaloko doctor lists the engines your scenarios need and says how to install a missing one. On Linux CI add --with-deps for the system libraries.

What to expect #

• A few checks run only in Chromium: names from the accessibility tree, visible focus and layout shifts, and on WebKit also the Tab walk. On other engines they say "not evaluated" with the reason and do not make the step partial.
• Contrast is checked per colour scheme, so a dark-mode contrast bug fails on the dark capture.
• A run refuses more than 400 combinations.

On the canvas the browser, colour scheme and other settings sit next to the language switcher. The step detail of a device preset draws the device frame, and Beside: shows the same step in another browser or scheme next to it.