How to access to 'rect' type element through Selenium-Python
<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
- How to click on SVG elements using XPath and Selenium WebDriver through Java
- Unable to locate SVG elements through xpath on Kendo UI chart
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)