Cucumber + Capybara + Selenium：选择文本

Posted 2023-03-06

【中文标题】Cucumber + Capybara + Selenium：选择文本

【英文标题】：Cucumber + Capybara + Selenium: selecting text

【发布时间】：2011-05-27 07:27:12

【问题描述】：

我正在对文本编辑器进行更改，并且我需要能够选择文本以使用 javascript 对其进行操作。 如何使用 Cucumber、Capybara 和 Selenium 选择文本？

【问题讨论】：

这个标题听起来像是致命的hors d'œuvre。只是说。请原谅这个评论的星期五。

【参考方案1】：

我发现了另一个关于如何使用 JavaScript 选择文本的 *** 问题。

Can you set and/or change the user’s text selection in JavaScript?

我能够修改他们的脚本，以便能够在 Selenium IDE 的 getEval 调用中工作（如果您以不同的方式使用 Selenium，您可能需要修改它）。我还删除了与 Firefox 无关的代码：

function selectElementContents(el,start,end) 
    var sel = window.getSelection();
    var range = window.document.createRange();
    range.setStart(el,start);
    range.setEnd(el,end);
    sel.removeAllRanges();
    sel.addRange(range);

selectElementContents(window.document.getElementById("container").firstChild,10,20)

这允许您在单个元素中选择一系列文本。 “Container”是包含文本的元素的ID，10和20是开始和停止字符的索引。

只需将其压缩为一行，将其添加到 Selenium getEval 语句中，它就会为您选择文本。

如果单个元素中的文本对您来说不够灵活，那么有关 JavaScript 范围的文档应该为您提供所需的额外详细信息。

【讨论】：

谢谢。不过，我正在研究如何将其应用到我的设置中。

【参考方案2】：

将 Josh 建议的方法绑定到 Capybara 辅助函数中（并为开始/结束元素中的部分选择添加可选的位置参数）：

module TextSelection
  def select_text(startEl, endEl, startPos = 0, endPos = 0)
    js = <<-JS
      var sel = window.getSelection();
      var range = window.document.createRange();
      range.setStart(arguments[0],#startPos);
      range.setEnd(arguments[1],#endPos);
      sel.removeAllRanges();
      sel.addRange(range);
    JS

    page.execute_script(js, startEl.native, endEl.native)
  end
end

World(TextSelection)

那么，在你的测试中：

start_el = first('#first')
end_el = first('#last')
select_text(start_el, end_el)