Read more

Check that an element is hidden via CSS with Spreewald

Henning Koch
March 08, 2011Software engineer at makandra GmbH

If you have content inside a page that is hidden by CSS, the following will work with Selenium, but not when using the Rack::Test driver. The Selenium driver correctly only considers text that is actually visible to a user.

Then I should not see "foobear"
Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

This is because the Rack::Test driver does not know if an element is visible, and only looks at the DOM.

Spreewald Show archive.org snapshot offers steps to check that an element is hidden by CSS:

Then "foo" should be hidden

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 a hidden or style="display: none" attribute. In a Rack::Test scenario the step will not recognize if the element is hidden via another CSS class.
Posted by Henning Koch to makandra dev (2011-03-08 20:26)