How to iterate through svg elements for python

Question

I have been trying to iterate across all svg elements on page with defined characterictics to click on them and parse then, but found it out only how to open the first element Do you know how to open all of them? Any feedback is appreciated :)

<tr class="MuiTableRow-root">
  <td class="MuiTableCell-root jss346 MuiTableCell-alignLeft MuiTableCell-sizeSmall MuiTableCell-body">АМАРИЛ М ТАБЛ. П/ПЛЕН/ОБ. 2МГ+500МГ №30</td>
  <td class="MuiTableCell-root jss346 MuiTableCell-alignRight MuiTableCell-sizeSmall MuiTableCell-body">1</td>
  <td class="MuiTableCell-root jss346 MuiTableCell-alignLeft MuiTableCell-sizeSmall MuiTableCell-body"><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss348 MuiTypography-colorPrimary"><svg class="MuiSvgIcon-root jss350" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation"><path d="M18 17H6v-2h12v2zm0-4H6v-2h12v2zm0-4H6V7h12v2zM3 22l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20z"></path></svg></a></td>
</tr>
<tr class="MuiTableRow-root">
  <td class="MuiTableCell-root jss346 MuiTableCell-alignLeft MuiTableCell-sizeSmall MuiTableCell-body">АМАРИЛ М ТАБЛ. П/ПЛЕН/ОБ. 2МГ+500МГ №30</td>
  <td class="MuiTableCell-root jss346 MuiTableCell-alignRight MuiTableCell-sizeSmall MuiTableCell-body">1</td>
  <td class="MuiTableCell-root jss346 MuiTableCell-alignLeft MuiTableCell-sizeSmall MuiTableCell-body"><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss348 MuiTypography-colorPrimary"><svg class="MuiSvgIcon-root jss350" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation"><path d="M18 17H6v-2h12v2zm0-4H6v-2h12v2zm0-4H6V7h12v2zM3 22l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20z"></path></svg></a></td>
</tr>

and so on...

My code:

chrome_options = webdriver.ChromeOptions()
chrome_options.add_argument("start-maximized")
driver = webdriver.Chrome(options=chrome_options)
driver.get(url)
XPATH = "//*[name()='svg' and contains(@class, 'jss350')]"
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//*[name()='svg' and contains(@class, 'jss350')]"))).click()
driver.quit()

CEH · Accepted Answer · 2019-10-13T20:46:30.813

Seems like you are using XPath incorrectly here -- querying on @name='svg' will get you elements with the name attribute svg, not WebElements of type svg.

If you want to wait on all svg elements to exist, you can do this:

WebDriverWait(driver, 20).until(EC.presence_of_all_elements_located((By.XPATH, "//svg[contains(@class, 'jss350')]")))

However, you also want to iterate through the elements in a list. You will need to find all elements first, then iterate them. You can try the following code:

# Wait for all svg elements to be clickable
WebDriverWait(driver, 20).until(EC.presence_of_all_elements_located((By.XPATH, "//svg[contains(@class, 'jss350')]")))

# find list of svg elements
svg_elements = driver.find_elements_by_xpath("//svg[contains(@class, 'jss350')]")

# iterate the list and click each one
for element in svg_elements:
    element.click()

This will wait on all svg elements to exist, grab the list of elements from the page, iterate each element, and click it.

Thanks for your advise. I tried to execute your code, but in result svg_elements is empty list and WebDriverWait has crashed by TimeoutException and no message — G_V, Oct 14 '19 at 19:03
I used my XPATH string and your code with element iteration and its works perfect. Then I met a new challenge - how to click on new internal (the same page) windows. For your understanding I click on element, open the window, grab the list of elements and afterwards want to close this window. Do you know how to handle it? — G_V, Oct 14 '19 at 19:32

How to iterate through svg elements for python

1 Answers1