在 HTML 编辑器中插入文本

Question

我正在做一个测试场景，我必须用功能中传递的字符串填充 HTML 编辑器字段。我的问题是能够输入此信息。我在 Rails.

上使用 Cucumber 和 Capybara 测试 Ruby 上的系统

关注我面对的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

我可以单击该字段，但无法在其中插入信息。错误的是，我总是 returns 找不到元素 ID。我尝试了很多方法，但最终都停在了现在的形式上，因为我无法进步，所以我总是以同样的错误告终。

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

Answer 1

您需要将上下文移动到 iframe 中，否则您将无法访问任何内容。还假设页面上只有这些字段之一，您最好通过 class 搜索它和看起来像是随机生成的 ID。这还假设 body 元素是 contentEditable - 它未显示在您的 HTML 中，但不允许用户输入其他内容（除非有大量 JS 处理所有这些，然后你运气不好）

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

在 HTML 编辑器中插入文本

Inserting text in an HTML editor

cucumber

capybara

capybara-webkit