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

Question

There is a rect object in the dom:

<         


        

Answer 1

The 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:

---

Attributes

The attributes of 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 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 elements:

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

• For elements:

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

• For 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