Package Health Score

78 / 100

security
Security review needed
popularity
Small
maintenance
Healthy
community
Active

Explore Similar Packages

Security

Security review needed

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

Version				Vulnerabilities	License Risk
3.16.0	\|	03/2024	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
3.15.1	\|	02/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.24.1	\|	01/2023		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.12.1	\|	06/2022		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.11.0	\|	06/2022		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Small

Weekly Downloads (8,531)

GitHub Stars: 1.22K
Forks: 35
Contributors: 20

Direct Usage Popularity

The npm package lost-pixel receives a total of 8,531 downloads a week. As such, we scored lost-pixel popularity level to be Small.

Based on project statistics from the GitHub repository for the npm package lost-pixel, we found that it has been starred 1,217 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Active

Readme.md: Yes
Contributing.md: Yes
Code of Conduct: Yes
Contributors: 20
Funding: No

With more than 10 contributors for the lost-pixel repository, this is possibly a sign for a growing and inviting community.

Embed Package Health Score Badge

Maintenance

Healthy

Commit Frequency

Open Issues: 22
Open PR: 16
Last Release: 2 months ago
Last Commit: 2 months ago

Further analysis of the maintenance status of lost-pixel based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Healthy.

We found that lost-pixel demonstrates a positive version release cadence with at least one new version released in the past 3 months.

In the past month we didn't find any pull request activity or change in issues status has been detected for the GitHub repository.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: >=18

Age: 2 years
Dependencies: 23 Direct
Versions: 68
Install Size: 490 kB
Dist-tags: 2
# of Files: 64
Maintainers: 1
TS Typings: No

lost-pixel has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

Lost Pixel

Open source alternative to Percy, Chromatic, Applitools

Documentation • Quickstart • Examples

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 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.
Histoire	✅	`First class integration`. Provide your histoire build - Lost Pixel does the rest.
Pages	✅	Visual tests for modern frontend apps like Next, Gatsby, Remix. Run your app - provide Lost Pixel with paths to test.
Custom shots	✅	Take care of taking screenshots on your side - provide Lost Pixel with a path to the directory with images. Best suitable for custom Cypress/Playwright integrations

Lost Pixel consists of two products:

lost-pixel - 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 👀

Lost Pixel Platform - 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 an easy approval/rejection process for the snapshots. You can configure it once and enjoy hassle-free visual regression tests integrated into your GitHub actions pipeline. lost-pixel repository is core to the SaaS offering and is being actively improved & maintained.

https://user-images.githubusercontent.com/29632358/222420960-57924da4-d0bf-4478-9322-fc68686485b6.mp4

🚀 Start using platform for free 🚀

📚 Platform documentation 📚

Features

🌐 Visual regression testing in a browser of your choice (chrome, firefox, safari)
📱 Responsive tests running with different breakpoints and viewports
🖥️ Multiple browser execution (Chrome, Mozilla, Safari)
🔀 Parallel execution (limited in OSS version)
🎚️ Flexible sensitivity thresholds
🔄 Flaky test retries. Utilities to reduce flakiness.
🚫 Masking of parts of the UI that should be excluded from tests
✅ Seamless approval flow (Lost Pixel Platform only)
🤖 Executing arbitrary code before tests to reduce flakiness
🖼️ Review UI that makes comparing images an effortless task (Lost Pixel Platform only)
📦 Monorepo execution (Lost Pixel Platform only)

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',
  },
   // OSS mode 
  generateOnly: true,
  failOnDifference: true
  
  // Lost Pixel Platform (to use in Platform mode, comment out the OSS mode and uncomment this part )
  // lostPixelProjectId: "xxxx",
  // process.env.LOST_PIXEL_API_KEY,
};

Add GitHub action .github/workflows/lost-pixel-run.yml

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 ci

      - name: Build Storybook
        run: npm run build-storybook

      - name: Lost Pixel
        uses: lost-pixel/lost-pixel@v3.16.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: {
    //ip should be localhost when running locally &amp; 172.17.0.1 when running in GitHub action
    ladleUrl: 'https://172.17.0.1:61000',
  },
   // OSS mode 
  generateOnly: true,
  failOnDifference: true
  
  // Lost Pixel Platform (to use in Platform mode, comment out the OSS mode and uncomment this part )
  // lostPixelProjectId: "xxxx",
  // process.env.LOST_PIXEL_API_KEY,
};

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@v3

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

      - name: Install dependencies
        run: npm install

      - name: Build ladle
        run: npm run build

      - name: Serve ladle
        run: npm run serve &amp;

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

Histoire example 📖

