capybara, selenium interact with hidden or display: none css properties

Question

I'm using similar construction:

<div class="edit" style="visibility: hidden;">
  <a href="some_path" id="edit_item">Edit</a>
</div>

Then I hover mouse this element become visible, but I have difficult to interact this actions with tests(using cucumber, capybara, selenium).

I get an error

Element is not currently visible and so may not be interacted with (Selenium::WebDriver::Error::ElementNotDisplayedError)

I tried to use Element.trigger(event) with mouseover, but it doesn't work in selenium... How I can interact with this element?

Mikhail Grishko · Accepted Answer · 2011-10-17 19:04:08Z

4

I solved this problem using execute_script from capybara:

When /^I hover element "([^""]*)"(?: within "([^""]*)")?$/ do |id,selector|
  with_scope(selector) do
    page.execute_script("$('#{id}').mouseover();")
  end
end

When /^I click in hide element "([^""]*)"(?: within "([^""]*)")?$/ do |id,selector|
  with_scope(selector) do
    page.execute_script("$('#{id}').click();")
  end
end

but this solution doesn't work with css - display: none;

answered Oct 17, 2011 at 19:04

Mikhail Grishko

4,2783 gold badges25 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Niklas Hofer Over a year ago

Be aware that with_scope has no effect on execute_script.

Maximo Mussini · Accepted Answer · 2020-12-04 14:29:44Z

For future reference, have in mind that execute_script can be called in elements, which provides better async guarantees:

When /^I hover element "([^""]*)"(?: within "([^""]*)")?$/ do |id,selector|
  element = within(selector) { find_by_id(id) }
  element.execute_script('this.mouseover()')
end

When /^I click in hide element "([^""]*)"(?: within "([^""]*)")?$/ do |id,selector|
  within(selector) { find_by_id(id) }.execute_script('this.click()')
end

Specifying visible: :all is another way to find hidden elements:

find('.edit', visible: :all).hover
click_link('Edit')

That said, interacting with hidden elements may hide real issues in the UI that won't allow a user to perform an interaction, so it's better to use it sparingly.

Collectives™ on Stack Overflow

capybara, selenium interact with hidden or display: none css properties

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related