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

Answer 1

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