node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »

visualtesting-admin

More 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

alt text

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.

Install

First download this repository:

$ git clone git@github.com:webdriverio/webdrivercss-adminpanel.git

Then download all Node.js dependencies:

$ npm install

Last but not least start the application by running:

$ 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.

Usage

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

    {
      "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 file project - {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

Setup WebdriverCSS

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:

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();

Contributing

Any contributions or patches are welcome! In lieu of a formal styleguide, take care to maintain the existing coding style.