Xpath is nothing but XML path, the developer used XPath to validate XML files. HTML also follows the same structures as XML, so we can apply XPath to HTML pages as well along with Puppeteer.
Hope reader is familiar with TryXpath and developer tools of browser which we use for inspecting elements and verify out xpaths
Xpath is nothing but sting expression which used to find the element(s) along with webdriverio, and other automation tools
webdriverio supports xpath 1.0 and xpath 2.0, 3.0 are not compatible. In this tutorial, we are going to learn how to build xpaths and verify xpaths
Xpath follows very simple syntax, please find below image for the xpath syntax
HTML code Syntax
HTML code can have n-number of attributes, Text and closing tag is not mandatory for few elements
There are two kind of xpaths
/ - point to first node on the html document, it is html tag
Note: we are not going to focus on absolute xpath.
// - points to the any node in the webpage
tagName - tag name is nothing but the name which is present after the < (angular bracket)
attribute - whatever is present inside < and > bracket except tagname is attribute, any number of attributes can present in html code
attribute's value - it is corresponding value to the attribute, sometime for boolean attribute developers may not specify any value, in those cases html takes 'true' as default value.
Text - text is the value present inside > and <
Now let form the xpath for the above html code.