列出Capybara/Poltergeist元素的子元素

Question

我四处寻找,我找不到办法做到这一点.

我们在EmberJS/Rails应用程序中使用黄瓜功能中的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>

如果我添加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。我在测试中添加了一个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 的想法很有用。