Posted about 8 years ago. Visible to the public.

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.

Our example

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

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

@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:

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

Here's the switch in our layout:

- 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:

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:

Then /^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:

Then /^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.

Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Owner of this card:

Henning Koch
Last edit:
8 months ago
by Michael Leimstädtner
holly_print.png, holly_screen.png
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more