List of child elements of a Capybara / Poltergeist element

Question

I searched and I can’t find a way to do this.

We run Capybara tests with the Poltergeist driver in cucumbers in the EmberJS / Rails application. I cannot use page.driver.debug because I am running inside a headless stray instance, so troubleshooting is not available to me, but the screenshots work, and the Chrome dev tools for checking on the page in question show the correct elements.

I have a cucumber script that does not work, and because the find does not work. My test is as follows:

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

He cannot find this element. Here is the corresponding DOM section:

 <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> 

If I add to binding.pry, this is:

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

gives me this answer:

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

And this:

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

gives me this answer:

 => "Enter your first name" 

but a complete find:

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

gives me this answer:

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

I have a feeling that this is a parent / sister problem, but I cannot fix it. So I think I have a few questions:

• For debugging, is there anyway with a poltergeist driver a list of all the children?
• Is there something wrong with my xpath selector? The fact that .. returns Capybara::Element tag="div" makes me think that I have the correct parent element (and, as I said, it works on other pages in other similar tests), but I have there is no way to check which element it is. I can not find how to get xpath or anything else that helps me identify the element.

Answer 1

I get it. The test worked fine, but in my scenario I did not have an action step.

However, I thought it might be useful for you to find out how I got the content: jQuery execution on the page. I added binding.pry to my test and then to bind.pry. I console logged the jQuery result, for example:

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

I took the shortcut with the selectors because I knew that the shortcut I was looking for was the first, but the selector doesn't matter, this is the idea of ​​console.log () - jQuery in bind.pry, which was useful.

Answer 2

Something to try for others who are still looking: Try using first(:xpath, './/..') instead of find(:xpath, '..') .

It is also recommended that you reduce the scope of find if you can, considering that the form attribute is static, for better performance and to prevent ambiguous matching:

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