Learning XPath, CSS and selectors

Let’s start with XPath CSS and selectors. The Document Object Model (DOM) is a tree-like “in memory” structure, which browsers construct when parsing an HTML page and processing JavaScript that exists either inline in the page or loaded via script tags.

Cascading Style Sheets (CSS) is a style sheet language useful for describing the look and formatting of a document written in HTML or XML. Moreover, CSS Selectors are patterns used to select the styled element(s).
Whereas, XPath, the XML path language. It is a query language for selecting nodes from an XML document. Further, this helps in locating the elements with XPath works very well with a lot of flexibility. Not to mention, XPath uses path expressions to navigate through elements and attributes in an XML document.

Above all, CSS selectors and XPath queries allow us to search this structure to find content and Capybara is wholly reliant on such selectors to be able to locate content within web pages.

For example, finding an element whose id attribute has the value ‘main’

XPath: //*[@id=’main’]

CSS: #main

Finding a direct or indirect child of any <div> element with the class ‘container’

XPath: //div//*[@class=’container’]

CSS: div .container

Make your resume stand out and become a Certified Capybara Testing Professional. Try free practice tests here!

A great career is just a certification away. So, practice and validate your skills to become Certified Capybara Testing Professional