ISTQB Certified Software Test Engineer

Tuesday, February 19, 2013

Handling Scalable Vector Graphics(svg) elements in Selenium

Scalable Vector Graphics is an XML based vector image format for two-dimensional graphics that has support for interactivity and animation Selenium as functional testing tool,needs to identify SVG graphic elements as well when we test web applications whose UI is implemented using SVG.The Tags for these svg elements in DOM are not HTML tags.

All the SVG elements may have same attribute values or the values that may change dynamically.It is not possible to identify the elements based on Tag in xpath expression(since these tags may not be identified by dom as they are not html tags.) Small SVG example Hello, World!

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='300px' height='300px'>
<title>Small SVG example</title>
<circle cx='120' cy='150' r='60' style='fill: gold;'> <animate attributeName='r' from='2' to='80' begin='0' dur='3' repeatCount='indefinite' /></circle>
<polyline points='120 30, 25 150, 290 150' stroke-width='4' stroke='brown' style='fill: none;' />
<polygon points='210 100, 210 200, 270 150' style='fill: lawngreen;' />
<text x='60' y='250' fill='blue'>Hello, World!</text>
</svg>
The above is the SVG used to Create a Circle,polygon and Polyline as shown in the graphics above.In order to identify a circle the Xpath expression should be framed as

//*[@cx ='120']

if we specify
//circle[@cx='120']
the circle tag could not be identified by Selenium. So when identifying the SVG graphics using generic Xpath expression is preferable(using * instead of identiying using tag name) Please email me if you have any issues with handling SVG graphics using selenium.

9 comments:

  1. The first syntax (i.e. //*[@cx ='120']) doesn't highlights the element in the displayed chart. I am using Selenium IDE 1.10.0.

    I am stuck in identifying SVG elements in my application. Even css selectors are not working. Could you please help me with that.

    Thank you Kumar.

    ReplyDelete
    Replies
    1. Have you tried with an xpath expression like:

      //*[local-name()="svg" and namespace-uri()="http://www.w3.org/2000/svg"]//*[local-name()="circle"]

      Delete
  2. I could get the element as you described above. But when I tried to click on the element. The click does not work on IE. Other browsers are working fine with it.
    Do you have any solutions for that issue?
    Regards
    Manish

    ReplyDelete
    Replies
    1. Manish,
      I am trying to click on SVG image through xpath and Mouse events but the click does not working on chrome, Firefox browser and IE. Please help me, Do you have any solution?

      Please provide your contact details, i will reach you.

      Thanks your help.

      Delete
  3. I am using leaflet for drawing a polygon on a map. I have the svg for the leaflet that needs to be drawn. I am thinking of automating the process using Robotframework or Selenium Webdriver. Can you suggest some help?

    ReplyDelete
  4. Hi, I am trying to click on SVG image through xpath and Mouse events but the click does not working on chrome, Firefox browser. Please help me, Do you have any solution?

    Regards,
    Gopi

    ReplyDelete
  5. Hi Team,

    I am trying to hover over the SVG element such that the corresponding hover card is displayed. I tried with xpath and css selectors.I need your help

    ReplyDelete
  6. I have the screenshots for the source code. How can I show you

    ReplyDelete
  7. Hi , How to acces the svg element if its available in .svg file.
    Sample HTML code
    id="svgpanel" style="height:89%;width:100%; border-style: ridge; background-color: #dbe9ee;position: absolute;">

    ReplyDelete