Admin panel for Visual Testing
npm install visualtesting-adminMore to come. The Admin panel for visual testing.
All content below this is out of date. Based heavily off of https://github.com/webdriverio/webdrivercss-adminpanel
WebdriverCSS Adminpanel
=======================
This application helps you to manage all your image repositories of your CSS regression tests made with WebdriverCSS.
It provides an API to synchronise and configure them. This allows you to exchange the repositories with your peers and
colleagues to be able to run regression tests decentralized.
First download this repository:
``sh`
$ git clone git@github.com:webdriverio/webdrivercss-adminpanel.git
Then download all Node.js dependencies:
`sh`
$ npm install
Last but not least start the application by running:
`sh`
$ grunt serve:dist
This command minifies all stylesheets and scripts and starts the application on localhost:9000.
I'm not going to describe how to deploy a Node.js application to a server. There are plenty of tutorials out there who
describe how to do that very well.
Per default the applications provides the following API interfaces:
* GET /api/repositories ("Content-Type": "application/json")
returns a list of all current stored image repositories
Example Request http://localhost:9000/api/repositories
`json`
{
"gz": ["amoeba-example.tar.gz"],
"repositories": {
"amoeba-example": {
"images": ["contact.baseline.png","team.baseline.png","team.regression.png"],
"diffs": ["team.diff.png"]
}
}
}
* GET /api/repositories/:file ("Content-Type": "application/octed-stream")
returns the image repository tarball
Example Request http://localhost:9000/api/repositories/amoeba-example.tar.gz
* GET /api/repositories/:project/:file ("Content-Type": "image/png")
get a current or new image from specific repository
Example Request http://localhost:9000/api/repositories/amoeba-example/contact.baseline.png
* GET /api/repositories/:project/diff/:diff ("Content-Type": "image/png")
get diff image of specific repository
Example Request http://localhost:9000/api/repositories/amoeba-example/diff/team.diff.png
* POST /api/repositories/confirm ("Accept": "application/json")
confirm image diff if changes were made on purpose
Example Request *http://localhost:9000/api/repositories/confirm
JSON Parameters
file - {String} filename of new fileproject
- {String} project name
POST /api/repositories/ ("Accept": "application/octed-stream")
takes an image repository tarball (tar.gz), unzips it and saves it to the file system
Example Request http://localhost:9000/api/repositories/amoeba-example.tar.gz
JSON Parameters
gz - {Object} repository tarbal
For instructions on how to install WebdriverCSS please checkout the repository website
on GitHub. There is also described how to sync your
repository to the WebdriverCSS - Adminpanel application. Here is an example how to use this application in order to synchronise
image repositories created with WebdriverCSS:
`js
var WebdriverIO = require('webdriverjs'),
WebdriverCSS = require('webdrivercss');
// init webdriverio
var client = WebdriverIO.remote({
desiredCapabilities: {
browserName: 'firefox'
}
});
// init webdrivercss
WebdriverCSS.init(client, {
screenshotRoot: 'myProject',
api: 'http://localhost:9000/api/repositories/'
});
client
.init()
.sync() // BEFORE: download current stored image repository of the project (if existing)
.url('http://example.com')
.webdrivercss('exampleTest', {
elem: '#section'
})
.sync() // AFTER: zips and uploads state of image repository
.end();
``