列出 Capybara/Poltergeist 元素的子元素

Question

我已经四处搜索，但找不到这样做的方法。

我们正在使用 Poltergeist 驱动程序在 EmberJS/Rails 应用程序的黄瓜功能中运行 Capybara 测试。我无法使用 page.driver.debug，因为我在无头 vagrant 实例中运行，因此我无法进行故障排除，但屏幕截图有效，并且在相关页面上检查的 Chrome 开发工具显示了正确的元素。

我有一个失败的黄瓜场景，这是因为查找不起作用。我的测试如下所示：

When(/^I delete description "(.*?)"$/) do |description|
  within :css, '#myform' do
    first('label', :text => /#{description}/).find(:xpath, '..').find(:css, 'button.delete')
  end
end

它找不到有问题的元素。这是 DOM 的相关部分：

<form id="myform">
  <div class="row-fluid question">
      <div class="span12">
        <div class="padding">
          <div id="ember576" class="ember-view is-viewing-edit-controls">
            <button class="delete" data-ember-action="31"></button>
            <button class="edit" data-ember-action="32"></button>
            <button class="insert_above" data-ember-action="33"></button>
            <button class="insert_below" data-ember-action="34"></button>
            <button class="move_up" data-ember-action="35"></button>
            <button class="move_down" data-ember-action="36"></button>
            <label class="question" data-ember-action="37">Enter your first name</label>
            <input id="ember577" class="ember-view ember-text-field">
            <span class="error"></span>
          </div>
        </div>
    </div>
  </div>
</form>

如果我添加一个 binding.pry，这个：

first('label', :text => /#{description}/).find(:xpath, '..')
                                                                                              │

给我这个回应：

=> #<Capybara::Element tag="div">

还有这个：

first('label', :text => /#{description}/).find(:xpath, '..')
                                                                                              │

给我这个回应：

=> "Enter your first name"

但完整的发现：

first('label', :text => /#{description}/).find(:xpath, '..').find(:css, 'button.delete')

给我这个回应：

Capybara::ElementNotFound: Unable to find css "button.delete"

我感觉这是一个父母/兄弟姐妹的问题，但我无法解决它。所以我想我有几个问题：

1. 为了调试，是否有一个 poltergeist 驱动程序来列出所有子元素？
2. 我的 xpath 选择器有问题吗？ .. 正在返回 Capybara::Element tag="div" 的事实让我认为我有正确的父元素（就像我说的，它在其他类似测试中的其他页面上工作），但我无法验证它是哪个元素。我找不到如何获取 xpath 或其他任何可以帮助我识别元素的方法。

Answer 1

我想通了。测试工作正常，但我在我的场景中缺少一个操作步骤。

但是，我想你们可能会发现知道我是如何获得内容的很有用：在页面上执行 jQuery。我在我的测试中添加了一个 binding.pry，然后在 binding.pry 我控制台记录了一个 jQuery 结果，例如：

# this gave me the expected contents and verified that button.delete was a child
page.execute_script("console.log($('#myform label.question').parent().html())");

# and this gave me the classes to demonstrate that it was the correct div
page.execute_script("console.log($('#myform label.question').parent().attr('class'))");

我选择了选择器的捷径，因为我知道我正在寻找的标签是第一个，但选择器无关紧要，这是在 binding.pry 中使用 console.log()-ing jQuery 的想法很有用。

Answer 2

为仍在寻找的其他人尝试的东西： 尝试使用first(:xpath, './/..') 而不是find(:xpath, '..')。

如果可以的话，最好缩小find 的范围，假设表单的 id 属性是静态的，以获得更好的性能并防止不明确的匹配：

within('#myform') do
  find('label', text: "#{description}", match: :first). 
  first(:xpath, './/..').
  find('button.delete').
  click
end