https://github.com/alaca/vrt
Visual Regression Testing Tool
https://github.com/alaca/vrt
Last synced: 12 months ago
JSON representation
Visual Regression Testing Tool
- Host: GitHub
- URL: https://github.com/alaca/vrt
- Owner: alaca
- Created: 2022-08-22T10:49:24.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-23T11:47:23.000Z (almost 4 years ago)
- Last Synced: 2025-02-14T22:04:51.948Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 38.1 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Visual Regression Testing Tool
## Install
```npm i vrt-tool```
## Setup VRT
Add VRT scripts to your project `package.json` file
```json
{
"scripts": {
"vrt-init": "vrt-tool init",
"vrt-setup": "vrt-tool setup",
"vrt-test": "vrt-tool test",
"vrt-reports": "vrt-tool reports"
}
}
```
Then run
```npm run vrt-init```
This will create `vrt.config.js` file and `.vrt` directory in your project root.
Open the `vrt.config.js` file and add testing scenarios.
Example:
```javascript
module.exports = {
scenarios: [
{
name: 'Homepage',
sourceUrl: 'http://localhost:10008/home',
testUrl: 'http://localhost:10008/home',
onPage: async page => {
await page.waitForTimeout(3000);
},
},
],
};
```
`onPage` callback will receive the `page` argument which is the
Puppeteer's [Page class](https://pptr.dev/api/puppeteer.page) instance.
## Running tests
- Run ```npm run vrt-setup```
_This command will take a screenshot of `sourceUrl` for each defined scenario._
- Make changes to `sourceUrl` page (edit html, etc. )
- Run ```npm run vrt-test```
_This will take a screenshot of `testUrl` and compare it with `sourceUrl` screenshot._
If `sourceUrl` and `testUrl` screenshots don't match, a report will be generated.
## Reports
Report will be generated each time when `sourceUrl` and `testUrl` screenshots don't match.
You can list all reports by running `npm run vrt-reports`