Posted over 6 years ago. Visible to the public. Repeats.

Check that an element is visible or hidden via CSS with Cucumber/Capybara

If you have content inside a page that is hidden by CSS, the following will not work (because Capybara sees it nonetheless, even in a Selenium feature):

Then I should not see "foobear"

Instead, use the step definition below to check that an element is hidden by CSS:

Then "foo" should be hidden

For Spreewald < 1.2.3 use

Then "foo" should not be visible

You can also check that an element is visible:

Then "foo" should be visible

Implementation details

  • Regardless of whether we expect the text to be visible or hidden, we always expect the given text to be contained in the HTML. The test is about whether or not it is hidden via CSS.
  • In a Selenium scenario, visibility is detected via Javascript. This detection is very precise and should correctly determine visibility for the most fucked up cases. The steps have support for jQuery and Prototype projects.
  • In a standard, non-Selenium Rack::Test scenario, the steps are considerably less clever. Here they consider a text hidden if it sits in a container with the classes .hidden, .invisible or with a style="display: none" attribute. In a Rack::Test scenario the step will not recognize if the element is hidden via another CSS class.

The step definition

This step is now part of spreewald.

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Author of this card:

Henning Koch
Last edit:
almost 3 years ago
by Judith Roth
cucumber, testing, driver, visible
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandropedia