[SOLVED] Inserting text in an HTML editor

Inserting text in an HTML editor

I'm doing a test scenario where I have to fill an HTML Editor field with a string passed in the feature. My problem is in being able to enter this information. I'm using Cucumber with Capybara testing a system on Ruby on Rails.

Follow the HTML I'm facing:

<div class="x-component x-html-editor-input x-box-item x-component-default" id="htmleditor-1324-inputCmp" style="margin: 0px; right: auto; left: 0px; width: 419px; top: 34px;">
<iframe id="htmleditor-1324-inputCmp-iframeEl" name="ext-gen1890" frameborder="0" src="about:blank" class="x-htmleditor-iframe" style="width: 100%; height: 150px;">
<html>
<head>
<style type="text/css">body{border:0;margin:0;padding:3px;direction:ltr;min-height:144px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:text;background-color:white;font-size:12px;font-family:Helvetica}
</style>
</head>
<body style="font-size: 12px; font-family: helvetica, arial, verdana, sans-serif; background-image: none; background-repeat: repeat; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); background-attachment: fixed; cursor: text;">
</body>
</html>
</iframe>
</div>

The <body> is just where the text is inserted on the screen. Here is a print of the field on screen: https://i.sstatic.net/yjdV3.png

In my page.rb, I have the following method:

class SR_wallet
    include Capybara::DSL
    def find_solicitation_description (solicitation_description)
        find('iframe[id="htmleditor-1324-inputCmp-iframeEl"]').set solicitation_description
    end
end

My step is:

And("I fill in the Request field with: {string}") do |solicitation_description|
  @solicitation_description = solicitation_description
  iframe = find('iframe[id="htmleditor-1324-inputCmp-iframeEl"]').click
  within_frame (iframe) do
    @SR_wallet.find_solicitation_description(@solicitation_description)
  end
end

I am able to click on the field but I cannot insert the information in it. In error, it always returns to me that the element ID could not be found. I tried in many ways but ended up stopping in the current form, since I couldn't progress, I always ended up with the same mistake.

 Unable to find css "iframe[id=\"htmleditor-1324-inputCmp-iframeEl\"]" (Capybara::ElementNotFound)

Solution

You need to move the context inside the iframe or you won't be able to access anything. Also assuming there's only one of these fields on the page you'd be better off searching by class that and id that looks like it's randomly generated. This also assumes the body element is contentEditable - which isn't shown in your HTML but wouldn't allow a user to type into it otherwise (unless there's a ton of JS handling all this, and then you're out of luck)

within_frame(class: 'x-htmleditor-iframe') do
  find('body').set solicitation_description
end