Posted about 10 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 Archive .

Our example

We recently released pretty print stylesheets for Holly Archive (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.

Your development team has a full backlog of feature requests, chores and refactoring coupled with deadlines? We are familiar with that. With our "DevOps as a Service" offering, we support developer teams with infrastructure and operations expertise.

Owner of this card:

Henning Koch
Last edit:
over 2 years 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