列出 Capybara/Poltergeist 元素的子元素

我四处寻找，但找不到办法做到这一点。

我们正在 EmberJS/Rails 应用程序上的 Cucumber 功能中使用 Poltergeist 驱动程序运行 Capybara 测试。我无法使用 page.driver.debug，因为我在无头流浪实例中运行，因此我无法进行故障排除，但屏幕截图有效，并且相关页面上的 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>

如果我添加绑定.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 或其他任何可以帮助我识别元素的内容。

我明白了这一点。测试工作正常，但我在场景中缺少一个操作步骤。

然而，我想你们可能会发现了解我最终如何获取内容很有用：在页面上执行 jQuery。我在测试中添加了一个binging.pry，然后在binging.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 的想法很有用。