Blog

Handle DOM hidden element while using cucumber for testing

Cucumber is great tool for behaviour driven testing. Showing and hiding content using javascript or jquery or other client side library is common scenario.
I recently was implementing a feature which has something to show and something to hide. I wanted to allow user to interact with some of module of application without login and then ask for login or registration. Implementing it server side and also at client side was straight.

Now it’s time to write some feature test in cucumber. Fortunately capybara supports to interact with hidden element by configuring
Capybara.ignore_hidden_elements = false(default) / true.  

You can get full information regarding capybara hidden element from here :
https://github.com/jnicklas/capybara#finding
http://makandracards.com/makandra/7617-change-how-capybara-sees-or-ignores-hidden-elements
 

I was using javascript driver selenium and unfortunately selenium doesn’t allow to interact with DOM hidden elements and gives you error Selenium::Webdriver::Error::ElementNotVisibleError

Now, the problem was I have to use selenium and I want to interact with hidden element. How would I do that ? after searching on web and issues I found that I can use capybara’s execute_script().
I ended up setting value like this :
page.execute_script 'document.getElementsByName("amount")[0].value = 200'
which will set value in DOM hidden element.

I test the value with expectation like this :
expect(page.execute_script 'return document.getElementsByName("amount")[0].value').to eq("200")

And things are working smoothly!!