Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

XPath and CSS Locators for Test Automation

Name: XPath and CSS Locators for Test Automation
Rating: 4.6 (4939 reviews)

Build stable XPath and CSS selectors using DevTools for Selenium, Playwright, and modern web apps

Highest Rated

Created byDmitry Shyshkin

Last updated 1/2026

English

What you'll learn

Build stable and readable XPath and CSS locators for test automation
Locate complex and dynamic web elements using advanced XPath techniques
Write clean CSS selectors and understand when to use CSS vs XPath
Debug, fix, and improve broken or flaky locators using Chrome DevTools

Course content

9 sections • 48 lectures • 4h 43m total length

Stop Fighting Locators: Course Overview3:36
Create an engaging start that focuses on students’ pains and outcomes first, then briefly introduce yourself and the course structure
How to Learn Locators Effectively4:17
Give concrete, practical instructions on how to follow the course, practice effectively, and use support/resources

Introduction to Section – Locators in Test Automation1:17
What Are Locators and Why They Matter3:21
Define locators and their role in identifying elements on a webpage
Types of Locators in Test Automation4:47
Overview of locator strategies supported by automation frameworks
Why We Use XPath and CSS Locators5:34
Explain why we focus on these two in this course
Testing Locators in Chrome DevTools6:50
Teach students how to quickly test XPath and CSS locators using Chrome DevTools
Locators in Test Automation

Introduction to Section – XPath Fundamentals0:56
What is XPath?2:36
Introduces the concept of XPath and its role in locating elements in web pages
XPath Terminology4:53
Teaches key building blocks and relationships within an XML/HTML document
Absolute vs Relative XPath6:04
Demonstrates the difference between absolute and relative paths, and why relative paths are preferred
XPath Syntax and Attributes4:40
Covers the syntax structure and attribute-based targeting
Understanding /, //, ./, .//8:26
Clarifies how these symbols define context and hierarchy
Index and Position in XPath7:12
Explains indexing and selecting multiple matches
XPath Fundamentals – Core Concepts

Introduction to Section - XPath Functions and Operators0:39
Core XPath Functions10:08
Introduce and demonstrate most used XPath functions
Locating Elements by Nested Text6:43
Teach how the . operator works compared to text()
Using Logical Operators for Complex Conditions11:19
Show how AND, OR, and grouping increase precision
Using Wildcards6:23
Cover wildcard usage and resilient locators for dynamic UIs
XPath Functions and Operators

Introduction to Section - Advanced XPath1:25
Set expectations for what “advanced” means, and when to use these skills in real projects
Understanding XPath Axes – Vertical Navigation14:07
Explain hierarchical navigation using parent, child, ancestor, and descendant
Understanding XPath Axes – Horizontal Navigation12:18
Cover sibling-based navigation for elements on the same level
Combining Axes for Relative Element Location10:40
Teach building powerful relative paths that connect multiple elements logically
Selecting Multiple Paths4:04
Explain the union operator (|) to locate multiple elements with one XPath
Handling SVG and Namespaced Elements9:22
Dedicated lecture for locating SVGs and namespaced XML nodes
Freezing and Debugging Dynamic DOMs in DevTools9:36
Teach deep DevTools workflows for unstable or changing pages
Advanced XPath

Introduction to Section – CSS Selector Fundamentals1:17
Set expectations and explain why CSS selectors are important
What Are CSS Selectors4:35
Define CSS selectors and explain their syntax and structure
Attribute Selectors and Variations5:49
Teach how to locate elements using attributes and partial matches
Combining Selectors8:14
Explain how to target elements precisely using combinations
CSS Selector Fundamentals

Introduction to Section – Advanced CSS Selectors0:41
Explain what makes CSS selectors “advanced” and why these concepts matter in automation
Sibling Combinators4:07
Teach how sibling combinators describe horizontal relationships between elements
Pseudo-Classes for Element Position4:59
Explain how structural pseudo-classes target elements by their position inside a parent.
Relational and Logical Pseudo-Classes8:23
Teach two advanced CSS pseudo-classes that are practical in automation: :has() and :not().
Stable Selectors for Dynamic Elements6:05
Teach strategies to build CSS selectors that remain stable when page attributes, structure, or order change
Advanced CSS Selectors

