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.
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 http://csste.st/ website Scenario: Content layout Given I visit "http://csste.st/" 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
That's all we need to do for basic tests. To really get the most out of Hardy, continue to learn about Selector maps.