Learn XPath selectors in 10 minutes
Use XPath selectors to find an element of the HTML page or XML data structure. You must know this to write readable and stable tests in any UI automation framework (Cypress, Selenium, Webdriverio, etc.). Another use case for XPath is "data scraping".
This video is part of the "Cypress test automation tutorial".
Full playlist:
• Test automation
Also, check out the "CSS selectors in 10 minutes" video:
• Learn CSS selectors in 10 minutes
-----------------------------------------------------------------------------------------------
---------- Selectors used in this demo -------------------------------------
-----------------------------------------------------------------------------------------------
Common selector patterns.
//meta - selecting by element type
//*[@id="root"] - selecting by id
//*[@class="App"] - selecting by class
More complex selectors.
They allow you to traverse DOM.
//header/h1 - child (element one level below in the DOM)
//div//h1 - descendant (element one or more levels below in the DOM tree)
//h1 | //p - union (pipe separated)
//p/.. - traverse DOM up (parent of p)
//a[@target="_blank" or @target="_self"] - union by attribute
Attribute selectors
//a[@target="_blank"] - by attribute & value
//a[contains(@target, "_bl")] - by attribute & "wildcard" value
//a[starts-with(@target, "_")] - by attribute "starts with" value
Arithmetic operations
//a[@value=10] - by evaluating value content
-----------------------------------------------------------------------------------------------
---------- Timeline -------------------------------------------------------------------
-----------------------------------------------------------------------------------------------
0:00 - intro
0:35 - demo app
1:00 - common & simple selectors
1:52 - traversing the DOM
4:44 - attribute selectors
6:01 - arithmetic operations
6:25 - XPath versions 2 & 3
6:50 - XPath vs CSS selectors
7:55 - testability reminder