Cucumber and Capybara, clicking a non-link or button element

Question

I am trying to test an inplace editor using Cucumber/Capybara/Selenium stack, but my problem is that the editor is activated by clicking a div and not a link or button. I can not seem to figure out how to get Capybara to do this. Is there a way of doing this?

Answer 1

You can click on an element via Capybara::Element.click. I add the following for this in my web_steps.rb to click on divs.

When /^(?:|I )click within "([^"]*)"$/ do |selector|
  find(selector).click
end

There is also Element.trigger('mouseover') which appears to enable hover albeit not working with Selenium.

It is also very likely you will need to decorate your feature/scenario with Capybara's provided @javascript tag.

Answer 2

Besides being able to click on button elements like @Jim Mitchener explained, you can also click on a part of a text in the following way:

# WhenI click on the text "Sign in"
When(/^I click on text "(.*?)"$/) do |text|
  click_text(text)
end

def click_text(text)
  elem = find(:xpath, "//*[contains(translate(text(), '#{text.upcase}', '#{text.downcase}'), '#{text.downcase}')]", match: :first, wait: false)
  scroll_to(elem, -200)
  elem.click
end

This helper function does the same thing as find(selector).click, it finds the text element.

I found this article very good, it explains different types of steps you can write in cucumber.