Checking Invisible Elements

This week, I’m investing a bunch of hours on my side project. Today, I’m working on a feature where a field is supposed to remain invisible until a user enters a combination of values.

There are a variety of ways to test this code including testing the javascript with something like Jasmine. However, in this case, I particularly want an end-to-end test around this feature. And in my case that meant using Cucumber with Capybara for my end-to-end tests.

I wanted to be able to say something in my Cucumber .feature file like:

And I should not see the "My Notes" field

However, my first attempt at implementing didn’t work the way I expected it to. The “My Notes” field existed on the page but was hidden. When I called Capybara’s “has_css?” method, it found the field and reported it present. So my test was failing even though the system behavior did exactly what I wanted it to. Whoopsie!

So now what?

After two hours of wrestling with Capybara and CSS selectors, I finally found a solution that I can live with. And since I know other people have had this problem, I thought I would share it here.

But first, a note: this particular technique won’t work on elements that are given the display attribute of none directly through styles. It requires you to set display to none through a CSS class. (But setting attributes through CSS classes is a better design anyway, so I think this is a reasonable limitation.)

In my particular case, because I’m using jQuery, I’m using the .ui-helper-hidden class. You’ll need to figure out the class name that sets the display attribute to none for your application. The sample code below uses “.ui-helper-hidden” as the class name.

Here’s the helper method that I came up with:

(If you have javascript disabled, you might not see the beautifully formatted gist from github above. In that case, you can see the helper method if you click here.)

I hope that little helper method saves someone some time. If so, it was totally worth the 2 hours I spent today figuring out how to write it.

Subscribe

Subscribe to our e-mail newsletter to receive updates.

10 Responses to Checking Invisible Elements

  1. Djano March 1, 2011 at 5:40 am #

    Hello Elisabeth,

    You actually did not write the helper method in this blog post 🙂

    Cheers.

  2. ehendrickson March 1, 2011 at 5:52 am #

    It’s possible that you’re not seeing the code because you have javascript disabled. George Dinwiddie suggested that I should link to the github gist that contains the sample code for those folks who don’t turn on javascript. So I did. Hope that helps!

  3. Andrew Prentice March 1, 2011 at 7:57 am #

    Hi Elisabeth,
    You might find that jQuery’s hidden selector provides what you need as well as inline style support. Docs are here: http://api.jquery.com/hidden-selector/

  4. Igor March 1, 2011 at 12:53 pm #

    Have you tried to use the ‘:hidden’ pseudo-class? I think that it would have made the task a lot easier, but maybe I’m not seeing something that you do.

  5. Rob Hunter March 6, 2011 at 2:32 am #

    If you’re using the Selenium driver for Capybara, it can handle the visibility for you.

    You can check visibility on an individual node:

    find_field(“My Notes”).visible?

    Alternatively, if you’d rather that invisible nodes don’t show up in “find” results, try:
    Capybara.ignore_hidden_elements = true

    If you normally want to ignore invisible nodes but you have a special case that needs something invisible:
    find_field(“My Hidden Field”, :visible => false)

    These kinds of tricks are probably a bit “invisible” themselves! I know they’re there because I’ve seen them mentioned on the Capybara mailing list and in Capybara’s “History.txt” file but it’s not fair to expect everyone to read those. 🙂

  6. Jo Liss March 7, 2011 at 4:22 pm #

    You can actually check for any ancestor (including parent) with “.ui-helper-hidden #{element_id}”. (I personally like to keep http://www.w3.org/TR/css3-selectors/#selectors handy to craft my CSS selectors.)

    But as Rob said, you probably want to use the visible? method for this particular use case.

  7. Riccardo Tacconi October 11, 2011 at 4:50 pm #

    Thank you, the helper function is very useful!

  8. Nick October 25, 2011 at 7:36 pm #

    These hacks are needed because capybara’s #visible? ignore_hidden_elements and the like don’t work properly. They never have done. Rather than documenting this it or leaving a ticket open it’s been pushed under the rug.

Trackbacks/Pingbacks

  1. A Smattering of Selenium #44 « Official Selenium Blog - March 7, 2011

    […] while on the subject of Capybara, here is a post on Checking Invisible Elements in […]

  2. QuickLinks for March 2011 | (Agile) Testing - March 31, 2011

    […] Checking Invisible Elements […]

Leave a Reply