Download XPath Cheat Sheet and more Cheat Sheet Web Programming and Technologies in PDF only on Docsity! XPath Cheat Sheet BASICS An element is a tag in the HTML markup. Example: The ‘p’ tag aka paragragh is called an element. To select any element from HTML web pages we simply use the following syntax Example: To select all p elements we can use the following XPath selector Although this approach works perfectly fine, it’s not recommended to use it, because if for example we want only to select the “p” elements that are inside the first div with a class attribute equals to “intro” this approach won’t be the best solution, this is why we always prefer to target elements either by their class attribute, id or by position so we can limit the scope of the XPath expression. //p CLASS & ID So to select any element by its class attribute value we use the following syntax: Example: Let’s say we want to select the “p” elements that inside the “div” with a class attribute equals to “intro” in this case we use the following XPath expression: If we want to select the “p” element with “id” equals to “outside” we can use the following XPath expression: REMEBER: Sometimes we want also to select elements based on a foreign attribute which doesn’t belong to HTML markup standard. For example to select the “li” element with the attribute “data- identifier” equals to 7 in this case we use the following XPath expression: Sometimes the element we want to select does have two classes, for example, to select the “p” element with a class attribute equals to “bold” and “italic” in this case we use the following XPath expression: //elementName[@attributeName=’value’] //div[@class=’intro’]/p //p[@id=’outside’]/p Please note, the same exact class attribute value can be assigned to more than one element however, and id can be assigned to only and only one element. //li[@data-identifier=”7”] //p[@class=’bold italic’] OR: Although the element does have two classes we can for example search for a substring within the class attribute value by using the contains function. REMEBER: //p[contains(@class, ‘italic’)] The contains function takes two arguments: The first one is where to search, whether on the class attribute value, id or anything else. The second argument is the value you’re looking for. The value you search for is also case sensitive, so be careful! XPath axes In XPath an axis is used to search for an element based on its relatioship with another element, we have some axes which we can use to navigate up and down in the HTML markup. All axes in XPath use the follwing syntax: XPath axes (GOING UP) The parent o The parent axis is used to get the parent of a specific element, for example the get the parent of the “p” element with id equals to “outside” we use the following XPath expression: o The node() function in XPath is used to get the “element” no matter what its type is. The ancestor o The ancestor axis can be used to all the ancestors of a specific element, for example to get the ancestors(parent, grand parent, ...) of the “p” element with id equals to “outside“ we use the following XPath expression: The preceding o In XPath the preceding axis will get all the elements that do precede an element excluding its ancestors. //p[@id="outside"]/parent::node() //p[@id="outside"]/ancestor::node() ElementName::axis Preceding sibling o In XPath the preceding-sibling axis will get the sibling that do precede an element, in other words it will return the brother that is on the top of a specific element. XPath axes (GOING DOWN) To go down on the HTML markup we also have 4 axis which are: o The child axis which will get the children of a specific element o The following axis which will return all the elements that are after the closing tag of a specific element. o The following-sibling axis which will return all the elements that are after the closing tag of an element but these elements should share the same parent. o The descendant axis which will get the descendants of a particular element.