All about XPath and CSS Selectors for Automation Testing

Explore inspect techniques and HTML structure, attributes, and common tags like doctype, HTML, head, body, and img. Build a sample page with headings, forms, tables, and iframes to illustrate markup.

Compare XML and HTML, discuss XML basics and XHTML comparison, and show how XPath works on both XML and HTML documents for automation testing.

Discover how to inspect any web page element across Chrome, Safari, and Firefox using dev tools, view the DOM, and highlight elements with keyboard shortcuts.

Learn how to use general locators—ID, name, class, link text, partial link text, and tag name—in Selenium WebDriver, with examples and handling for non-unique or missing elements.

Discover how to locate XPath and CSS selectors using Chrome extensions and built-in dev tools, and learn to generate relative XPath for dynamic elements.

Learn XPath basics to locate HTML and XML elements using attributes and text, validate selectors in the browser console, and apply them in Selenium WebDriver scripts for automation testing.

Master absolute and relative XPath for automation testing, contrast root-to-element absolute paths with landmark-based relative paths that start with single vs double slashes, and learn to craft robust, unique selectors.

Master XPath techniques with logical operators, indexing, and chaining to locate elements among multiple candidates, using attributes like id, name, and class, and apply wildcards for flexible searches.

Learn how to handle dynamic elements in XPath using starts-with and contains to separate dynamic parts from static parts, avoiding brittle absolute paths.

Explore XPath axes to locate web elements, including following, preceding, and siblings. Use child, parent, descendant, and ancestor axes, with self and ancestor-or-self or descendant-or-self, to navigate the DOM.

Learn to write CSS selectors for single or multiple elements using id, class, tag name, and attribute values, with dot and hash notation and guidance on spaces in class values.

learn to handle dynamic elements in css selectors by using caret, dollar, and asterisk operators to match starting, ending, or containing class attribute values for robust automation testing.

Learn to select sibling nodes with css selectors and xpath by using the plus operator to target the next sibling by tag, and apply dot notation for class attributes.

Learn to identify direct and sub children using css selectors, applying the greater-than and space operators, and practice nth, first, and last child concepts on sections with divs and buttons.

Learn how to use CSS selectors to target child nodes—first-child, last-child, and nth-child—by inspecting a section with eight button children and selecting via its class.

Demonstrates using XPath and CSS selector in Selenium WebDriver scripts to fetch headset name, price, and color, hover to reveal color, and click add to cart across two products.

Explore how to use XPath and CSS selectors in Playwright to extract product name, price, and color from a product page, and run a script to print details.

Explore using CSS selectors in the Cypress automation tool with a product detail example that prints the product name and price and runs an end-to-end test in Chrome.