Capybara, Selenium, and the Redactor Rich Text Editor trio

Encountered an intriguing issue with Capybara and Selenium. Some Capybara request specs demand javascript to be enabled while interacting with a form. Particularly, one of the forms contains a textarea that utilizes the Redactor Rich Text Editor.

<div class="control-group">
<%= f.label :description, "Description", class: "control-label" %>
    <div class="controls">
        <%= f.text_area :description, rows: 10, class: "redactor"%>
    </div>
</div>

During the test when Selenium is triggered (using FF and Chrome drivers), it fails at the command:

`fill_in "Description", with: "some description"`

The error message reads:

Selenium::WebDriver::Error::InvalidElementStateError:
   Element is not currently interactable and may not be manipulated

It appears that Selenium is struggling to recognize the Rich Text Editor/Textarea. Removing the class="redactor", which triggers the Redactor JS for the Description text area, resolves the issue.

My question now is twofold: 1. Is there a workaround to successfully fill in the field? 2. Alternatively, could we disable the redactor js just for this specific test?

seleniumrspeccapybararedactor

Answer №1

One useful approach is to leverage Redactor's API when populating editor fields:

def populate_redactor(options)
  if options[:in]
    element = "('#{options[:in]}')"
  else
    element = "('.redactor')"
  end

  page.execute_script( "$#{element}.redactor('set', '#{options[:with]}')" )

end

If the :in option is not provided, it will search for the first field with the .redactor class. If provided, it assumes the :in value is a valid CSS selector.

This method eliminates the need to manually input data into the hidden text_area field.

Answer №2

It has been noted by narath that Capybara now offers support for contenteditable divs. I managed to input the following code successfully:

find('.redactor_editor').set('text')

For some unknown reason, fill_in was not functioning as expected in my case.

Answer №3

Exciting news! Capybara is getting an update that will allow users to fill_in contenteditable divs. You can read more about it here: https://github.com/jnicklas/capybara/pull/911.

In the meantime, I've come up with a workaround that you can use (just make sure to include :js => true in your scenario).

# fill_in_redactor :in => find(".text1"), :with => "Hello world"
def fill_in_redactor(options)
  if options[:in]
    parent = "(#{options[:in]}).find"
  else
    parent = ""
  end

  page.execute_script( "$#{parent}.('.redactor_editor').html('#{options[:with]}')" )
  page.execute_script( "$#{parent}.('.redactor').html('#{options[:with]}')" )
end

def no_redactor
  page.execute_script("$('.redactor').destroyEditor();");
end

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having difficulty choosing dropdown option within iframe using Selenium Java

