Pixaton is an innovative toolset designed for UI testing through pixel diffing of screenshots, leveraging the power of Puppeteer. This repository comprises a collection of helpers that significantly streamline the process of testing user interfaces, allowing for rapid and efficient comparisons of visual elements under test.

Why Choose Pixaton?

• Speed Efficiency: On an M1 MacBook Pro, Pixaton processes 120 screenshots in just 60 seconds—dramatically faster than traditional cloud-based products, which can take up to 12 minutes.
• Reusable Headless Browser Instance: To optimize performance, Pixaton reuses headless browser instances, ensuring that your tests run faster and with less overhead. Some initial setup is required, and detailed guidance can be found in demo-tests/_setup.js.

Easy Integration

Getting started with Pixaton is straightforward. Simply install the necessary packages:

npm install puppeteer pixaton

Pixaton’s testPixels function allows for seamless configuration, forwarding options to both Puppeteer and pixelmatch, which means you retain versatility while using it. For a comprehensive overview of configuration options, refer to index.d.ts.

Usage Example

To utilize Pixaton in your testing setup, you can create a wrapper like this:

// Import the myTestPixels from your main setup file:
import { myTestPixels } from './_setup.js'

myTestPixels(
  import.meta.filename, // Use the filename as the test name
  '/', // The URL path to test
  'main', // The relevant CSS selector
  {
    async setup(page) {
      await page.type('input[type=email]', 'john@example.com')
    }
  }
)

Once your tests run, you can view reports indicating differences in UI components. For instance, if a login button’s shape changes, you’ll get a visual report highlighting the modifications:

Screenshot Management

After reviewing your results, you can finalize your successful tests by hitting Approve Candidate. This action renames the respective .candidate.png to .gold.png and removes the .diff.png. It's essential to keep your gold screenshots stored in your repository while excluding temporary files through an appropriate .gitignore setup:

# Exclude temporary files
 demo-tests/*.diff.png
 demo-tests/*.candidate.png

Get Started with the Demo

1. Clone the repository.
2. Run npm install.
3. For the demo application, install Mockaton by running npm install mockaton.
4. Start the demo with npm run demo.
5. Run tests in another terminal tab using npm run demo-test.

This setup will display a comparison report highlighting the differences, such as button styles.

Explore More Examples

Delve deeper into Pixaton and see practical implementations by checking out the demo tests located in ./demo-tests. Additionally, Mockaton integrates Pixaton for UI testing, so you can explore more examples here.

Harness the power of Pixaton for efficient, fast, and reliable UI testing today!