Administration App for CSS Regression Testing with WebdriverCSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app remove API_HOST and API_PORT as they are not needed Sep 3, 2015
repositories ported necessary API and directives from pixelpark/selenium-hub-monit… Jul 12, 2014
server
.bowerrc added yeoman-angular-fullstack boilerplate Jul 12, 2014
.editorconfig added yeoman-angular-fullstack boilerplate Jul 12, 2014
.gitattributes
.gitignore ignore npm-debug.log file Sep 1, 2015
.jshintrc ported necessary API and directives from pixelpark/selenium-hub-monit… Jul 12, 2014
Gruntfile.js fixed build process Jul 15, 2014
LICENSE Initial commit Jul 10, 2014
README.md use local install of bower instead of global install Aug 28, 2015
bower.json added introduction text, improved responsive design Jul 13, 2014
package.json Fix Windows installation Aug 25, 2016
server.js

README.md

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.

Dependencies

  • NodeJS and npm For installing packages. Download and run the NodeJS installer.
  • Ruby, Sass, and Compass Needed for Compass extension to SASS, which provides CSS niceties. Install Ruby and run gem install compass.

Note: Grunt & Bower will be installed locally with npm. If you'd like to install Grunt or Bower globally, run npm install -g grunt-cli or npm install -g bower, respectively.

Install

First download this repository and change to the project directory:

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

Then download all client and server-side 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

By default, the application provides the following API interfaces:

GET requests

  • 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/octet-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 a 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 a specific repository.

    Example Request:
    http://localhost:9000/api/repositories/amoeba-example/diff/team.diff.png

POST requests

  • 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('webdriverio'),
    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', {
        name: 'homepage',
        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.