How do you test if a div has a certain css style in rspec/capybara?

Question

How do you test if a div tag has a certain css style? I\'m trying to test if it has display:none; or display:block.

I tried the following

Answer 1

You can use Capybara's assert_matches_style, or the Rspec HaveStyle matcher (which is using assert_matches_style underneath):

When you use assert_matches_style directly, it's:

find(".element").assert_matches_style("font-size" => "46px")

I'm not too familiar with Rspec syntax, but it should be something like this:

it { should match_style("font-size" => "46px") }

Answer 2

I'd recommend that instead of trying to locate the css style, you instead write your tests to find the css class name.

This way you can change the underlying css styling while keeping the class the same and your tests will still pass.

Searching for the underlying style is brittle. Styles change frequently. Basing your rspecs on finding specific style elements makes your tests more brittle -- they'll be more likely to fail when all you do is change a div's look and feel.

Basing your tests on finding css classes makes the tests more robust. It allows them to ensure your code is working correctly while not requiring you to change them when you change page styling.

In this case specifically, one option may be to define a css class named .hidden that sets display:none; on an element to hide it.

Like this:

css:

.hidden {
  display:none;
}

html:

<div class="hidden">HIDE ME!</div>

capybara:

it {should have_css('div.hidden') }

This capybara just looks for a div that has the hidden class -- you can make this matcher more sophisticated if you need.

But the main point is this -- attach styles to css class names, then tie your tests to the classes, not the styles.

Answer 3

My way to ensure that element have a certain class:

let(:action_items) { page.find('div.action_items') }

it "action items displayed as buttons" do
  action_items.all(:css, 'a').each do |ai|
    expect(ai[:class]).to match(/btn/)
  end
end

or smthing like this

expect(ai[:style]).to match(/color: red/)

I found it here: http://rubydoc.info/github/jnicklas/capybara/Capybara/Node/Element#%5B%5D-instance_method

Answer 4

You could use has_css? matcher. It can accept :visible options. For more details you can check docs: http://rdoc.info/github/jnicklas/capybara/Capybara/Node/Matchers#has_css%3F-instance_method

For example you can try:

it { should have_css('div.with-some-class', :visible => true) }