csste.st

The why and how of CSS testing.

GhostStory

This project has been replaced with the Hardy project. The original content is kept below for reference.

The aim of this project is to allow developers to test their CSS using Cucumber story files. It uses as an interface between Node.JS (server built on JS) and CasperJS which is an abstraction and testing layer for PhantomJS.

The reason for using Cucumber files is that they are simple, plain-text files that can be shared between everyone involved in the project - developers, designers, product owners - so that everyone agrees on what is being made.

Sample Cucumber file


    Feature: Navigation
    As a Web Designer
    I would like to test my CSS

    Scenario: CSS
    Given I go to "/empty.html"
     Then the "Main logo" should
          have "margin" of "1.5em"
      And the "Main logo" should
          look the same as before

This project integrates PhantomCSS to enable image diff testing as well as project styleguide verification.

Currently, SpookyJS is a dependency but with the inclusion of WebDriver in PhantomJS 1.8, this may change.

Techniques