civicactions/webdrivercss-adminpanel repository overview

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

⁠Install

First download this repository and change to the project directory:

$ git clone [email protected]: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"]
      }
    }
  }
  

  Copy

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