使用 Capybara 测试焦点答案

【问题标题】：Testing focus with Capybara使用 Capybara 测试焦点
【发布时间】：2011-10-29 17:34:18
【问题描述】：

我的视图模板中有一个简单的link_to_function

<%= link_to_function "add new category", "$('#category_name').focus()" %>

我想使用请求规范与 capybara 进行测试。基本上规范应该是这样的

it "focuses category form when I click 'add new category'" do
  visit new_article_path
  click_link "add new category"

  # unfortunately there's nothing like 'has_focus?'
  find_field("category_name").should have_focus  
end

问题是，我找不到任何可以检查元素是否有焦点的东西。 我唯一找到的就是这个

page.evaluate_script('document.focus')[:id]

但capybara-wekbit 驱动程序不支持，我使用它来避免每次测试运行都打开浏览器。

【问题讨论】：

标签： ruby-on-rails-3 rspec integration-testing capybara

【解决方案1】：

我刚刚使用了以下代码（使用 phantomjs 驱动程序，但我相信它也适用于 webkit）：

page.evaluate_script("document.activeElement.id") == "some_id"

附：一年的问题没有答案。他们应该给我一个徽章吗？ :)

【讨论】：

非常有帮助；你当然应该得到一个徽章。谢谢。
如果实际的activeElement实际上是异步插入到dom中的，这个方法将不起作用，因为它不一定已经在dom中（因此可以集中）。因此，必须添加另一个检查元素是否已经在 dom 中。
我发现使用 page.evaluate_script('document.activeElement').path == element.path 很有帮助，因为焦点元素并不总是有 ID。
直接比较它们对我有用（chrome 驱动程序）：expect(evaluate_script("document.activeElement")).to eq(find_field("Foo"))

【解决方案2】：

您应该使用:focus 选择器，例如：

page.should have_selector('#category_name:focus')

【讨论】：

CSS 会建议这样做，但似乎 Capybara/Poltergeist 没有正确处理 :focus 选择器。 ':focus' 我总是得到一个空的结果，即使 document.activeElement 告诉我它有正确的 HTMLInputElement 焦点。

【解决方案3】：

使用 Selenium 驱动程序，您可以获得焦点元素：

page.driver.browser.switch_to.active_element

然后你就可以用它做你喜欢的事了

page.driver.browser.switch_to.active_element.send_keys "some text"

注意它返回一个Selenium::WebDriver::Element 而find 返回一个Capybara::Node::Element，所以比较它们时要小心

expect(page.driver.browser.switch_to.active_element).to eql(find('#some-element').native)

【讨论】：