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.
- Visual regression testing with BackstopJS
- Configurable viewport settings
- HTML reports for visual comparison results
- Easy integration with CI/CD pipelines
Ensure you have the following installed:
git clone https://github.com/your-repo/visual-regression-testing.git
cd visual-regression-testing
npm install
npx backstop init
Create the baseline snapshots to compare against:
npm run reference
Run visual regression tests to compare current snapshots with the reference:
npm run test
If visual differences are intentional, approve the new snapshots:
npm run approve
.
├── 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
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"
}
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.