https://github.com/doodzik/visual-acceptance-test
🛂 create visual acceptance tests
https://github.com/doodzik/visual-acceptance-test
regression-testing visual-acceptance visual-regression visual-regression-testing visual-specification-testing
Last synced: about 1 year ago
JSON representation
🛂 create visual acceptance tests
- Host: GitHub
- URL: https://github.com/doodzik/visual-acceptance-test
- Owner: doodzik
- License: gpl-3.0
- Created: 2017-10-13T07:14:17.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-06-01T01:01:49.000Z (about 6 years ago)
- Last Synced: 2025-03-30T04:22:18.303Z (about 1 year ago)
- Topics: regression-testing, visual-acceptance, visual-regression, visual-regression-testing, visual-specification-testing
- Language: JavaScript
- Homepage:
- Size: 2.64 MB
- Stars: 10
- Watchers: 1
- Forks: 2
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# visual-acceptance-test
[](https://travis-ci.org/doodzik/visual-acceptance-test) [](https://greenkeeper.io/) [](https://coveralls.io/github/doodzik/javascript-html-tags?branch=master)[](https://codeclimate.com/github/doodzik/visual-acceptance-test/maintainability)
Create visual acceptance tests.
# Usage
Install visual-acceptance-test
```
$ npm install doodzik/visual-acceptance-test
```
Configure your Visual Accaptance Test
Static Regression Test
Create a `vat.js` file in the project root
```javascript
const {
browser,
FileServer,
Time,
diff,
confirmation
} = require('visual-acceptance-test')
const fs = require('fs-extra')
const path = require('path')
const time = new Time.LastCommit(__dirname)
const staticDir = path.resolve(__dirname, '.tmp')
const server = new FileServer({dir: staticDir})
const dimensions = [{width: 1080}, {width: 720}]
function pathTo(dir) {
return path.resolve(__dirname, '.visual-acceptance-test', dir)
}
var shell = require('shelljs')
function build() {
return new Promise(function(resolve, reject) {
shell.exec('npm install', function(code, stdout, stderr) {
shell.exec('make build', function(code, stdout, stderr) {
resolve()
})
})
})
}
return Promise.all([
server.listen(),
build(),
fs.remove(pathTo('HEAD')),
fs.remove(pathTo('DIFF')),
])
.then(() => browser.screenshotSitemap({server, dir: pathTo('HEAD'), dimensions}))
.then(() => time.past())
.then(build)
.then(() => browser.screenshotSitemap({server, dir: pathTo(time.pastCommit), dimensions}))
.then(() => time.now())
.then(() => {
return diff({
actual: pathTo(time.pastCommit),
expected: pathTo('HEAD'),
diff: pathTo('DIFF'),
persistDiff: true
})
})
.then(result => {
return (process.env.CI) ? confirmation.cli({result}) : confirmation.browser({result})
})
.then(exitCode => {
return server.destroy().then(() => process.exit(exitCode))
})
```
Dynamic Regression Test
> DOESN'T WORK YET
Create a `vat.js` file in the project root
```javascript
const {
browser,
FileServer,
Time,
diff,
confirmation
} = require('visual-acceptance-test')
const fs = require('fs-extra')
const path = require('path')
const time = new Time.LastCommit(__dirname)
const staticDir = path.resolve(__dirname, '.tmp')
const server = new FileServer({dir: staticDir})
const dimensions = [{width: 1080}, {width: 720}]
function pathTo(dir) {
return path.resolve(__dirname, '.visual-acceptance-test', dir)
}
var shell = require('shelljs')
function build(pathToResults) {
return new Promise(function(resolve, reject) {
shell.exec('npm install', function(code, stdout, stderr) {
shell.exec(`VAT_DIR=${pathToResults} make test`, function(code, stdout, stderr) {
resolve()
})
})
})
}
return Promise.all([
server.listen(),
fs.remove(pathTo('HEAD')),
fs.remove(pathTo('DIFF')),
])
.then(() => build(pathTo('HEAD')))
.then(() => time.past())
.then(() => build(pathTo(time.pastCommit)))
.then(() => time.now())
.then(() => {
return diff({
actual: pathTo(time.pastCommit),
expected: pathTo('HEAD'),
diff: pathTo('DIFF'),
persistDiff: true
})
})
.then(result => {
return (process.env.CI) ? confirmation.cli({result}) : confirmation.browser({result})
})
.then(exitCode => {
return server.destroy().then(() => process.exit(exitCode))
})
```
And then add the following helper in your tests where you want to test your website visuals. [NightmareJs](https://github.com/segmentio/nightmare)
``` javascript
const { browser, } = require('visual-acceptance-test')
const Nightmare = require('nightmare')
browser.dynamicScreenshot(Nightmare)
const nightmare=new Nightmare({ show: false, frame: false, useContentSize: true})
nightmare
.goto('https://duckduckgo.com')
.type('#search_form_input_homepage', 'github nightmare')
.click('#search_button_homepage')
.wait('#r1-0 a.result__a')
.vatScreenshot(() => document.querySelector('#r1-0 a.result__a').href)
.end()
```
Visual Spec Testing
``` javascript
// TODO
```
Run your acceptance tests by executing
```
$ node vat.js
```
# Projects
feel free to open a pr to add your project (only links to source code)
Static Regression Tests
[dudzik.co](https://github.com/doodzik/dudzik.co)
Dynamic Regression Tests
Visual Spec Testing
# [Roadmap](https://github.com/doodzik/visual-acceptance-test/projects/1)
# API
# Author
[Frederik Dudzik](https://dudzik.co)