CODEWITHSUNDEEP
testingrspeccapybara
codeavenger07
codeavenger07

Reputation: 53

Seeing which elements are available on the page when using Capybara and RSpec

I am using RSpec and Capybara to do testing. I am using binding.pry to test out some lines of code; however, Capybara can not find the element that I need. Is there a command that will list the html elements that are available for me to use as selectors?

FYI, this is my first question and I tried to research as much as possible before asking...

Upvotes: 1

Views: 2149

Answers (2)

Thomas Walpole
Thomas Walpole

Reputation: 49950

There is no built-in method to do that, however depending on which driver you're using you can get something like what you're asking for. If using one of the real browser drivers that has support for the :scope pseudo class you can do something like

find("form.***").all(':scope > *').map {|el| el['outerHTML']}

if no :scope support in the real browser you can use xpath

find("form.***").all(:xpath, './/child::*').map {|el| el['outerHTML']}

If using the default rack-test driver you can do something like

find("form.***").all('> *').map {|el| el.native.to_s }

Those will give you an array of the html elements that are children of your initial find and let you see what classes/attributes/etc they have, and can obviously be turned into a method to make easier to use. While this is possible, please note that specifying every ancestor in a selector when using Capybara can lead to brittle tests, if you ever make a change to the page, and you're usually better off using the capybara provided selectors with locators to find specific elements to interact with whenever possible.

Upvotes: 2

Laura Paakkinen
Laura Paakkinen

Reputation: 1691

You could try printing out page.body in your pry session. It will print a snapshot of the DOM of the current document.

Capybara documentation might be a little tricky to read. What you need to know is that page is equivalent to Capybara.current_session . Capybara::Session instance has the method body, that holds a snapshot of the DOM.

Upvotes: 0

Related Questions