How to integrate reg-cli with Puppeteer for visual testing?

Use Puppeteer to capture screenshots and save them to a directory, then run reg-cli to compare these actual images against expected baselines. Automate this in a script that chains Puppeteer commands with reg-cli's comparison options, and use -R for HTML reports to review differences.

reg-cli vs Percy: which is better for visual regression testing?

reg-cli is a lightweight, self-hosted CLI tool ideal for teams wanting control and simplicity with Node.js integration, while Percy is a cloud-based service with built-in screenshot capture, collaboration, and cross-browser testing. Choose reg-cli for cost-effectiveness and Percy for an all-in-one solution with less manual setup.

How to set up reg-cli in a CI/CD pipeline like GitHub Actions?

Install reg-cli as a dev dependency, then add a step in your workflow YAML to run the comparison command with paths for actual, expected, and diff directories. Use options like -R for HTML reports and -I to ignore changes if needed, and ensure expected images are version-controlled or cached between runs.

What are the best threshold settings in reg-cli to avoid false positives?

Start with default settings (0 for thresholds) and adjust based on your UI's stability. Use matchingThreshold (-M) for pixel sensitivity, thresholdRate (-T) for difference ratio, and thresholdPixel (-S) for absolute pixel count, testing with known changes to balance detection accuracy and false positives.

Can reg-cli handle anti-aliasing differences in screenshots?

Yes, reg-cli has an enableAntialias option (-A) that can be set to true to account for anti-aliasing variations, but this is experimental and may need careful tuning to avoid masking real visual differences, as noted in the README.

How to generate reports from existing JSON data with reg-cli?

Use the -F option followed by the JSON file path (e.g., -F ./reg.json) along with -R for the HTML report output. This allows creating reports without re-comparing images, useful for reusing or sharing previous test results, as detailed in the 'from json' section of the README.

Open-Awesome

reg-cli

MITRust0.19.0-rc0

A command-line tool for visual regression testing with an HTML reporter.

Visit Website GitHub

411 stars32 forks0 contributors

What is reg-cli?

reg-cli is a command-line visual regression testing tool that compares screenshots to detect visual changes in applications. It helps developers catch unintended UI modifications by generating diff images and detailed HTML reports. The tool is designed for integration into CI/CD pipelines and local development workflows.

Target Audience

Frontend developers, QA engineers, and teams implementing visual testing in their CI/CD processes to ensure UI consistency across releases.

Value Proposition

Developers choose reg-cli for its lightweight CLI interface, configurable comparison thresholds, and interactive HTML reports that make it easy to identify and review visual differences without complex setups.

Overview

📷 Visual regression test tool.

Use Cases

Best For

Automating visual regression tests in CI/CD pipelines
Comparing UI screenshots across different browser versions
Detecting unintended visual changes in web applications
Generating interactive HTML reports for visual test results
Integrating visual testing into Node.js-based projects
Updating baseline screenshots efficiently after UI updates

Not Ideal For

Teams needing integrated screenshot capture without additional tools like Puppeteer or Selenium
Projects requiring cloud-based visual testing with built-in collaboration and cross-browser automation
Applications with highly dynamic content where pixel-perfect comparisons lead to frequent false positives

Pros & Cons

Pros

Interactive HTML Reports

Generates detailed, visual reports that allow easy inspection of differences, as demonstrated in the documentation with screenshots of open, close, and viewer modes, enhancing debugging efficiency.

Fine-Grained Comparison Control

Offers configurable thresholds for pixel matching, rate, and pixel count (via options like -M, -T, -S), enabling users to adjust sensitivity and reduce false positives in visual tests.

Parallel Processing for Speed

Uses concurrency to launch multiple processes in parallel (default is 4, adjustable with -C), speeding up image comparisons and making it efficient for large test suites.

Easy Baseline Management

Includes an update mode (-U) to copy actual images to the expected directory, simplifying the process of updating baseline screenshots after intentional UI changes.

Cons

No Built-in Screenshot Capture

reg-cli only compares images; capturing screenshots requires integration with external tools like Puppeteer or Selenium, adding complexity and setup overhead to the testing workflow.

Experimental Features Unstable

Some options, such as additionalDetection (-X), are labeled as 'highly experimental' in the README, which could lead to unreliable results or require frequent adjustments as the feature evolves.

CLI-Only Interface

Lacks a graphical user interface or API, limiting its appeal for teams that prefer visual workflows or need programmatic integration beyond command-line usage, such as in some CI/CD systems.

Frequently Asked Questions

Related Projects

Playwright

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.

Integrated end-to-end testing framework written in Node.js and using W3C Webdriver API. Developed at @browserstack

Stars11,948

Forks1,398

Last commit1 month ago

TestCafe

A Node.js tool to automate end-to-end web testing.

Stars9,907

Forks678

Last commit7 days ago

Protractor

E2E test framework for Angular apps

Stars8,671

Forks2,257

Last commit3 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub