csste.st

The why and how of CSS testing.

Hardy

Formerly known as GhostStory 2: The Ghostening.

This project allows developers to test their layouts using Cucumber story files. The project runs on Node.JS and uses Selenium to enable full cross-browser testing. There is also a to simplify the process of creating tests.

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: Website layout test
    As a user I want visual consistency on the https://csste.st/ website

    Scenario: Content layout
    Given I visit "https://csste.st/"
    Then "section > p" should have "color" of "rgb(68, 68, 68)"

Tutorial

There is an introductory tutorial on the Hardy website to make setting up and running your first test simple.

Techniques