Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bfulop/regression-server
Fast front end regression tests
https://github.com/bfulop/regression-server
Last synced: 11 days ago
JSON representation
Fast front end regression tests
- Host: GitHub
- URL: https://github.com/bfulop/regression-server
- Owner: bfulop
- Created: 2018-03-25T05:15:50.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-07-13T14:13:02.000Z (over 6 years ago)
- Last Synced: 2024-11-21T14:41:37.307Z (2 months ago)
- Language: JavaScript
- Size: 36.1 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Visual regression test server
Creates screenshots of pages and page elements at different sizes and send back the results of the image diffing.
### Under 1 second test feedback
- Keeps the target (headless) browsers open
- If you use it with Browsersync the CSS is injected, without having to reload the page
- Adding a SHA checking can add an another level of filtering for the screenshots comparison (not implemented yet)
### Targets definition
Takes a targets definition in the following format:
```javascript
const baseUrl = 'http://127.0.0.1:3014/[base path]/'
const testtargets = [
{
route: '[route/to/a/page]',
targets: [
{
width: 1200,
elements: ['[a valid puppeteer selector]']
},
{
width: 768,
elements: ['header.pageheader']
}
]
}
]
```
For now it exposes two routes: `/snapshot` and `/compare`.
`$ curl -s http://[your server's address]:3202/snapshot`
Will take the snapshot images.
`$ curl -s http://[your server's address]:3202/compare`
Will give you back a list of targets and number of pixels that are different compared to the snapshot.
### Regression watcher
The server is meant to be used with the _Regression watcher_ client (not yet published) that will notify the server to rerun the tests.
### Use it on a (cloud) server
Ideally you would use this on a server (Heroku, etc), but can of course be run locally as well. For Linux servers run `src/index` with the `nosandbox` option (`$ node src/index nosandbox`).
I prefer to run in on my server which is much faster than my laptop.
### 🚧 Work in progress
It's just slightly more than a proof of concept. I put this together very quickly to help me with a frontend project, but I admit having little experience with Puppeteer and Pixelmatch.
## Credits
The "engine" (using Puppeteer and Pixelmatch) is based on an article by Monica Dinculescu: [Automatic visual diffing with Puppeteer](https://meowni.ca/posts/2017-puppeteer-tests/)