Liệt kê các phần tử con cho phần tử Capybara/Poltergeist

Question

Tôi đã tìm kiếm xung quanh và tôi không thể tìm thấy cách để thực hiện việc này.

Chúng tôi đang chạy thử nghiệm Capybara với trình điều khiển Poltergeist trong các tính năng dưa chuột trên ứng dụng EmberJS/Rails. Tôi không thể sử dụng page.driver.debug vì tôi đang chạy bên trong một trường hợp không có đầu, vì vậy khắc phục sự cố không có sẵn cho tôi, nhưng ảnh chụp màn hình hoạt động và công cụ tìm kiếm Chrome kiểm tra trên trang được đề cập hiển thị các phần tử phù hợp.

Tôi có một kịch bản dưa chuột không thành công và do tìm thấy không hoạt động. Bài kiểm tra của tôi trông giống như sau:

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

Không thể tìm thấy phần tử được đề cập. Dưới đây là phần có liên quan của 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> 

Nếu tôi thêm vào một binding.pry, đây:

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

mang lại cho tôi câu trả lời này:

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

Và đây:

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

cho tôi phản hồi này:

=> "Enter your first name" 

nhưng đầy đủ find:

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

mang lại cho tôi câu trả lời này:

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

Tôi có một cảm giác rằng đây là một vấn đề phụ huynh/anh chị em ruột, nhưng tôi không thể khắc phục sự cố nó. Vì vậy, tôi đoán tôi có một vài câu hỏi:

1. Để gỡ lỗi, có anyway với trình điều khiển poltergeist liệt kê tất cả các phần tử con không?
2. Có điều gì sai với bộ chọn xpath của tôi không? Thực tế là .. đang trả về Capybara::Element tag="div" khiến tôi nghĩ rằng tôi có phần tử gốc phù hợp (và như tôi đã nói, nó hoạt động trên các trang khác trong các thử nghiệm tương tự khác), nhưng tôi không có cách nào để xác minh phần tử nào. Tôi không thể tìm cách để có được xpath hay bất cứ thứ gì khác giúp tôi xác định phần tử.

Answer 1

Tôi đã tìm ra điều này. Bài kiểm tra đã hoạt động tốt, nhưng tôi đã bỏ lỡ một bước hành động trong kịch bản của tôi.

Tuy nhiên, tôi nghĩ bạn có thể thấy hữu ích khi biết cách kết thúc nội dung: thực thi jQuery trên trang. Tôi đã thêm một binding.pry để thử nghiệm của tôi, và sau đó trong binding.pry tôi console đăng một kết quả jQuery, ví dụ:

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

Tôi mất một phím tắt với selectors vì tôi biết rằng nhãn tôi đang tìm kiếm là cái đầu tiên, nhưng bộ chọn không quan trọng, đó là ý tưởng của console.log() - ing jQuery trong binding.pry hữu ích.

Answer 2

Điều gì đó để thử những người khác vẫn đang tìm kiếm: Hãy thử sử dụng first(:xpath, './/..') thay vì find(:xpath, '..').

Ngoài ra nó là một ý tưởng tốt để giảm phạm vi của find khi bạn có thể, giả định thuộc tính id của hình thức là tĩnh, cho hiệu suất tốt hơn và ngăn ngừa khớp mơ hồ:

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