What is the correct xpath for the svg in the HTML featured in this example?

Question

so far I have the following code:

like_button =  driver.find_element_by_xpath('//div[@class="QBdPU "]/*[name()="svg"][@aria-label="Like"]')
like_button().click()

To correspond with the following HTML (I'm trying to click the svg section):

Was wondering if anyone could correct my xpath.

`svg` node is not a *child* of `div`, but a *descendant*, so either replace `.../*[name()="svg"]` with `...//*[name()="svg"]` or add `.../span/...` between them as in [Jack Fleeting answer](https://stackoverflow.com/questions/64436417/what-is-the-correct-xpath-for-the-svg-in-the-html-featured-in-this-example/64436456#64436456) — JaSON, Oct 20 '20 at 06:50

score 1 · Answer 1 · edited Oct 20 '20 at 09:18

1

Try changing your xpath expression to

//div[@class="QBdPU "]/span/*[name()="svg" and @aria-label="Like"]

and see if it works.

edited Oct 20 '20 at 09:18

JaSON

4,843
2
8
15

answered Oct 19 '20 at 23:37

Jack Fleeting

24,385
6
23
45

2

Careful, `svg` elements are in an implied namespace in browser DOMs. – kjhughes Oct 19 '20 at 23:48

score 0 · Answer 2 · answered Oct 20 '20 at 07:19

As kjhughes mentioned in the comment, svg elements are in different namespaces of HTML, so we need to be careful when picking it via xpath.

I see that you're trying to get Like button on Instagram, I've tested this on Chrome, I think it will work on Selenium as well. Try:

//*[name()="svg" and @aria-label="Like" and @height="24"]

Remove and @height="24" if you also want to get Like button on comments. Like button on comment has and @height="12" attribute.

score 0 · Answer 3 · answered Oct 20 '20 at 20:40

To identify and click() on the Like button on Instagram you can use either of the following Locator Strategies:

Using XPATH:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "//button[@type='button']//span//*[name()="svg" and @aria-label='Like']"))).click()

Using CSS_SELECTOR:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "button[type='button'] span > svg[aria-label="Like"]"))).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

What is the correct xpath for the svg in the HTML featured in this example?

3 Answers3