Getting Started

Hardy has been designed to make it as easy as possible to get started with CSS testing, especially integrating it into an existing build process.


The recommended installation method is via NPM:

~ npm install -g hardy

This will install Hardy as a global node module and put an executable in your path. It will also include a local version of Selenium in case you don't have that already and a local copy of PhantomJS for image diff test processing.

Note: This copy of PhantomJS will not be available for testing against unless you add it to your system PATH variable.

First tests

Create a new folder to hold your test files.

~ mkdir myfirsttest
~ cd myfirsttest/

Now we can make a basic first test. Once you've done this a couple of time you won't need help but for starters, use the helper:

~/myfirsttest hardy init

This will create the important folders and files

Inside the new file test.feature, add this initial test:

Feature: Website layout test
As a user I want visual consistency on the website

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

Before we run the test, we need to start Selenium which will send the tests to the browser:

~/myfirsttest hardy selenium start

From the command line, run our test:

~/myfirsttest hardy .

You should see successful output:

Hardy v0.0.11
CSS Utils Steps Loaded
CSS Steps Loaded
Generic Steps Loaded
Loading browser firefox
...Shutting down browser

1 scenario (1 passed)
3 steps (3 passed)
firefox success

What's next?

That's all we need to do for basic tests. To really get the most out of Hardy, continue to learn about Selector maps.