How to click on SVG element in highcharts to download file using Selenium

Question

My first question was related to this. In the meantime I have found a less efficient workaround. I'd still like automatically download these files.

I would like my script to click on the download icon, click on the Download XLS icon that follows of the page below. The green arrow is where I'd like to click.

The id of the highchart changes every time the page loads. I've tried to fix it it with code sample:

def unityengine_data():
    driver.get("https://steamdb.info/tech/Engine/Unity/")
    wait
    WebDriverWait(driver,30).until(EC.visibility_of_element_located((By.XPATH, "div[contains(@id,'highcharts-')]//*[local-name() = 'svg']/*[name()='g'][6]/*[name()='g']/*[name()='image']"))).click
    WebDriverWait(driver, 30).until(EC.visibility_of_element_located((By.XPATH, "div[contains(@id,'highcharts-')]//**[local-name() = 'div']/*[name()='ul'][6]/*[name()='li'][2]"))).click
    os.rename("downloaded file path", "new file path")
    return "Unity Engine apps data successfully downloaded"

Website image

Website after first click

I hope you can help.

score 1 · Answer 1 · answered Apr 17 '22 at 16:42

You are simply missing // here at this line

WebDriverWait(driver,30).until(EC.visibility_of_element_located((By.XPATH, "div[contains(@id,'highcharts-')]//*[local-name() = 'svg']/*[name()='g'][6]/*[name()='g']/*[name()='image']"))).click

also, you should ideally create object of WebDriverWait once and reuse it whenever you want.

See the below code, I have improved one locator as well.

Code:

driver.maximize_window()

wait = WebDriverWait(driver, 30)

driver.get("https://steamdb.info/tech/Engine/Unity/")
wait.until(EC.visibility_of_element_located((By.XPATH, "//div[contains(@id,'highcharts-')]//*[local-name() = 'svg']/*[name()='g'][6]/*[name()='g']/*[name()='image']"))).click()
wait.until(EC.visibility_of_element_located((By.XPATH, "//li[text()='Download XLS']"))).click()

Imports:

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

score 1 · Answer 2 · answered Apr 17 '22 at 23:22

You were almost there. You just need three minor adjustments and one optimization as follows:

You need to add the leading // for an effective xpath.
click is a method so you need to click()
The xpath for the highchart image can be optimized a bit.
The element with text Download XLS is within local-name space, hence you don't need [local-name() = 'div']

Your effective code block will be:

driver.get("https://steamdb.info/tech/Engine/Unity/")
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[contains(@id,'highcharts-')]//*[local-name() = 'svg']//*[name()='g']//*[name()='image']"))).click()
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//ul[@class='highcharts-menu']//li[text()='Download XLS']"))).click()

Browser Snapshot;

highcharts

References

You can find a couple of relevant detailed discussions in:

How to click on SVG elements using XPath and Selenium WebDriver through Java

How to click on SVG element in highcharts to download file using Selenium

2 Answers2

References