XPath is a query language used for choosing nodes from an XML document. The link between the current context node and the destination node we wish to find in the DOM
axes represent a hierarchy.
Note: See XPath to find out more about it.
Name | Functionality |
| It identifies the current node’s parent. |
| It selects the children of the current node that are on the same level. |
| It is the current node’s ancestor (grandparents, parents, etc.) till the root node is selected |
| It selects all the current node’s descendants until the leaf node has no children. |
| It selects all the incoming nodes after the current node, except the attribute and descendants. |
| It selects all the same level nodes after the current node, having the same parent. |
| It selects all the previous nodes from the current node except the attribute and ancestors. |
| It selects all the same level nodes before the current node, having the same parent. |
| It selects the current node |
Let’s see an HTML file that shows the hierarchical organization of vehicles. These vehicles are separated into three groups, with examples within each category, as follows.
ByLand
: Jeep
, Cycle
, and Truck
.
ByAir
: Airplane
, Jet
, and Helicopter
ByWater
: Boat
, Submarine
, and Ship
<!DOCTYPE html><html><body><div class="TransportingVehicles" align="center"><h2>Transporting Vehicles</h2><div class="ByLand" align="left"><h3 align="left">Vehicles transportation by Land </h3><div class="Jeep"><h4>Jeep</h4></div><div class="Cyle"><h4>Cyle</h4></div><div class="Truck"><h4>Truck</h4></div></div><div class="ByAir"><h3>Vehicles transportation by Air </h3><div class="Airplane"><h4>Airplane</h4></div><div class="Jet"><h4>Jet</h4></div><div class="Helicopter"><h4>Helicopter</h4></div></div><div class="ByWater"><h3>Vehicles transportation by Water </h3><div class="Boat"><h4>Boat</h4></div><div class="Submarine"><h4>Submarine</h4></div><div class="Ship"><h4>Ship</h4></div></div></div></body></html>
Note: Inspecting the element of the browser (via right-clicking on the element) helps in getting the XPath for each element.
Now, let’s explore a few XPath axes for this HTML file.
parent
axe//div[@class='Jet']/parent::div
<div class="ByAir"><h3>Vehicles transportation by Air </h3><div class="Airplane"><h4>Airplane</h4></div><div class="Jet"><h4>Jet</h4></div><div class="Helicopter"><h4>Helicopter</h4></div></div>
child
axe//div[@class=’ByAir’]/child::div[@class='Jet']/h4
<div class="ByAir"><h3>Vehicles transportation by Air </h3><div class="Airplane"><h4>Airplane</h4></div><div class="Jet"><h4>Jet</h4></div><div class="Helicopter"><h4>Helicopter</h4></div></div>
ancestor
axe//div[@class='ByAir']/ancestor::div[@class='TransportingVehicles']
<body><div class="TransportingVehicles" align="center"><h2>Transporting Vehicles</h2><div class="ByLand" align="left"><h3 align="left">Vehicles transportation by Land </h3><div class="Jeep"><h4>Jeep</h4></div><div class="Cyle"><h4>Cyle</h4></div><div class="Truck"><h4>Truck</h4></div></div><div class="ByAir"><h3>Vehicles transportation by Air </h3>
preceding
axe//div[@class='Jet']/preceding::div
<div class="Cyle"><h4>Cyle</h4></div><div class="Truck"><h4>Truck</h4></div></div><div class="ByAir"><h3>Vehicles transportation by Air </h3><div class="Airplane"><h4>Airplane</h4></div><div class="Jet"><h4>Jet</h4></div>
In the code example given below, the link provided in the code launches Facebook’s registration page. The code makes use of the child
XPath that starts from the registration form
and relocates to the “Sign Up” button
. When the button is clicked, all the fields show an error because they are empty.
import time from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC from webdriver_manager.chrome import ChromeDriverManager from selenium.webdriver.chrome.options import Options from selenium.webdriver.chrome.service import Service options = Options() options.add_argument('--no-sandbox') options.add_argument('--disable-dev-shm-usage') prefs = {"download.default_directory": "."} options.add_experimental_option("prefs", prefs) browser = webdriver.Chrome(service=Service(ChromeDriverManager().install()), options=options) BASE_URL = "https://www.facebook.com/r.php" browser.get(BASE_URL) print("Facebook page opened.") # Perform action using ancestor axes try: # Uncomment line 24 and comment line 26 to run Ancestor axes. # action_xpath = '*//input[@name="sex"]/ancestor::div[2]//input[@name="lastname"]' action_xpath = '*//div[@id="reg_form_box"]/child::div[11]/button' action_element = WebDriverWait(browser, 30).until( EC.presence_of_element_located((By.XPATH, action_xpath)) ) time.sleep(3) action_element.click() print("Ancestor axes action is performed and clicked.") # Pause for 10 seconds time.sleep(10) except Exception as e: print("Failed to perform action using ancestor axes.") # Close the browser browser.quit()
Lines 10–15: We set up the options
of Chrome and install the browser using webdriver
.
Lines 17–19: We define the Facebook registration page’s URL and launch the Facebook browser page.
Lines 25: We use the XPath of the *//div[@id=“reg_form_box”]
element to pick the div
where the id
is equal to the reg_form_box
. The next statement, /child::div[11]/button
, narrows it down to the 11th child of this div
. Lastly, we click the button
to select the direct child of the 11th div
from the reg_form_box
.
Lines 26: We use the WebDriverWait
and ExpectedConditions
to find the presence of the element pointed by the XPath.
Lines 29–30: We use the time.sleep()
function to add 3
seconds to see the Selenium automation. We click the button after this.
Lines 36–40: We handle any exceptions and finally, close the browser using the browser.quit()
function.
Free Resources