How to test the value of a CSS selector using Capybara and RSpec?

Question

The HTML page is supposed to have the following code:

<div class="user-image" style="background-image:url(/images/user_image.jpg)">

How would you check for this using Capybara and RSpec?

Answer 1

Presumably, you are trying to verify that this div uses the specified background image. I would probably do something like this:

it "has a user image" do
  page.should have_selector('div.user-image')
end

it "displays the user image" do
  page.find('div.user-image')['style'].should == 'background-image:url(/images/user_image.jpg)'
end

RSpec, however, is likely the wrong tool for the job. Consider using Cucumber for tests like this.

Answer 2

Capybara and Selenium allow to run javascript in the browser and return the result

here is how:

page.execute_script 'return $("div.user-image").css("background-image");'