Lost Pixel visual regression testing

Lost Pixel is a modern open-source visual regression testing tool that allows you to run self-hosted visual regression tests. Lost Pixel Platform is for teams and is a cloud version of visual testing.

Setting up self-hosted visual testing

Lost Pixel has first-class Poveste support meaning that you don't need to do much to add visual tests to your app if you have your Poveste book ready!

Start with installing lost-pixel by npm install lost-pixel and creating a lostpixel.config.js|ts file with following contents.

import { CustomProjectConfig } from 'lost-pixel'

export const config: CustomProjectConfig = {
  histoireShots: {
    histoireUrl: './.poveste/dist',
  },
  generateOnly: true,
  failOnDifference: true
}

histoireShots and histoireUrl are lost-pixel's names, not ours

Those two keys belong to lost-pixel's own config schema, which still spells them the histoire way — see histoireShots in its shipped types. They are not a Poveste alias and renaming them breaks the config. Only the path they point at is yours: ./.poveste/dist is where poveste build writes.

Before running visual tests you need to have your Poveste book built first.

This setup allows you to run visual tests locally. To test your stories run npx lost-pixel

To update the baselines run npx lost-pixel update.

GitHub actions

To run your tests on CI you can use lost-pixel action utility. If you are running on any other CI provider - lost-pixel is a docker image that is runnable on CI of your choice(only within GitHub currently though)

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 18.x
          cache: npm

      - name: Install dependencies
        run: npm install

      - name: Build poveste
        run: npm run story:build

      - name: Lost Pixel
        uses: lost-pixel/lost-pixel@v3.8.0

To update baselines locally run npx lost-pixel docker update, this will ensure that lost-pixel runs in docker and there are no OS differences in rendering between CI and local tests.

Lost Pixel Platform

If you have self-hosted version of tests working it is not complicated to migrate to Lost Pixel Platform. Follow this guide to achieve that.