Tutorial: How to Find Locators in the DOM Using CSS and XPath(Beginner level)

Introduction

In this tutorial, you will learn how to find locators in the Document Object Model (DOM) using CSS selectors and XPath. For students embarking on their UI automation journey, it is vital to study CSS and XPath as foundational skills, much like learning SQL. It is particularly crucial for beginners to learn how to find these locators using developer tools rather than relying on recording tools, fostering a deeper understanding and enhancing automation capabilities. Once you feel comfortable then you can revert back on the tooling supported

Prerequisites

• A modern web browser (e.g., Google Chrome or Firefox)
• A development environment like Visual Studio Code
• Basic knowledge of HTML, CSS, and JavaScript
• Selenium WebDriver installed on your machine

Overview of the DOM

The DOM is a programming interface for web pages. It represents a document as a structured group of nodes and objects, providing programming languages with the ability to access and modify the document’s structure, style, and content.

CSS Selectors

CSS selectors are used to select and manipulate elements on a web page. Selenium WebDriver can also use these selectors to locate elements in the DOM.

Commonly Used CSS Selectors

• element: selects all elements of the specified type.
• #id: selects the element with the specified id.
• .class: selects all elements with the specified class.
• element,element: selects all elements that match either of the specified selectors.

Advanced CSS Selectors

• Child selectors:
  • ul>li: selects all li elements that are direct children of a ul.
• Nth-child selectors:
  • p:nth-child(2): selects the second p element child of its parent.
• Adjacent sibling selectors:
  • h2 + p: selects every p element that directly follows an h2 element.
• Attribute selectors:
  • [attr]: selects elements that have a certain attribute.
  • [attr='value']: selects elements with a specific attribute and value.
  • [attr^='value']: selects elements whose attribute starts with a certain value.
  • [attr$='value']: selects elements whose attribute ends with a certain value.
  • [attr*='value']: selects elements with an attribute containing the specified value.

Examples

• Locating text:
  • driver.findElement(By.cssSelector("tagname:contains('text')"))
• Locating tables:
  • driver.findElement(By.cssSelector("table"))
• Locating input fields:
  • driver.findElement(By.cssSelector("input"))
• Locating buttons:
  • driver.findElement(By.cssSelector("button"))
• Locating the first child of an element:
  • driver.findElement(By.cssSelector("ul > li:first-child"))
• Locating an adjacent sibling element:
  • driver.findElement(By.cssSelector("h2 + p"))
• Locating an element based on a part of an attribute’s value:
  • driver.findElement(By.cssSelector("input[type$='text']"))

CSS selectors do not provide a direct way to navigate from a child to a parent element. Instead, understanding the page’s DOM structure and writing your selectors accordingly is essential.

XPath

XPath (XML Path Language) is a language used to select elements in an XML document. Selenium WebDriver can also use XPath to locate elements in the DOM.

Common XPath Expressions

• //tagname: selects all nodes with the specified tag name.
• //tagname[@attribute='value']: selects all nodes with the specified tag name and attribute value.
• //tagname[text()='text']: selects all nodes with the specified tag name and text.

Advanced XPath Expressions

• Axis selection:
  • //book/ancestor::*: selects all ancestors of the book element.
• Attribute selection:
  • //book[@price]: selects all book elements that have a price attribute.
• Wildcards:
  • //price/../*: selects all children of the parent of the price element.

Examples

• Locating text:
  • driver.findElement(By.xpath("//tagname[text()='text']"))
• Locating tables:
  • driver.findElement(By.xpath("//table"))
• Locating input fields:
  • driver.findElement(By.xpath("//input"))
• Locating buttons:
  • driver.findElement(By.xpath("//button"))
• Locating the parent element of a certain element:
  • driver.findElement(By.xpath("//td[text()='OpenAI']/parent::tr"))
• Locating the first child of a certain element:

What is going wrong when you rely on tools:
It never finds the proper element in the dom. I always get questions how to get one result instead of 2, and then it does not click.
Tools can not explain you how to manage state within a website and the xpath/css visible
Shadowdom cannot be learned easily from supported tooling

There will soon be lab sessions in which I learn while playing around how to find them, give them a proper name for your pageobject strategie for example. It will help you become a super profi in the end

Follow me on LinkedIn: www.linkedin.com/comm/mynetwork/discovery-see-all?usecase=PEOPLE_FOLLOWS&followMember=ralphvanderhorst