Assuming you are using basic example of Histoire. This setup will run visual regression tests against all the histoire 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 = {
  histoireShots: {
    //ip should be localhost when running locally &amp; 172.17.0.1 when running in GitHub action
    histoireUrl: './.histoire/dist',
  },
   // OSS mode 
  generateOnly: true,
  failOnDifference: true
  
  // Lost Pixel Platform (to use in Platform mode, comment out the OSS mode and uncomment this part )
  // lostPixelProjectId: "xxxx",
  // process.env.LOST_PIXEL_API_KEY,
};

Add GitHub action .github/workflows/lost-pixel-run.yml

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 histoire
        run: npm run story:build

      - name: Lost Pixel
        uses: lost-pixel/lost-pixel@v3.16.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' }],
    // IP should be localhost when running locally &amp; 172.17.0.1 when running in GitHub action
    baseUrl: 'https://172.17.0.1:3000',
  },
  // OSS mode 
  generateOnly: true,
  failOnDifference: true
  
  // Lost Pixel Platform (to use in Platform mode, comment out the OSS mode and uncomment this part )
  // lostPixelProjectId: "xxxx",
  // process.env.LOST_PIXEL_API_KEY,
};

Add GitHub action .github/workflows/lost-pixel-run.yml

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 ci

      - name: Build Next app
        run: npm run build

      - name: Run Next app
        run: npm run start &amp;

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

Custom shots (Playwright example)🎭

Assuming you are running some playwright tests, where you want to add visual tests at any step. This setup will run visual regression tests against all the tests, where you've generated lost-pixel screenshots, 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 = {
 customShots: {
    currentShotsPath: "./lost-pixel",
  },
  // OSS mode 
  generateOnly: true,
  failOnDifference: true
  
  // Lost Pixel Platform (to use in Platform mode, comment out the OSS mode and uncomment this part )
  // lostPixelProjectId: "xxxx",
  // process.env.LOST_PIXEL_API_KEY,
};

Update your Playwright tests with following line(note, that there is no external dependency needed here):

import { test } from '@playwright/test';

test('lost-pixel e2e', async ({ page }) =&gt; {
  // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts)
  await page.goto('https://172.17.0.1:3000/context');
  await page.click('data-test-id=context-click-counter');
  await page.click('data-test-id=context-click-counter');
  await page.click('data-test-id=context-click-counter');
  await page.click('data-test-id=context-click-counter');
  // Run lost-pixel visual regression test after doing some functional testing on the page
  await page.screenshot({ path: 'lost-pixel/a.png', fullPage: true });
});

Add GitHub action .github/workflows/lost-pixel-run.yml

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    name: Lost Pixel

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

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

      - name: Install dependencies
        run: npm install --legacy-peer-deps

      - name: Build Next app
        run: npm run build

      - name: Run Next app
        run: npm run start &amp;

      - name: Playwright tests
        run: npx playwright install --with-deps &amp;&amp; npm run test:e2e

      - name: Lost Pixel
        uses: lost-pixel/lost-pixel@v3.16.0
        env:
          LOST_PIXEL_API_KEY: ${{ secrets.LOST_PIXEL_API_KEY }}

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

Community

Want to chat about visual regression testing with likeminded people? We've started a community! Discuss your pipelines, tools, testing strategy, get faster support!

Join our Discord

Using Lost Pixel Platform in non-commercial Open Source projects

We are excited to offer you free usage of Lost Pixel Platform(SaaS) for your Open Source repositories, feel free to reach out to oss@lost-pixel.com to get started!

If you are already using Lost Pixel it would mean a lot to us if you give us a shoutout by including our badge in your OSS project readme!

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.

Lost Pixel Usage Insights 📈

FAQs

What is lost-pixel?

GitHub Action for Lost Pixel integration. Visit Snyk Advisor to see a full health score report for lost-pixel, including popularity, security, maintenance & community analysis.

Is lost-pixel popular?

The npm package lost-pixel receives a total of 8,531 weekly downloads. As such, lost-pixel popularity was classified as small. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is lost-pixel well maintained?

We found that lost-pixel demonstrated a healthy version release cadence and project activity. It has a community of 20 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is lost-pixel safe to use?

While scanning the latest version of lost-pixel, we found that a security review is needed. A total of 0 vulnerabilities or license issues were detected. See the full security scan results.

Last updated on 1 May-2024, at 14:50 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (8,531)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Readme

Lost Pixel

Open source alternative to Percy, Chromatic, Applitools

Quick start video

What is Lost Pixel ❓

🚀 Start using platform for free 🚀

📚 Platform documentation 📚

Features

Quick start ⚡

Support 👨🏼‍💻

Ask a question about Lost Pixel

Create a bug report for Lost Pixel

Submit a feature request

Community

Join our Discord

Using Lost Pixel Platform in non-commercial Open Source projects

Contributing 🏗️

Lost Pixel Usage Insights 📈

lost-pixel dependencies

lost-pixel development dependencies

FAQs

What is lost-pixel?

Is lost-pixel popular?

Is lost-pixel well maintained?

Is lost-pixel safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues