列出Capybara/Poltergeist元素的子元素 [英] List child elements for a Capybara/Poltergeist element

问题描述

我已经四处搜寻，但找不到解决方法.

I've searched around and I can't find a way to do this.

我们正在使用Poltergeist驱动程序在EmberJS/Rails应用程序的黄瓜功能中运行Capybara测试.我无法使用page.driver.debug，因为我在无头的流浪汉实例中运行，因此故障排除对我不可用，但是屏幕截图有效，并且有问题的页面上的Chrome开发人员工具检查了正确的元素.

We are running Capybara tests with the Poltergeist driver in cucumber features on an EmberJS/Rails app. I can't use page.driver.debug because I'm running inside a headless vagrant instance, so that troubleshooting is not available to me, but screenshots work, and a Chrome dev tools inspect on the page in question shows the right elements.

我遇到了一个失败的黄瓜方案，这是因为查找无效.我的测试如下:

I have a cucumber scenario that's failing, and it's because the find isn't working. My test looks like this:

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

找不到相关元素.这是DOM的相关部分:

It can't find the element in question. Here is the relevant section of the 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，则此操作:

If I add in a binding.pry, this:

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"

我觉得这是父母/兄弟姐妹的问题，但我无法对其进行故障排除.所以我想我有几个问题:

I have a feeling that this is a parent/sibling issue, but I can't troubleshoot it. So I guess I have a couple of questions:

1. 要进行调试，是否仍然有poltergeist驱动程序列出所有子元素?
2. 我的xpath选择器有问题吗? ..返回Capybara::Element tag="div"的事实使我认为我拥有正确的父元素(并且就像我说的那样，它在其他类似测试中的其他页面上也可以使用)，但是我无法验证它是哪个元素.我找不到如何获取xpath或任何其他可以帮助我识别元素的东西.

1. For debugging, is there anyway with a poltergeist driver to list all child elements?
2. Is there something wrong with my xpath selector? The fact that .. is returning Capybara::Element tag="div" makes me think I have the right parent element (and like I said, it works on other pages in other similar tests), but I have no way to verify which element it is. I can't find how to get the xpath or anything else that helps me identify the element.

推荐答案

我知道了.测试工作正常，但我的方案中缺少操作步骤.

I figured this out. The test was working fine, but I was missing an action step in my scenario.

但是，我认为大家可能都会发现了解最终获取内容的方法很有用:在页面上执行jQuery.我在测试中添加了binding.pry，然后在binding.pry中，我控制台记录了jQuery结果，例如:

However, I thought y'all might find it useful to know how I ended up getting the contents: executing jQuery on the page. I added a binding.pry to my test, and then in the binding.pry I console logged a jQuery result, e.g.:

# 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'))");

我对选择器采取了捷径，因为我知道我要查找的标签是第一个标签，但是选择器并不重要，它是在console.log()中绑定jQuery的想法.很有用.

I took a shortcut with the selectors because I knew that the label I was looking for was the first one, but the selector doesn't matter, it's the idea of console.log()-ing jQuery in binding.pry that was useful.

这篇关于列出Capybara/Poltergeist元素的子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！