Find correct xpath with selenium Python

Question

I'm currently working on a project with Selenium and webdriver. So far so good I can navigate through the website using selenium without any problem however, I would need to click on a specific icon to slides through to a date and time table. Issue is when looking at the HTML I have no idea what to locate with Selenium in order to click on that icon.

HTML sample:

<a _ngcontent-oyt-c155="" class="btn btn-soft-primary day-selector-navbutton"><i _ngcontent-oyt-c155="" class="fa fa-chevron-right"></i></a>

Usually I'm locating items by name, ID or Class but in that case I don't know where to got with.

Should I look for the xpath instead ?

In my experience css selectors are the best way to get desired element/elements. You can find them bu right clicking on the element in the inspection tool and selecting copy css selector — Charalamm, Mar 10 '22 at 07:42
@Charalamm XPath and css selectors having almost the same capabilities to locate elements on the DOM while XPath do has some advantages like locating parent node based on the child node and locating element based on it text value. — Prophet, Mar 10 '22 at 07:50

Prophet · Accepted Answer · 2022-03-10T08:15:31.807

1

Accordingly to what you have shared here this XPath should work:

'//a[@class="btn btn-soft-primary day-selector-navbutton"]//i[@class="fa fa-chevron-right"]'

I can't be completely sure if this locator is unique or if there is no iframe there etc.
You will possibly need to add some kind of wait here too. If so you should preferably use Expected Conditions explicit waits.

edited Mar 10 '22 at 08:15

answered Mar 10 '22 at 07:46

Prophet

32,350
22
54
79

Did this worked? – Prophet Mar 10 '22 at 08:10
Yes it is locating the arrow icon. Unfortunally there is a go back icon aswell, that the code above is refering to. HTML OF icon-left: – tboekhorst Mar 10 '22 at 08:10
So it should be more specific for the class fa fa-chevron-right – tboekhorst Mar 10 '22 at 08:12
Can you please share the link to that page or entire page HTML so we will be able to create unique locator? But please not in a comment, inside your question. – Prophet Mar 10 '22 at 08:12
Ah, you mean with the internal `i` element it makes the locator unique? – Prophet Mar 10 '22 at 08:13
Please see my updated answer – Prophet Mar 10 '22 at 08:15
Yes, indeed. Thank you for your time tho! @undeteced Selenium has given a working example :) – tboekhorst Mar 10 '22 at 08:15
1

Your code works aswell! thank you sir – tboekhorst Mar 10 '22 at 08:17
@Prophet To be more canonical you still can replace `//` with `/` as the `` is the only descendant of `` – undetected Selenium Mar 10 '22 at 08:31
I know, sure. But `//` is more flexible – Prophet Mar 10 '22 at 08:32
No, it isn't. It isn't about being flexible but 2 different approaches for two distinct conditions. – undetected Selenium Mar 10 '22 at 08:38

score 1 · Answer 2 · answered Mar 10 '22 at 08:06

The desired element is a Angular element, so to click() on the clickable element you need to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following locator strategies:

Using CSS_SELECTOR:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "a.btn.btn-soft-primary.day-selector-navbutton > i.fa.fa-chevron-right"))).click()

Using XPATH:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//a[@class='btn btn-soft-primary day-selector-navbutton']/i[@class='fa fa-chevron-right']"))).click()

Note: You have to add the following imports :

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

Find correct xpath with selenium Python

2 Answers2