I am facing an issue where I cannot seem to choose a value from a dropdown menu that is located inside an iframe on the website: Below is the code that I have been using: public class SelectDropdown { public static void main(String[] args) throws Interr ...

javaseleniumiframedropdown

Using Python with Selenium to interact with a drop-down menu element within a

I am a beginner in the field of selenium and I'm stuck on how to select an item from a drop down menu. Despite my research efforts, I have not been able to find a solution. <div class="Select-value"> <span class="Select-value-label" role="o ...

pythonselenium

ChromeDriver continuously launches multiple times

Whenever I run the test below, Chrome keeps launching multiple times which causes the test to fail. I have been debugging for the past two days without success. Could you please help me identify where I am going wrong? Any assistance would be greatly appre ...

javaseleniumselenium-chromedriverwebdriver

Extracting all Twitter links from a webpage with RSelenium

I'm encountering an issue while attempting to extract URLs from a webpage using Rselenium. I keep receiving an InvalidSelector error. My setup consists of R 3.6.0 on a Windows 10 PC, with Rselenium 1.7.5 and Chrome webdriver (chromever="75.0.3770.8") ...

rseleniumxpathrseleniumxpath-1.0

Error encountered with Selenium script execution

As a newcomer to selenium, I require assistance with the following script where I am attempting to input a value via a text field. Below you can find the code snippet. import org.openqa.selenium.By; import org.openqa.selenium.JavascriptExecutor; import or ...

seleniumtestingautomation

Mastering the art of typing authentically like a human using ActionChains' key_down and key_up

I am developing an online automation tool. However, this specific website evaluates the user's typing speed, causing issues with input commands. The error message is triggered by two factors: the timing of key presses and releases. This means that th ...

pythonselenium

The launch of the hudson:firefox browser in Selenium is unsuccessful when executing Selenium scripts via Hudson

After integrating my Selenium scripts (using JUnit) with Hudson and invoking my job through Ant, I encountered an issue where my scripts were running successfully but the Firefox browser was not opening. It is important to note that I am currently not ut ...

selenium

Retrieve the text from the input field following a page refresh

When attempting to retrieve the value generated after clicking the submit button from an input box, I am facing an issue where the page reloads and does not provide any output. This is on the website I have attempted to use the .text option with the xpath ...

pythonselenium

Evaluating h1 content in HTML using Angular Protactor testing

I am completely new to end-to-end testing. I have a login page in my application that should be displayed to users when they log out. However, I am facing an issue with retrieving the text from a specific div element containing an h1 tag, leading to unexpe ...

htmlangularseleniumprotractorend-to-end

Learn how to streamline the task of verifying Twitter profiles by creating an automated system that can also send messages if desired

Is there a way to use Selenium with Python and Requests to check if a specific profile has the message function? https://i.stack.imgur.com/0Q4RB.png ...

pythonseleniumpython-requests

When attempting to close the current window in Python, Windows Handling automatically shuts down the entire browser

Currently, I am using Windows handling to open the map directions in a new window. After the new window opens, I close it and continue with the remaining work in the code. However, instead of just closing the child window, the whole browser is being closed ...

pythonseleniumselenium-webdriverwebdriverwaitwindow-handles

Running several Angular requests simultaneously can trigger failures in test cases

I am facing an issue with my Angular 1.5 application and Rails 4.0 backend. During testing, when a Staff member logs in, three queries are simultaneously sent to the backend causing errors. Strangely, this issue does not occur in the development environmen ...

ruby-on-railsangularjsseleniumtestingcapybara

The action of clicking on the dropdown menu does not yield any results

see image description hereI am new to Python with Selenium and I am practicing. I am attempting to click on a dropdown element, it appears highlighted but does not respond to clicks. Below you will find the code I have used along with a screenshot and th ...

pythonseleniumhtml-selecthtml.dropdownlistfor

Click on the 'Login' button on the webpage if it is available

Here is what I need: If the 'Login' button is displayed, click on it and proceed with the use case. If the 'Login' button is not present, go ahead with the use case directly (no need to click on 'Login' button). Based on t ...

seleniumselenium-webdriverallure

Protractor Error: Internet Explorer Launch Error Due to Inconsistent Protected Mode Settings Across Zones

I need help troubleshooting my protractor launch. Here is the code snippet I am currently using: conf.js containing the following: // Sample configuration file. exports.config = { // Address of running selenium server. seleniumAddress: 'http://lo ...

angularjsseleniumprotractorgulp-protractor

A guide on repositioning draggable child elements within the same parent using Selenium with Python

Consider the following HTML structure: <div name="parent"> <div name="child one"> </div> <div name="child two"> </div> <div name="child three"> </div> <div name="child four"> </div> < ...

pythonseleniumselenium-webdriver

Executing Tasks in Kubernetes

As I work on developing a scraping app using multiple Selenium scripts that are interdependent, I've realized the potential benefits of utilizing Kubernetes for this project. However, in order to make this setup successful, I need to establish communi ...

seleniumkubernetes

Looking for a Solution to Secure Files Using Selenium Webdriver During Threading?

Implementing multiple threads to initialize PhantomJS or Chromedriver with the following code: Driver= webdriver.PhantomJS('C:\phantomjs.exe',desired_capabilities=dcap, service_args=service_args) or Driver= webdriver.Chrome(executable_pa ...

pythonmultithreadingseleniumweb-scraping

Repeatedly clicking on a pagination 'load more' button in Selenium (Python) to load dynamically generated JavaScript data

I have been attempting to crawl the content of a website by dynamically clicking a 'load-more' button. Despite researching similar questions on Stack Overflow, I have not found a solution that addresses my specific issue when parsing the website ...

pythonseleniumpaginationweb-crawlerselenium-chromedriver

Using Python to choose a linked image for downloading a file

I am a beginner in website manipulation using Python. My main goal is to check if a website has updated data and download it if available. The challenge lies in trying to initiate the download after selecting options from drop-down menus. The website use ...

pythonselenium