18 January 2026:


This forum is now archived and is in read-only mode. Please continue discussions on our improved new Sahi Pro Community forum.



Sahi Pro is an enterprise grade test automation platform which can automate web, mobile, API, windows and java based applications and SAP.

SVG Click events are not recorded in Sahi.

YamineeYaminee Members
edited November -1 in Sahi - Open Source
Hi,
I am evaluating Sahi/Selenium for my automation purpose. I could see that one issue is persisting in both. Can you guide me if we have any alternative in Sahi to resolve this.

Problem:--> A SVG image is embedded in a Html web page
=========================================

I have an html page segment like this:
<div id="imageholder>
<object data="1.svg" width="100%" height="100%" type="image/svg+xml">
</object>
</div>.

When i see the inspect element in Firefox/firebug i can't see the SVG file structure, but in Chrome i am able to see the svg file structure like below:
<div id="imageholder>
<object data="1.svg" width="100%" height="100%" type="image/svg+xml">
<svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; stroke-dasharray="none"
shape-rendering="auto" font-family="'Dialog'" width="4800">
<desc>widthmm=90.48768097536195 heightmm=49.38127063754128</desc>
<g>
<g>....</g>
</g>
</svg>
</object>
</div>
This may be because of interpreter difference in both browser.


The issue is: if the Html page is containing SVG image in in then click events on image can not recorded either via Selenium IDE or via Sahi record and play.
Selenium issue--> http://code.google.com/p/selenium/issues/detail?id=2999

Thanks
Yaminee

Comments

  • narayannarayan Administrators
    This should be possible with Sahi.

    Try something like:

    _click(document.getElementsByTagName('object')[0])

    Experinment by changing the index from 0 to something else.

    Regards,
    Narayan
  • YamineeYaminee Members
    Thanks, but it will not work because the structure of object tag is completely different. It doesn't have any array/child. Rather there will be contentDocument which will have the embedded dom model. So we need to include that in plug and play i believe.
    Sample.html
    ==========
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9;chrome=IE8">
    <script type="text/javascript">
    function onLoad(){
    document.getElementById("imageholder");
    };
    </script>
    <body onload=onLoad()>
    <div id="imageholder"><object data="1.svg" width="100%" height="100%" type="image/svg+xml"></object></div>
    </body></html>

    1.svg
    ====
    <?xml version="1.0"?>
    <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN'
    'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
    <svg stroke-dasharray="none" shape-rendering="auto" xmlns="http://www.w3.org/2000/svg"; font-family="'Dialog'"
    width="4800" text-rendering="auto" fill-opacity="1" contentScriptType="text/ecmascript" color-interpolation="auto"
    color-rendering="auto" preserveAspectRatio="xMidYMid meet" font-size="12" viewBox="0 0 4800 2619" fill="black"
    xmlns:xlink="http://www.w3.org/1999/xlink"; stroke="black" image-rendering="auto" stroke-miterlimit="10"
    zoomAndPan="magnify" version="1.0" stroke-linecap="square" stroke-linejoin="miter" contentStyleType="text/css"
    font-style="normal" height="2619" stroke-width="1" stroke-dashoffset="0" font-weight="normal" stroke-opacity="1"
    >
    <g style="fill-opacity:0.7; stroke:black; stroke-width:0.1cm;">
    <circle cx="6cm" cy="2cm" r="100" style="fill:red;"
    transform="translate(0,50)"/>
    <circle cx="6cm" cy="2cm" r="100" style="fill:blue;"
    transform="translate(70,150)"/>
    <circle cx="6cm" cy="2cm" r="100" style="fill:green;"
    transform="translate(-70,150)"/>
    </g>

    </svg
    >

    I hope this should be helpful.
    Thanks, i will wait for your opinion.
  • narayannarayan Administrators
    Hi Yaminee,

    Could you tell me where the onclick event is attached? Is it on the div, the object tag or inside the svg itself (I do not know if that is possible)

    On Chrome and Firefox, I am able to access the different circles in your svg via

    document.getElementsByTagName("OBJECT")[0].contentDocument.getElementsByTagName("circle")[0]

    Regards,
    Narayan
  • YamineeYaminee Members
    Thanks Narayan,
    I tried with what you said, as my understanding goes still the record and play doesn't capture SVG events. But for the work around we can edit the .sah and can get the desired element and do the operations we want.
    I tried dummy here..But still somewhere the click event still has some issue,can you help if i am doing wrong. Updating the dummy test again. 1.svg is same.

    Sample.html(changed for correct event handling)
    =========
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9;chrome=IE8">
    <script type="text/javascript">
    function onLoad(){
    document.getElementById("imageholder");
    for (i in document.getElementsByTagName("OBJECT")[0].contentDocument.getElementsByTagName("circle"))
    {
    if(i<3){
    document.getElementsByTagName("OBJECT")[0].contentDocument.getElementsByTagName("circle").addEventListener('click',function (evt) {
    alert(evt.target.attributes[3].value);
    },false);
    //
    }
    }
    };
    </script>
    <body>
    <div id="imageholder"><object data="1.svg" width="100%" height="100%" onload="onLoad()" type="image/svg+xml"></object></div>
    </body></html>


    Now try to record click event on SVG, it will not work. However, try to play this
    circle.sah
    =======
    _alert(document.getElementsByTagName("OBJECT")[0].contentDocument.documentElement.getElementsByTagName("circle")[0].attributes[3].value);
    _click(document.getElementsByTagName("OBJECT")[0].contentDocument.documentElement.getElementsByTagName("circle")[0]);

    The click will not work.

    Thanks for your quick and prompt support. I will wait for your update again.
    yaminee
Sign In or Register to comment.