Capybara,Selenium和Redactor富文本编辑器

时间:2013-01-25 13:31:13

标签: selenium rspec capybara redactor

我与Capybara和Selenium遇到了一个有趣的问题。我有一些Capybara请求规范,要求在表单完成时启用javascript。其中一种形式是使用Redactor富文本编辑器的textarea。

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

当测试运行并且Selenium触发(在FF和Chrome驱动程序中)时,Selenium会在以下命令中失败:

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

它返回的错误是:

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

似乎Selenium无法识别Rich Text Editor / Textarea。如果我删除了class="redactor",这是触发Redactor JS在Description文本区域呈现的内容,它可以正常工作。

所以我的问题是,1。是否有解决方法来填写它? 2.或者,我可以以某种方式禁用redactor js进行此测试吗?

3 个答案:

答案 0 :(得分:3)

您可能需要考虑使用Redactor的API来填充编辑器字段:

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

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

end

如果no:in选项被传递,它将找到带有.redactor类的第一个字段。否则,它假定:in值是有效的css finder值。

这避免了必须手动填写隐藏的text_area字段。

答案 1 :(得分:2)

看起来,水豚将包含fill_in contenteditable divs的能力(见https://github.com/jnicklas/capybara/pull/911)。

与此同时,我使用以下内容:(您需要:js =&gt; true适用于您的场景)

# 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

答案 2 :(得分:2)

正如narath所提到的,Capybara现在支持可疑的div。我能够写:

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

fill_in因某种原因不适合我。