https://github.com/arrow2nd/quick-vrt
🤖 Quick Visual Regression Testing tool for web pages
https://github.com/arrow2nd/quick-vrt
Last synced: 12 months ago
JSON representation
🤖 Quick Visual Regression Testing tool for web pages
- Host: GitHub
- URL: https://github.com/arrow2nd/quick-vrt
- Owner: arrow2nd
- License: mit
- Created: 2025-05-27T00:43:05.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-02T12:47:26.000Z (about 1 year ago)
- Last Synced: 2025-06-27T12:07:13.127Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 79.1 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# quick-vrt
Quick Visual Regression Testing tool for web pages
## Features
- 📸 Full-page screenshot comparison
- 🔄 Multiple URL pair support
- 📊 Interactive HTML test reports
- 🎚️ Side-by-side and slider comparison modes
- 🎯 Pixel-level diff visualization
- 🚀 Auto-browser launch for report viewing
- ⚡ Instant execution with npx
- 🎭 User-Agent spoofing for better compatibility
- 🎬 Advanced video masking (Canvas, WebGL, video players)
- 🛑 Comprehensive animation blocking
- 🔄 Optimized lazy loading with timeout controls
## Installation
```bash
# Install globally
npm install -g quick-vrt
# Or use with npx (no installation required)
npx quick-vrt
```
## Usage
### Basic comparison (2 URLs)
```bash
quick-vrt https://example.com https://staging.example.com
```
### Multiple comparisons
```bash
quick-vrt https://site1.com https://site2.com https://page1.com https://page2.com
```
### With options
```bash
quick-vrt https://example.com https://staging.example.com \
--output ./my-vrt-results \
--width 1920 \
--height 1080 \
--user-agent "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)" \
--no-open
```
## Options
- `-o, --output `: Output directory (default: `./vrt-results`)
- `--width `: Viewport width (default: `1280`)
- `--height `: Viewport height (default: `720`)
- `--concurrency `: Max concurrent browsers (default: auto-detected)
- `--scroll-delay `: Delay between scroll steps in ms (default: `500`)
- `--user-agent `: Custom user agent string
- `--video-mask-color `: Color for video masks (default: `#808080`)
- `--no-lazy-loading`: Disable lazy loading support
- `--no-disable-animations`: Keep CSS animations enabled
- `--no-mask-videos`: Disable automatic video masking
- `--no-open`: Don't auto-open the report in browser
## Report Features
The generated HTML report includes:
- **Side-by-side comparison**: View before, after, and diff images
- **Slider comparison**: Interactive slider to compare images
- **Diff visualization**: Highlighted pixel differences
- **Statistics**: Diff percentage and pixel count
- **Summary**: Overview of all comparisons
## Advanced Features
### User-Agent Spoofing
```bash
# Mobile testing
quick-vrt https://example.com https://staging.example.com \
--user-agent "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)"
# Custom browser
quick-vrt https://example.com https://staging.example.com \
--user-agent "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36"
```
### Performance Optimization
```bash
# Faster execution for simple pages
quick-vrt https://example.com https://staging.example.com \
--scroll-delay 200 \
--no-lazy-loading
# High concurrency for multiple comparisons
quick-vrt url1 url2 url3 url4 url5 url6 \
--concurrency 8
```
### Video and Animation Control
```bash
# Custom video masking
quick-vrt https://example.com https://staging.example.com \
--video-mask-color "#ff0000"
# Keep animations for dynamic content testing
quick-vrt https://example.com https://staging.example.com \
--no-disable-animations
```
## Requirements
- Node.js >= 16.0.0
- The tool will automatically install Puppeteer browsers on first run
## Example Output
```
Starting Visual Regression Testing...
Comparing https://example.com vs https://staging.example.com...
Comparing https://page1.com vs https://page2.com...
VRT completed! Report saved to: /path/to/vrt-results/report.html
```
## License
MIT