Capybara's save_page with CSS

November 14, 2013 Serguei Filimonov

At Pivotal, we often use Capybara to write a suite of integration tests that navigate a browser through any scenario that can emerge in the application. We use these tests to guard against regressions and to drive out the design of the application in a red-green cycle throughout the day.

When it comes to styling the HTML/CSS/JS of the application, it’s common to switch to development mode and manually simulate a scenario so the page of interest can be refreshed in a tight cycle to observe the changes. This can be a rather manual process if the page is only served in response to a complex user flow or an exception case.

If you use capybara and run save_page, it will save a copy of the page it’s currently on and return the file path of the page. If you open that file, however, stylesheets are unavailable because it’s a save file and asset links are relative.
menu

The workaround

Create a controller along the lines of `FilePreviewsController` and use Mac’s open command to save and open the page.

#app/controllers/file_previews_controller.rb
class FilePreviewsController < ApplicationController
  def show
    render text: IO.read(params[:file])
  end
end

#spec/spec_helper.rb or spec/support/feature_helpers.rb
def save_and_open_preview
  `open #{file_preview_url(host: 'localhost:3000', file: save_page)}`
end

#config/routes.rb
if Rails.env.test? || Rails.env.development?
  resource :file_preview, only: [:show]
end

That’s it! You can now create complex flows in your feature specs, add save_and_open_preview, and use the browser to iterate on page’s look and feel.

with-css

 

Here are my top 3 use-cases for using capybara to style your page.

  • Getting to rare pages or particular datasets. This includes error pages, email-triggered flows like password-reset, or pages guarded by complex permissions.
  • Simulating large amount of content: wonder how to style a gallery with 20 items without manually creating all the items or running a one-off command.
  • Outputting views of the application for conversation with PM or designers. Just sprinkle as many of the above helper calls through a user flow and you have a deck to demonstrate a working feature.

 

About the Author

Biography

More Content by Serguei Filimonov
Previous
A Preview of Open Mobile Summit
A Preview of Open Mobile Summit

From November 12 – 14, we’re going to be in sunny San Francisco for the 6th annual Open Mobile Summit. This...

Next
Productive Rails View Development in RubyMine
Productive Rails View Development in RubyMine

RubyMine includes several commands to simplify working with Rails views. In this post, we’ll look at OS X k...

Enter curious. Exit smarter.

Learn More