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 but its giving me an error:

it {should have_selector('signup_server_generic_errors', /display:\s*none/)}

Answer 1

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.