How to access to 'rect' type element through Selenium-Python

Question

There is a rect object in the dom:

<rect class="slv-blank" id="id123" height="8.8" stroke-width="1px" width="18.8" x="59.2" y="37.5"></rect>

I am trying to search it with following code:

WebDriverWait(driver, 1).until(ec.presence_of_element_located(("xpath", '//rect[@id="id123"]'))).click()

This does not work.

But the following does:

WebDriverWait(driver, 1).until(ec.presence_of_element_located(("xpath", '//*[name()="rect"][@id="id123"]'))).click()

Any clues on why the first one does not work?

What do you mean by does not work? what happens when you try it? — Guy
– Guy, Commented Apr 3, 2019 at 8:32

undetected Selenium · Accepted Answer · 2019-04-03 09:28:39Z

4

`<rect>`

The <rect> element is a basic SVG shape that creates rectangles, defined by their corner's position, their width, and their height. The rectangles may have their corners rounded.

An Example:

<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple rect element -->
  <rect x="0" y="0" width="100" height="100" />

  <!-- Rounded corner rect element -->
  <rect x="120" y="0" width="100" height="100" rx="15" ry="15" />
</svg>

Attributes

The attributes of <rect> elements are as follows:

x: This attribute determines the x coordinate of the rect.
- Value type: | ; Default value: 0; Animatable: yes
y: This attribute determines the y coordinate of the rect.
- Value type: | ; Default value: 0; Animatable: yes
width: This attribute determines the width of the rect.
- Value type: auto|| ; Default value: auto; Animatable: yes
height: This attribute determines the height of the rect.
- Value type: auto|| ; Default value: auto; Animatable: yes
rx: This attribute determines the horizontal corner radius of the rect.
- Value type: auto|| ; Default value: auto; Animatable: yes
ry: This attribute determines the vertical corner radius of the rect.
- Value type: auto|| ; Default value: auto; Animatable: yes
pathLength: This attribute lets specify the total length for the path, in user units.
- Value type: ; Default value: none; Animatable: yes

Note: Starting with SVG2 x, y, width, height, rx and ry are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.

This usecase

As the <rect> element is a SVG element so to locate such elements you have to explicitly specify the SVG namespace when accessing the elements using xpath as follows:

For <svg> elements:
```
//*[name()="svg"]
```
For <g> elements:
```
//*[name()="svg"]/*[name()="g"]
```

For <rect> elements:

//*[name()="svg"]/*[name()="g"]/*[name()="rect"]
//*[name()="svg"]/*[name()="rect"]

References

You can find a couple of relevant detailed discussions in

answered Apr 3, 2019 at 9:28

undetected Selenium

194k44 gold badges304 silver badges387 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ulysses Over a year ago

Thanks - this is very well explained

Alejandro Over a year ago

You are deducing that there is a namespace involve and advising to "explicitly specify the SVG namespace", but then your XPath expressions don't do that. Niether //*[name()="svg"]/*[name()="g"]/*[name()="rect"] nor //*[name()="svg"]/*[name()="rect"]

KunduK · Accepted Answer · 2019-04-03 09:11:41Z

Use Action class or JavaScript Executor.

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as ec
from selenium.webdriver.common.action_chains import ActionChains
elememnt=WebDriverWait(driver, 1).until(ec.presence_of_element_located(("xpath", '//*[@id="id123"]')))
ActionChains(driver).move_to_element(elememnt).click().perform()

OR

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as ec
from selenium.webdriver.common.action_chains import ActionChains
elememnt=WebDriverWait(driver, 1).until(ec.presence_of_element_located(("xpath", '//*[@id="id123"]')))
driver.execute_script("arguments[0].click();",elememnt)

Collectives™ on Stack Overflow

How to access to 'rect' type element through Selenium-Python

2 Answers 2

`<rect>`

Attributes

This usecase

References

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

<rect>

Attributes

This usecase

References

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

`<rect>`