In this tutorial I will describe how we do automated CSS testing in Django, here in ottofeller. Our approach is generally based on comparing sample screenshot of page DOM-element to one made during tests. What we need to do this is Django management command to capture sample screenshot, phantomjs based tool Ghost.py for in-memory rendering and ImageDiff method of needle python package.

In management/command/capture.py we do set up test environment DB, run Django live server and capture screenshot. It looks bit complicated, but we haven't yet found simpler solution (this just doesn't work). This command accepts test case import path and capturing test name. It will utilize screenshot_<name> method of test case to capture page and save it.

screenshot_<name> is also used to obtain screenshot image during tests, what it does is actual image capturing and saving to specified directory. Its essential part is so called webdriver Ghost.py — phantomjs based python tool that renders page in-memory and allow to play with it's DOM in simple manner. Like this:

ghost.fill('form', {
	'username': 'test',
	'password': 'password'
})

ghost.fire_on('form', 'submit', expect_loading=True)

In our environment we use custom webdriver Stepan which use Ghost as base and add two methods. login() and custom open() which open page and wait before application loading screen disappear.

Now as we have captured sample page we can later run tests. We use the same screenshot_<name> method of test case and pass captured screenshot image to the needle ImageDiff method to have the value of images differences and fail test if it is too high:

if abs(ImageDiff(screenshot, sample).get_distance()) > threshold:
	raise AssertionError('Screenshot didn\'t match')

During tests and capturing we use custom test settings stored in settings_test.py We overwrite DATABASE setting here to have test DB in sqlite for convenient reasons.