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"

我觉得这是一个父/兄弟问题，但我不能解决它。所以我想我有几个问题：

对于调试，无论如何都有一个使用poltergeist驱动程序来列出所有子元素？
我的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'))");

我选择了一个选择器的快捷方式，因为我知道我正在寻找的标签是第一个，但选择器并不重要，这是console.log（）的想法 - 在binding.pry中使用jQuery很有用。

Answer 2

要为仍在寻找的其他人尝试的东西：尝试使用<script type="text/javascript"> var $boards = $("<div>") .attr("id", "boards") .text("Loading Boards...") .appendTo("#output"); Trello.get("/boards/YSP62hqc/lists", function(boards) { $boards.empty(); $.each(boards, function(ix, board) { $("<h3>") .attr({href: board.url, target: "trello", value : board.id, name : board.id, id : board.id}) .addClass("board") .text(board.name) .appendTo($boards); console.log("List Added"); var resource = "/lists/" + board.id + "/cards"; Trello.get(resource, function(cards) { $cards.empty(); $.each(cards, function(ix, card) { console.log(card.labels[2]); $("<p>") .attr({target: "trello"}) .addClass("card") .text(card.name) .appendTo($cards); }); }); var $cards = $("<div>") .text("Loading Cards...") .appendTo($boards); }); }); </script>代替first(:xpath, './/..')。

最好尽可能减少find(:xpath, '..')的范围，假设表单的id属性是静态的，以获得更好的性能并防止模糊匹配：

find

列出Capybara / Poltergeist元素的子元素

2 个答案: