Rspec/Capybara - 如何在跨度内定位数据目标属性

Question

在我的 Rails4/rspec 应用程序中，我需要使用数据目标属性让雄性水豚点击一个没有正式 "link" 的区域。

html

<div class="info-zone">
   <span data-target="#myInfoZone1" class="City" data-toggle="modal">  
   </span>
</div>

我目前尝试使用 capyabar 失败

describe "modal loads with the right content" do
      it "has right text" do
        visit actual_page_path(:id => @deal.id) 
        find("span[data-target='#myInfoZone1']").click
      end

我目前收到此错误

Capybara::ElementNotFound:
       Unable to find css "span[data-target='#myInfoZone1']"

如何制作水豚 "find" 并点击区域？

感谢您的帮助

编辑

我找到水豚找不到的原因了！

出于一个我无法理解的原因，那就是 html 水豚发现的输出代码

<!-- city zone -->
<div id="city-zone">

  <!--
    We gather here the various types of <spans> and load it via javascript
we append it to the the div id=city-zone
  -->
</div>

我正在使用 javascript 在这个 div 中加载。所以当我加载 'page source' 时，我看到了上面的内容

但是当我继续 chrome 开发工具时，我看到：

<!-- city zone -->
<div id="city-zone">

   <div class="info-zone">
       <!--
    We gather here the various types of <spans> and load it via javascript
we append it to the the div id=city-zone
  -->
   <span data-target="#myInfoZone1" class="City" data-toggle="modal">  
       </span>
    </div>
</div>

所以我猜水豚看到的东西和我加载页面源时看到的一样：没有。为什么我附加的 javascript 没有出现在 html 代码源中？

如何使水豚正常工作

Answer 1

Capybara 的默认驱动程序仅测试 html 由您的后端应用程序服务器呈现的。如果你也想用前端 javascript 测试页面，你应该使用支持 javascript 的 Capybara 驱动程序。

幸运的是，thoughtbot made a Capybara extension just for that Capybara-webkit You can easily install it in your Gemfile. Follow the instructions here 的人们了解如何安装 gem。

最后，安装后，您可以通过在 [=22] 中添加 js: true 在您的功能规范中启用 javascript 测试=]如下：

RSpec.feature "test my new feature", js: true do
  # my test
end

Rspec/Capybara - 如何在跨度内定位数据目标属性

Rspec/Capybara - how to target data-target attribute inside a span

rspec

ruby-on-rails

capybara

ruby-on-rails-4