https://github.com/lost-pixel/lost-pixel Skip to content Toggle navigation Sign up * Product + Actions Automate any workflow + Packages Host and manage packages + Security Find and fix vulnerabilities + Codespaces Instant dev environments + Copilot Write better code with AI + Code review Manage code changes + Issues Plan and track work + Discussions Collaborate outside of code + Explore + All features + Documentation + GitHub Skills + Changelog * Solutions + By Plan + Enterprise + Teams + Compare all + By Solution + CI/CD & Automation + DevOps + DevSecOps + Case Studies + Customer Stories + Resources * Open Source + GitHub Sponsors Fund open source developers + The ReadME Project GitHub community articles + Repositories + Topics + Trending + Collections * Pricing [ ] * # In this repository All GitHub | Jump to | * No suggested jump to results * # In this repository All GitHub | Jump to | * # In this organization All GitHub | Jump to | * # In this repository All GitHub | Jump to | Sign in Sign up {{ message }} lost-pixel / lost-pixel Public * Notifications * Fork 11 * Star 449 Holistic visual regression testing framework for modern web First class integration with Storybook, Ladle & other frontend libraries. License MIT license 449 stars 11 forks Star Notifications * Code * Issues 4 * Pull requests 3 * Discussions * Actions * Projects 1 * Security * Insights More * Code * Issues * Pull requests * Discussions * Actions * Projects * Security * Insights lost-pixel/lost-pixel This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. Use this GitHub Action with your project Add this Action to an existing workflow or create a new one. View on Marketplace main Switch branches/tags [ ] Branches Tags Could not load branches Nothing to show {{ refName }} default View all branches Could not load tags Nothing to show {{ refName }} default View all tags 121 branches 81 tags Code * Clone HTTPS GitHub CLI [https://github.com/l] Use Git or checkout with SVN using the web URL. [gh repo clone lost-p] Work fast with our official CLI. Learn more. * Open with GitHub Desktop * Download ZIP Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Launching Xcode If nothing happens, download Xcode and try again. Launching Visual Studio Code Your codespace will open once ready. There was a problem preparing your codespace, please try again. Latest commit @chriskalmar chriskalmar Merge pull request #64 from lost-pixel/renovate/ typescript-eslint-mon... ... 53e5d67 Sep 19, 2022 Merge pull request #64 from lost-pixel/renovate/ typescript-eslint-mon... ...orepo Update dependency @typescript-eslint/eslint-plugin to v5.38.0 53e5d67 Git stats * 839 commits Files Permalink Failed to load latest commit information. Type Name Latest commit message Commit time .github Update 8398a7/action-slack digest to e080ee3 Sep 18, 2022 .lostpixel update lost-pixel baseline Jul 1, 2022 config-templates differentiate beteen regular and type imports Sep 18, 2022 docs bump up lost-pixel version Aug 25, 2022 examples bump up lost-pixel version Aug 26, 2022 fixtures add image fixtures Mar 30, 2022 src differentiate beteen regular and type imports Sep 18, 2022 .eslintignore extend ignore list Jun 5, 2022 .eslintrc extend eslint rules for better readability Sep 15, 2022 .gitbook.yaml summary should live in the root of the docs folder May 12, 2022 .gitignore update gitignore and add config for example project Jul 5, 2022 .nvmrc upgrade to node 16 Dec 27, 2021 .prettierrc add xo Jun 5, 2022 CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md May 11, 2022 CONTRIBUTING.md rename lost-pixel-action to lost-pixel Jun 4, 2022 Dockerfile upgrade playwright lib and docker container Sep 18, 2022 LICENSE update license ;) May 24, 2022 README.md Update README.md Sep 10, 2022 action.yml remove action inputs, using config file now Apr 11, 2022 docker-compose.yml add docker compose file Dec 26, 2021 entrypoint.sh accept command params in docker entrypoint Sep 11, 2022 jest.config.js run only tests from src folder Jul 20, 2022 package-lock.json Update dependency @typescript-eslint/eslint-plugin to v5.38.0 Sep 19, 2022 package.json Update dependency @typescript-eslint/eslint-plugin to v5.38.0 Sep 19, 2022 renovate.json Add renovate.json Dec 28, 2021 test-on-examples.sh implement ladle ci run Jul 22, 2022 tsconfig.json include tests in ts config Jun 6, 2022 View code [ ] Lost Pixel Holistic visual regression testing solution Quick start video What is Lost Pixel Get the platform beta invite Quick start [?] Support Ask a question about Lost Pixel Create a bug report for Lost Pixel Submit a feature request Contributing [?] README.md [168112844-77e76a0d-b] Lost Pixel Holistic visual regression testing solution [6874747073] [6874747073] [6874747073] Documentation * Quickstart * Examples [187195828-92e2a8fd-0bd5-4b66-bb82-596f5688dc4d] Quick start video --------------------------------------------------------------------- What is Lost Pixel Lost Pixel is an open source visual regression testing tool. Run visual regression tests on your Storybook and Ladle stories and on your application pages. Provider Status Description Storybook First class integration. Provide your storybook build - Lost Pixel does the rest. Ladle First class integration. Provide your ladle build - Lost Pixel does the rest. Visual tests for modern frontend apps like Next, Pages Gatsby, Remix. Run your app - provide Lost Pixel with paths to test. Take care of taking screenshots on your side - Custom provide Lost Pixel with path to directory with shots images. Best suitable for custom Cypress/Playwright integrations Lost Pixel consists of two products: * lost-pixel (open BETA) - the core engine driving the visual regression test runs. It could be used standalone and the main use-cases are outlined in the documentation What machine sees What human sees ezgif-5-e71eb0773d ezgif-5-43091ece5d * lost-pixel-platform (closed BETA) - the UI and CI helpers that allow you to use lost-pixel's managed version. This includes specified regression UI, collaboration with team members and easy approval/rejection process for the snapshots. Configure it just once and enjoy hassle free visual regression tests integrated into your GitHub actions pipeline. --------------------------------------------------------------------- Get the platform beta invite --------------------------------------------------------------------- Quick start [?] Storybook Assuming you are using basic example of Storybook. This setup will run visual regression tests against all the storybook stories on every push. You can find more examples in the examples repository. You can learn more about Lost Pixel workflow and get more useful recipes in documentation. Add lostpixel.config.ts at the root of the project: import { CustomProjectConfig } from 'lost-pixel'; export const config: CustomProjectConfig = { storybookShots: { storybookUrl: './storybook-static', }, generateOnly: true, failOnDifference: true, }; Add GitHub action .github/workflows/lost-pixel-run.yml on: [push] jobs: build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v2 - name: Setup Node uses: actions/setup-node@v2 with: node-version: 16.x cache: 'npm' - name: Install dependencies run: npm ci - name: Build Storybook run: npm run build-storybook - name: Lost Pixel uses: lost-pixel/lost-pixel@2.15.0 Ladle example Assuming you are using basic example of Ladle. This setup will run visual regression tests against all the ladle stories on every push. You can find more examples in the examples repository. You can learn more about Lost Pixel workflow and get more useful recipes in documentation. Add lostpixel.config.ts at the root of the project: import { CustomProjectConfig } from "lost-pixel"; export const config: CustomProjectConfig = { ladleShots: { ladleUrl: "http://172.17.0.1:61000", }, generateOnly: true, failOnDifference: true }; Update package.json with following scripts: "scripts": { "serve": "npx serve build -p 61000", "build": "ladle build" }, Add GitHub action .github/workflows/lost-pixel-run.yml on: [push] jobs: build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v2 - name: Setup Node uses: actions/setup-node@v2 with: node-version: 16.x cache: "npm" - name: Install dependencies run: npm install - name: Build ladle run: npm run build - name: Serve ladle run: npm run serve & - name: Lost Pixel uses: lost-pixel/lost-pixel@v2.15.0 Pages example(next.js) [?][?] Assuming you are using basic example of Next.js. This setup will run visual regression tests against selected pages on every push. You can find more examples in the examples repository. You can learn more about Lost Pixel workflow and get more useful recipes in documentation. Add lostpixel.config.ts at the root of the project: import { CustomProjectConfig } from 'lost-pixel'; export const config: CustomProjectConfig = { pageShots: { pages: [ { path: '/app', name: 'app' }, ], pageUrl: 'http://localhost:3000', }, generateOnly: true, failOnDifference: true, }; Add GitHub action .github/workflows/lost-pixel-run.yml on: [push] jobs: build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v2 - name: Setup Node uses: actions/setup-node@v2 with: node-version: 16.x cache: "npm" - name: Install dependencies run: npm ci - name: Build Next app run: npm run build - name: Run Next app run: npm run start & - name: Lost Pixel uses: lost-pixel/lost-pixel@v2.15.0 --------------------------------------------------------------------- Support Ask a question about Lost Pixel You can ask questions and initiate discussions about Lost Pixel. Ask a question Create a bug report for Lost Pixel If you see an error message or run into an issue, help us with creating a bug report! Create bug report Submit a feature request If Lost Pixel at the moment doesn't support some mode or does not have a feature we would appreciate your thoughts! Submit feature request --------------------------------------------------------------------- Contributing [?] Lost Pixel is open source in it's heart and welcomes any external contribution. You can refer to CONTRIBUTING.md to get going with the project locally in couple of minutes. About Holistic visual regression testing framework for modern web First class integration with Storybook, Ladle & other frontend libraries. Topics typescript testing-tools visual-regression-testing visual-regressions Resources Readme License MIT license Code of conduct Code of conduct Stars 449 stars Watchers 5 watching Forks 11 forks Releases 76 v2.17.0 Latest Sep 11, 2022 + 75 releases Packages 0 No packages published Used by 8 * @actions-marketplace-validations * @d-ivashchuk * @d-ivashchuk * @d-ivashchuk * @lost-pixel * @lost-pixel * @lost-pixel Contributors 7 * @chriskalmar * @d-ivashchuk * @renovate[bot] * @dependabot[bot] * @snyk-bot * @renovate-bot * @TkDodo Languages * TypeScript 95.7% * JavaScript 2.4% * Shell 1.6% * Dockerfile 0.3% Footer (c) 2022 GitHub, Inc. Footer navigation * Terms * Privacy * Security * Status * Docs * Contact GitHub * Pricing * API * Training * Blog * About You can't perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.