Capybara error: Selenium::WebDriver::Error::ElementNotVisibleError: element not visible

Question

I am using the Trix WYSIWYG editor in my app. For my capybara test: I want to fill in the editor.

I found the article: How to test basecamp's trip editor... which seemed promising. Unfortunately it keeps giving me this error:

Selenium::WebDriver::Error::ElementNotVisibleError: element not visible

So it appears that Capybara is finding the element ok, but it is just not interacting with it because Capybara must have some default setting to not interact with hidden/invisible elements.

After looking around I came upon this Stackoverflow question: Is it possible to interact with hidden elements with capybara.

From that post: I have already tried this:

def fill_in_trix_editor(id, value)
  Capybara.ignore_hidden_elements = false
  find(:xpath, "//*[@id='#{id}']").set(value)
  Capybara.ignore_hidden_elements = true
end

As well as this:

def fill_in_trix_editor(id, value)
  find(:xpath, "//*[@id='#{id}']", visible: false).set(value)
end

Any idea as to how I can get Capybara to fill in the editor? For what it is worth: I am using rails 5.1.1 and chromedriver=2.29.461585

How can the user interact with a hidden element? What is your spec testing for? It should run whatever code it needs to make that element visible i.e. whatever the user would do to make it visible — DiegoSalazar
@DiegoSalazar I updated my question. Ultimately I am trying to figure out how to fill in the editor with Capybara. The path I was going down made it appear as though it wasn't possible to fill in the editor directly, so the only alternative was to have Capybara fill in the hidden element. I am working off of Thomas's answer now in order to get it to work. — Neil

Thomas Walpole Thomas Walpole · Accepted Answer · 2017-06-08T19:05:07

Short answer: You can't using selenium

Longer answer: That error is selenium preventing you from interacting with a non-visible element because there would be no way for a user to click or send keys to a non-visible element.

If you really want to change the value of a hidden element, the only way would be using JS via execute_script but that most likely won't generate the events trix is expecting/using. A much better solution would to be figure out what visible elements a user would interact with and interact with them directly. Capybara with selenium does support calling set on visible contenteditable elements which is what trix appears to be using (along with custom elements) so something like

find(:css, 'trix-editor').set("New text")

will probably work for you

Capybara error: Selenium::WebDriver::Error::ElementNotVisibleError: element not visible

1 Answers