⏯
Lost Pixel Platform
Setting up Lost Pixel Platform - managed version of Lost Pixel
Lost Pixel Platform offers a managed service with a user-friendly interface for a more efficient visual regression testing workflow.
The platform version provides additional features, such as collaboration tools, automated test runs, and detailed reporting. By upgrading to the Lost Pixel Platform, you can streamline your visual regression testing process, improve collaboration with your team, and gain access to valuable insights and analytics.
Lost Pixel Platform has first class integration with GitHub & GitHub Actions but can be set up with any CI provider
given it runs on GitHubWe need to create
lost-pixel.config.js|ts file that will run the whole setup. We will use the example of lost-pixel.com as it is set up on our own platform 😊lost-pixel.config.ts
import { CustomProjectConfig } from 'lost-pixel';
export const config: CustomProjectConfig = {
pageShots: {
pages: [
{ path: '/', name: 'landing' },
{
path: '/blog',
name: 'blog',
},
],
baseUrl: 'http://172.17.0.1:3000',
},
lostPixelProjectId: 'we_will_paste_id_here_later',
apiKey: process.env.LOST_PIXEL_API_KEY,
};
Next up GitHub action declaration file that lives in `.github/workflows`. We are building & serving our Next.js application & run lost pixel on it's pages(defined in above file):
visual-regression.yml
on: [push, pull_request]
jobs:
build:
runs-on: ubuntu-latest
name: Lost Pixel
steps:
- name: Checkout
uses: actions/[email protected]
- name: Setup Node
uses: actions/setup-[email protected]
with:
node-version: 16.x
- name: Instal pnpm
uses: pnpm/action-[email protected]
with:
version: 7.17.1
- name: Install dependencies
run: pnpm install
- name: Build next
run: pnpm run build
- name: Start next
run: pnpm run start &
- name: Lost Pixel
uses: lost-pixel/lost-[email protected]
env:
LOST_PIXEL_API_KEY: ${{ secrets.LOST_PIXEL_API_KEY }}
Visit Lost Pixel installation page and install Lost Pixel App on organisations & repositories you want to have visual tests on
Sign in using GitHub into app.lost-pixel.com, switch to correct organisation & select which repositories selected in previous step should be visible on Lost Pixel Platform:
app.lost-pixel.com/app/repos/manage
From onboarding screen copy your
project id and replace it in the lost-pixel.config.ts created in the first steplostPixelProjectId: 'clcuk66iz005wp41h3cauveb2',
Copy the Lost Pixel api key, we will need to do the final step to provide it as a GitHub Action secret
app.lost-pixel.com/app/repos/lost-pixel-landing
Setting LOST_PIXEL_API_KEY as Action Secret
Now all of new pushes to your repository are triggering visual tests that you can conveniently manage yourself or collaboratively with your team!
lost-pixel.com visual test managed on Lost Pixel Platform
Last modified 2mo ago