Last Updated: January 06, 2017
· oelmekki

Capybara's save_and_open_page with css and js

If you like having a glance at what happens during your integration test run, you probably know #save_and_open_page and #screenshot.

They both have their drawbacks :

  • #save_and_open_page displays raw html, with no css nor js
  • #screenshot looks exactly to what you expect, but now you can't use inspector or firebug.

There's an alternative for that. Instead of letting capybara saving your html file in tmp/capybara/, you could force it to save it in public/ :

# spec/support/integration_helpers.rb
def show_page
  save_page Rails.root.join( 'public', 'capybara.html' )
  %x(launchy http://localhost:3000/capybara.html)

That way, it will find and use css and js files.

Do not forget to add public/capybara.html in your .gitignore !

Note that if you want to see the state of your page after a few js operations, #screenshot is still better, because #show_page will run js initialization, so js runtime state will be reset.

Say Thanks

3 Responses
Add your response


This is great! It has saved my bacon so many times it is unreal! Thanks Olivier

over 1 year ago ·

Capybara also supports setting an asset_host as follows:

Capybara.asset_host = 'http://localhost:3000'

This will insert a <base> tag with the asset host into the pages created by save_and_open_page, meaning that relative links will be loaded from the development server if it is running. The end result is pretty much the same as by following this tip. :)

over 1 year ago ·
2014 06 28 chopada med pesqueiro squared

Here it's loading www.example.com/assets always... Anyone knows how to fix it?

over 1 year ago ·