Skip to content

komalgc/BackStopJS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Visual Regression Testing Framework with BackstopJS

BackstopJs

This project is a visual regression testing framework using BackstopJS. It helps automate the process of comparing visual snapshots of web pages to detect unintended changes.

Features

  • Visual regression testing with BackstopJS
  • Configurable viewport settings
  • HTML reports for visual comparison results
  • Easy integration with CI/CD pipelines

Prerequisites

Ensure you have the following installed:


Setup Instructions

1. Clone the Repository

git clone https://github.com/your-repo/visual-regression-testing.git
cd visual-regression-testing

2. Install Dependencies

npm install

3. Initialize BackstopJS (if not already initialized)

npx backstop init

Usage

Generate Reference Snapshots

Create the baseline snapshots to compare against:

npm run reference

Run Tests

Run visual regression tests to compare current snapshots with the reference:

npm run test

Approve Changes

If visual differences are intentional, approve the new snapshots:

npm run approve

Project Structure

.
├── backstop.json                 # BackstopJS configuration file
├── backstop_data/                # Data directory for reference, test snapshots, and reports
│   ├── bitmaps_reference/        # Reference images
│   ├── bitmaps_test/             # Test images
│   ├── html_report/              # HTML report of test results
├── package.json                  # Node.js project configuration
├── README.md                     # Project documentation

Configuration

The backstop.json file is the main configuration file. Customize it to suit your testing needs:

  • Viewports: Define screen sizes for testing.
  • Scenarios: Define test cases with URLs, selectors, and delays.
  • Paths: Set custom paths for snapshots and reports.
  • Engine: Use puppeteer or other supported engines.

Example configuration in backstop.json:

{
  "id": "visual_regression_test",
  "viewports": [
    {
      "label": "desktop",
      "width": 1024,
      "height": 768
    }
  ],
  "scenarios": [
    {
      "label": "Homepage",
      "url": "https://example.com",
      "selectors": ["document"],
      "delay": 500
    }
  ],
  "paths": {
    "bitmaps_reference": "backstop_data/bitmaps_reference",
    "bitmaps_test": "backstop_data/bitmaps_test",
    "html_report": "backstop_data/html_report"
  },
  "engine": "puppeteer"
}

Contact

For questions or support, contact Komal Chowdhary.


Save this as README.md in your project directory! It provides a clear and professional introduction to your project.

About

Visual Regression Testing using BackstopJS

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published