How to load CSS and JS in Capybara?

Question

I'm trying to write integration tests for my Rails application. Its GUI is pretty complex, so it needs lots of integration tests (as opposed to controller or unit tests) to make sure all the AJAX requests and DOM rendering work correctly.

I've tried Capybara, Capybara-webkit, Poltergeist, and Chromedriver - but none of them are executing any of my CSS or document.ready functions.

I've done an extensive amount of reading and tried many solutions, but am having no success. I think it may be something to do with the asset pipeline.

I'm not sure where to look next to troubleshoot the issue.

Thanks, Louise

Louise · Accepted Answer · 2016-12-21 23:22:38Z

5

In my case, it did have something to do with the asset pipeline.

After I turned off asset concatenation in test.rb, it all worked fine.

test.rb:

# Debug mode disables concatenation and preprocessing of assets.
  # This option may cause significant delays in view rendering with a large
  # number of complex assets.
  config.assets.debug = true

spec_helper:

Capybara.register_driver :chrome do |app|
  Capybara::Selenium::Driver.new(app, :browser => :chrome)
end

Capybara.javascript_driver = :chrome
Capybara.asset_host = "http://localhost:3000"

Sorted. I needed to switch to chromedriver to find this out - it depended on me actually being able to watch the test driver do its job in a real browser, and open the Chrome javascript console (while capybara was paused in the debugger) to poke around and see what was going on.

answered Dec 21, 2016 at 23:22

Louise

1,2051 gold badge11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Thomas Walpole Over a year ago

If you need to disable concatentation that means that one of the earlier files is throwing an error which is stopping the rest of the files from being evaluated (in test/producation mode where the files are concatenated)- check you dev console in development mode and fix any JS errors being shown.

Louise Over a year ago

Thanks for the advice! There are no errors in dev, I thought Capybara should show me any js errors (with js: true and js_errors: true) but none appear.

Thomas Walpole Over a year ago

IIRC js_errors is a Poltergeist option not capybara-webkit. In capybara-webkit you'd need to check page.driver.error_messages to see any errors that were raised by JS - I'll bet that will show you some errors related to something like ES6 features that capybara-webkit doesn't support

Collectives™ on Stack Overflow

How to load CSS and JS in Capybara?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related