Posted about 4 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.

Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Author of this card:

Avatar
Henning Koch
Last edit:
about 1 year ago
by Judith Roth
Keywords:
cucumber, testing, driver, visible
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code

License for source code

All source code included in the card Check that an element is visible or hidden via CSS with Cucumber/Capybara is licensed under the license stated below. This includes both code snippets embedded in the card text and code that is included as a file attachment. Excepted from this license are code snippets that are explicitely marked as citations from another source.

The MIT License (MIT)

Copyright (c) 2011-2015 makandra GmbH

Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to permit
persons to whom the Software is furnished to do so, subject to the
following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
USE OR OTHER DEALINGS IN THE SOFTWARE.
Posted by Henning Koch to makandropedia