Search code examples
angularjsseleniumcapybaratextangular

Capybara integration testing 'TextAngular' input

Using TextAngular for a rich text input box in a AngularJS/ Rails environment.

Running integration tests with Capybara/Selenium & Capybara-Webkit. Tried to create an integration test that inputs text into the text area for a test. However, I have not been able to successfully do this.

The thing that has prevented me is the text input box id changes ever time the test loads or page loads. So I used the below class, which is used in the text angular tests. With:

find('textarea.ta-html.ta-editor')

I used this as i know it works and the javascript tests written for text angular used this. text angular github tests

However, when i try and set the text area with a text value:

find('textarea.ta-html.ta-editor').set("Upgraded to SSD")

I get:

Failure/Error: find('textarea.ta-html.ta-editor').set("Upgraded to SSD")
Selenium::WebDriver::Error::ElementNotVisibleError: Element is not currently visible and so may not be interacted with

How can I set a value for the text area using Capybara?

Solution

  • The element that matches textarea.ta-html.ta-editor is hidden on the page and is not the element a user interacts with. By design Capybara generally requires you to interact with the elements a user would interact with so you need to call #set on the visible element which is the previous sibling to the element you're attempting to interact with and matches div[contenteditable]. You don't show your HTML but hopefully you have a containing element you can scope to so you can do

    find('<container_selector> div[contenteditable]').set(...)

    or 

    find('<more_general_container_selector>', text: '<label text or something else in the container>').find('div[contenteditable]').set(....)

    If you only have one of this type of field on the page you can probably get away with

    find('.text-angular div[contenteditable]').set('Upgraded to SSD')

    Note: If using the selenium driver it has a limitation that it can only interact with the main contenteditable element and not with the children that get created inside it. I'm not sure if the other capybara drivers have the same issue.