Navigation

Needle is a tool for testing your CSS and visuals with Selenium
and nose.

It checks that visuals (CSS/fonts/images/SVG/etc.) render correctly by taking
screenshots of portions of a website and comparing them against known good
screenshots. It also provides tools for testing calculated CSS values and the
position of HTML elements.

This is a test case which tells the Selenium web driver (by default Firefox)
to open BBC News and check the bar across the top of the page looks correct.
assertScreenshot() take two arguments: a
CSS selector for the element we are capturing and a filename for the image.

To create an initial screenshot of the logo, we need to run Needle in
‘baseline saving’ mode:

$ nosetests test_bbc.py --with-save-baseline

This will create screenshots/baseline/bbc-masthead.png. Open it up and
check it looks okay.

Now if we run our tests, it will take the same screenshot and check it against
the screenshot on disk:

$ nosetests test_bbc.py

If a regression in your CSS causes them to become significantly different, the
test will fail.

By default Needle uses NeedleFirefox, which is a wrapper of Selenium’s
built-in selenium.webdriver.firefox.webdriver.WebDriver class. You may use
any of the following WebDrivers: NeedleRemote, NeedlePhantomJS,
NeedleFirefox, NeedleChrome, NeedleIe, NeedleOpera and
NeedleSafari. Refer to Selenium’s documentation to learn how to install and
configure any of those WebDrivers.