Capybara integration testing 'TextAngular' input

Question

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?

Answer 1

匹配textarea.ta-html.ta-editor的元素隐藏在页面上，而不是用户与之交互的元素。根据设计，Capybara通常要求您与用户交互的元素进行交互，因此您需要在可见元素上调用#set，该元素是您尝试与之交互的元素的先前兄弟，并且匹配{ {1}}。你没有显示你的HTML，但希望你有一个可以扩展的包含元素，以便你可以做到

div[contenteditable]

或

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

如果您在页面上只有一种此类字段，则可以使用

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

注意：如果使用selenium驱动程序，它有一个限制，即它只能与主要的contenteditable元素交互，而不能与在其中创建的子元素交互。我不确定其他的水豚司机是否也有同样的问题。