Introduction to Section – XPath vs CSS0:44
Set context for the comparison. Explain why understanding both helps write flexible, maintainable locators.
XPath Strengths and Limitations1:52
Explain when XPath is the best locator choice and when it becomes problematic.
CSS Strengths and Limitations1:44
Explain where CSS selectors shine and where they reach their limits in automation.
When to Choose XPath vs CSS8:35
Direct, scenario-based comparison to guide real-world decisions.
Tool-Specific Differences (Selenium, Playwright, Cypress)3:08
Explain how frameworks implement XPath and CSS differently.
Locator Limitations: Shadow DOM and Iframes4:29
Explain where and why locator strategies fail or require special handling.
Best Practices and Trade-Offs4:34
Consolidate key lessons from both locator types
XPath vs CSS – Pros and Cons

Introduction to Section: Practice & Course Wrap-Up0:29
Fixing and Improving Auto-Generated Locators12:47
This lecture teaches students how to correct bad DevTools auto-generated locators.
Debugging and Refining Broken Locators18:02
In this lecture, we will practice debugging and fixing broken locators.
Final Challenge: Build Clean Locators from Scratch14:01
This lecture is our final locator challenge for the course.
Final Course Summary4:32
Briefly remind students what they achieved, highlight a few core principles, suggest next steps, and close the course with thanks and a pointer to the bonus lecture
Bonus Lecture: Discount coupons2:55

Requirements

Basic understanding of HTML and how web pages work
Some experience with UI test automation tools like Selenium or Playwright
No advanced programming knowledge required; all locator concepts are explained step by step

Description

XPath and CSS locators are the core skills behind reliable UI test automation. Flaky tests, unstable selectors, and “element not found” errors almost always come from poor locator strategy.

In this course, you’ll learn how to build stable XPath and CSS locators for real web applications using Chrome DevTools. The focus is practical: how to read the DOM, understand element relationships, and create selectors that work in Selenium, Playwright, and modern automation frameworks.

You’ll start with locator fundamentals and quickly move into real XPath and CSS patterns used in production test automation:

XPath syntax, predicates, and relative paths
XPath functions like text(), contains(), starts-with(), and not()
XPath axes for locating elements relative to other elements
CSS selectors, attribute matching, combinators, and pseudo-classes
XPath vs CSS: when to use each and why
Debugging and fixing broken locators in DevTools

This course avoids auto-generated selectors and teaches you how to design clean, readable, and maintainable locators that survive UI changes. Every XPath and CSS selector is tested directly in the browser before being used in automation.

Who this course is for:

QA engineers, SDETs, and test automation engineers
Selenium and Playwright users
Developers writing or reviewing UI tests
Anyone struggling with flaky tests caused by bad locators

By the end of the course, you’ll be able to read any DOM, choose the right locator strategy, and write reliable XPath and CSS selectors with confidence.

Who this course is for:

QA engineers, SDETs, and test automation engineers working with Selenium or Playwright
Developers who write or review UI tests and want more reliable XPath and CSS locators
Anyone struggling with flaky UI tests caused by unstable or auto-generated selectors

XPath and CSS Locators for Test Automation

What you'll learn

Explore related topics

Course content

Introduction to the Course2 lectures • 8min

Locators in Test Automation5 lectures • 22min

XPath Fundamentals7 lectures • 35min

XPath Functions and Operators5 lectures • 35min

Advanced XPath7 lectures • 1hr 2min

CSS Selector Fundamentals4 lectures • 20min

Advanced CSS Selectors5 lectures • 24min

XPath vs CSS – Pros and Cons7 lectures • 25min

Practice & Course Wrap-Up6 lectures • 53min

Requirements

Description

Who this course is for: