How to test print stylesheets with Cucumber and Capybara

A print stylesheet is easy to create. Choose a font suited for paper, hide some elements, done. Unfortunately print stylesheets often break as the application is developed further, because they are quickly forgotten and nobody bothers to check if their change breaks the print stylesheet.

This card describes how to write a simple Cucumber feature that tests some aspects of a print stylesheets. This way, the requirement of having a print stylesheet is manifested in your tests and cannot be inadvertedly removed from the code. Note that you can always use your DevTools to preview the print styles in your browser Show archive.org snapshot .

Our example

We recently released pretty print stylesheets for Holly Show archive.org snapshot (see images below). The code examples below are from Holly.

This is the feature that tests Holly's print stylesheet:

Copy@javascript
Scenario: When printing a tree, the page appears black on white with all controls hidden
  When I open the following tree:
    """
    Food
    Drinks
    """
    And I open the print preview
  Then the page background should be white
  Then I should see "Food"
    And I should see "Drinks"
  But the toolbar should be hidden
    And the footer should be hidden
    And the search field should be hidden

The following explains the implementation of individual step definitions used in the feature.

Make Capybara see the print stylesheet

Capybara always requests as the screen medium. The step belows reloads the current page with a query param we will use in our layout to load the print stylesheet even if the medium is screen:

CopyWhen /^I open the print preview$/ do
  visit "#{current_path}?medium=print"
end

Here's the switch in our layout:

Copy- if params[:medium] == 'print'
  = stylesheet_link_tag "print", :media => "screen"
- else
  = stylesheet_link_tag "screen", :media => "screen"
  = stylesheet_link_tag "print", :media => "print"

Assert that printable elements are still visible

Since a print layout will usually hide many elements, make sure that the elements that should be printable remain visible:

Copy  Then I should see "Food"
    And I should see "Drinks"

Test that the page actually uses print styles

Holly has a black background on screens, so we use this to test that the background is white on paper:

CopyThen /^the page background should be white$/ do
  page.evaluate_script("$('body').css('background-color')").should == 'rgb(255, 255, 255)'
end

Note how the step definition talks to jQuery to obtain details about the CSS.

Test that UI controls and secondary elements are hidden

Form fields, navigation bars, footers, etc., should be hidden by the print stylesheets. We test this:

CopyThen /^the toolbar should be hidden$/ do
  page.evaluate_script("$('nav').is(':visible')").should be_false
end

Then /^the footer should be hidden$/ do
  page.evaluate_script("$('#tail').is(':visible')").should be_false
end

Then /^the search field should be hidden$/ do
  page.evaluate_script("$('.search').is(':visible')").should be_false
end

Then /^the notification should be hidden$/ do
  page.evaluate_script("$('#notification').is(':visible')").should be_false
end

Also see our card: Capybara: Check that a page element is hidden via CSS.