在 HTML 编辑器中插入文本答案

【问题标题】：Inserting text in an HTML editor在 HTML 编辑器中插入文本
【发布时间】：2020-09-01 17:17:55
【问题描述】：

我正在做一个测试场景，我必须用功能中传递的字符串填充 HTML 编辑器字段。我的问题是能够输入这些信息。我正在使用 Cucumber 和 Capybara 在 Ruby on Rails 上测试系统。

按照我所面对的 HTML：

<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>

<body> 就是在屏幕上插入文本的位置。这是屏幕上该字段的打印：https://i.stack.imgur.com/yjdV3.png

在我的page.rb中，我有以下方法：

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

我的步骤是：

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

我可以单击该字段，但无法在其中插入信息。错误地，它总是返回给我找不到元素 ID。我尝试了很多方法，但最终以目前的形式停止，因为我无法进步，我总是以同样的错误结束。

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

【问题讨论】：

标签： cucumber capybara capybara-webkit

【解决方案1】：

您需要在 iframe 内移动上下文，否则您将无法访问任何内容。还假设页面上只有这些字段中的一个，您最好按类搜索，并且 id 看起来像是随机生成的。这还假设 body 元素是 contentEditable - 它不会显示在您的 HTML 中，但不允许用户输入其他内容（除非有大量 JS 处理所有这些，然后您就不走运了)

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

【讨论】：

感谢@Thomas 的帮助！