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.
Hello Elisabeth,
You actually did not write the helper method in this blog post
Cheers.
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!
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/
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.
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.
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.
Thank you, the helper function is very useful!
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.