Xpath in SVG element - selenium

I Have problem with localizing element in SVG object. I need to get text from element which is highlighted on picture below. I tried to use full xpath:
//*[local-name()='g']//*[local-name()='g' and #id='g-node-54591']//*[local-name()='g'][3]//*[local-name()='text']
Selenium is returning no such element exception.
Here is my Selenium code:
#FindBy (xpath = "//*[local-name()='g']//*[local-name()='g' and #id='g-node-54591']//*[local-name()='g'][3]//*[local-name()='text']")
WebElement endAOnDiagram;
public void verifyViewingEndAOnDiagram (String endA){
String txt = endAOnDiagram.getText();
System.out.println(txt);
Assert.assertTrue(txt.contains(endA));
}
I've read couple posts about making xpath for SVG elements but every suggested solution didn't work for me. If someone have any ideas, please let me know.
HTML CODE
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" preserveAspectRatio="xMidYMid meet"
version="1.0" xmlns:ev="http://www.w3.org/2001/xml-events" style="overflow: hidden; ">
<g id="viewport-20201012130550949" class="svg-pan-zoom_viewport" transform="matrix(0.8648062527318625,0,0,0.8648062527318625,-353.70811161620713,364.16635435112175)" style="transform: matrix(0.864806, 0, 0, 0.864806, -353.708, 364.166);">
<style>
text {
font-size: 12px
}
</style>
<g id="g-node-54591">
<rect x="500" y="50" fill="transparent" width="452" stroke-dasharray="5,5" height="206" stroke="black" />
<g />
<g />
<g>
<text x="500" id="pop-label-10" y="40" cursor="pointer" fill="black">10110, OS1080</text><svg x="736" width="20" y="0" height="40">
<polyline fill="transparent" x="0" y="20" points="0,20 10,0 20,20" stroke="black" />
<rect fill="transparent" x="0" width="20" y="20" height="20" stroke="black" /></svg></g>
</g>
<g id="g-node-61">
<rect x="1254" y="50" fill="transparent" width="452" stroke-dasharray="5,5" height="206" stroke="black" />
<g />
<g />
<g>
<text x="1254" id="pop-label-29544" y="40" cursor="pointer" fill="black">45187, WARE2</text><svg x="1490" width="20" y="0" height="40">
<polyline fill="transparent" x="0" y="20" points="0,20 10,0 20,20" stroke="black" />
<rect fill="transparent" x="0" width="20" y="20" height="20" stroke="black" /></svg></g>
</g>
<polyline fill="none" id="fs-id-4161198" points="922,80 1284,80" stroke-linecap="round" stroke="#36454F" stroke-width="1" />
<g>
<rect x="1184" y="60" fill="transparent" width="50" rx="20" ry="20" height="40" stroke="black" /><text x="1209" id="cable-label-83" y="50" style="text-anchor: middle;" cursor="pointer" fill="black">Abp-Alc1</text>
<g><text style="text-anchor: end;" x="1174" y="75">1/1</text></g>
<g>
<ellipse rx="20" fill="transparent" ry="10" cx="1209" cy="80" stroke="#FF0000" />
</g>
</g>
<g>
<rect x="972" y="60" fill="transparent" width="50" rx="20" ry="20" height="40" stroke="black" /><text x="997" id="cable-label-83" y="50" style="text-anchor: middle;" cursor="pointer" fill="black">Abp-Alc1</text>
<g><text style="text-anchor: start;" x="1032" y="75">1/1</text></g>
<g>
<ellipse rx="20" fill="transparent" ry="10" cx="997" cy="80" stroke="#FF0000" />
</g>
</g>
</g>
<defs>
<style id="svg-pan-zoom-controls-styles" type="text/css">
.svg-pan-zoom-control {
cursor: pointer;
fill: black;
fill-opacity: 0.333;
}
.svg-pan-zoom-control:hover {
fill-opacity: 0.8;
}
.svg-pan-zoom-control-background {
fill: white;
fill-opacity: 0.5;
}
.svg-pan-zoom-control-background {
fill-opacity: 0.8;
}
</style>
</defs>
<g id="svg-pan-zoom-controls" transform="translate(1146 876) scale(0.75)" class="svg-pan-zoom-control">
<g id="svg-pan-zoom-zoom-in" transform="translate(30.5 5) scale(0.015)" class="svg-pan-zoom-control">
<rect x="0" y="0" width="1500" height="1400" class="svg-pan-zoom-control-background" />
<path
d="M1280 576v128q0 26 -19 45t-45 19h-320v320q0 26 -19 45t-45 19h-128q-26 0 -45 -19t-19 -45v-320h-320q-26 0 -45 -19t-19 -45v-128q0 -26 19 -45t45 -19h320v-320q0 -26 19 -45t45 -19h128q26 0 45 19t19 45v320h320q26 0 45 19t19 45zM1536 1120v-960 q0 -119 -84.5 -203.5t-203.5 -84.5h-960q-119 0 -203.5 84.5t-84.5 203.5v960q0 119 84.5 203.5t203.5 84.5h960q119 0 203.5 -84.5t84.5 -203.5z"
class="svg-pan-zoom-control-element" />
</g>
<g id="svg-pan-zoom-reset-pan-zoom" transform="translate(5 35) scale(0.4)" class="svg-pan-zoom-control">
<rect x="2" y="2" width="182" height="58" class="svg-pan-zoom-control-background" />
<path d="M33.051,20.632c-0.742-0.406-1.854-0.609-3.338-0.609h-7.969v9.281h7.769c1.543,0,2.701-0.188,3.473-0.562c1.365-0.656,2.048-1.953,2.048-3.891C35.032,22.757,34.372,21.351,33.051,20.632z" class="svg-pan-zoom-control-element" />
<path
d="M170.231,0.5H15.847C7.102,0.5,0.5,5.708,0.5,11.84v38.861C0.5,56.833,7.102,61.5,15.847,61.5h154.384c8.745,0,15.269-4.667,15.269-10.798V11.84C185.5,5.708,178.976,0.5,170.231,0.5z M42.837,48.569h-7.969c-0.219-0.766-0.375-1.383-0.469-1.852c-0.188-0.969-0.289-1.961-0.305-2.977l-0.047-3.211c-0.03-2.203-0.41-3.672-1.142-4.406c-0.732-0.734-2.103-1.102-4.113-1.102h-7.05v13.547h-7.055V14.022h16.524c2.361,0.047,4.178,0.344,5.45,0.891c1.272,0.547,2.351,1.352,3.234,2.414c0.731,0.875,1.31,1.844,1.737,2.906s0.64,2.273,0.64,3.633c0,1.641-0.414,3.254-1.242,4.84s-2.195,2.707-4.102,3.363c1.594,0.641,2.723,1.551,3.387,2.73s0.996,2.98,0.996,5.402v2.32c0,1.578,0.063,2.648,0.19,3.211c0.19,0.891,0.635,1.547,1.333,1.969V48.569z M75.579,48.569h-26.18V14.022h25.336v6.117H56.454v7.336h16.781v6H56.454v8.883h19.125V48.569z M104.497,46.331c-2.44,2.086-5.887,3.129-10.34,3.129c-4.548,0-8.125-1.027-10.731-3.082s-3.909-4.879-3.909-8.473h6.891c0.224,1.578,0.662,2.758,1.316,3.539c1.196,1.422,3.246,2.133,6.15,2.133c1.739,0,3.151-0.188,4.236-0.562c2.058-0.719,3.087-2.055,3.087-4.008c0-1.141-0.504-2.023-1.512-2.648c-1.008-0.609-2.607-1.148-4.796-1.617l-3.74-0.82c-3.676-0.812-6.201-1.695-7.576-2.648c-2.328-1.594-3.492-4.086-3.492-7.477c0-3.094,1.139-5.664,3.417-7.711s5.623-3.07,10.036-3.07c3.685,0,6.829,0.965,9.431,2.895c2.602,1.93,3.966,4.73,4.093,8.402h-6.938c-0.128-2.078-1.057-3.555-2.787-4.43c-1.154-0.578-2.587-0.867-4.301-0.867c-1.907,0-3.428,0.375-4.565,1.125c-1.138,0.75-1.706,1.797-1.706,3.141c0,1.234,0.561,2.156,1.682,2.766c0.721,0.406,2.25,0.883,4.589,1.43l6.063,1.43c2.657,0.625,4.648,1.461,5.975,2.508c2.059,1.625,3.089,3.977,3.089,7.055C108.157,41.624,106.937,44.245,104.497,46.331z M139.61,48.569h-26.18V14.022h25.336v6.117h-18.281v7.336h16.781v6h-16.781v8.883h19.125V48.569z M170.337,20.14h-10.336v28.43h-7.266V20.14h-10.383v-6.117h27.984V20.14z"
class="svg-pan-zoom-control-element" />
</g>
<g id="svg-pan-zoom-zoom-out" transform="translate(30.5 70) scale(0.015)" class="svg-pan-zoom-control">
<rect x="0" y="0" width="1500" height="1400" class="svg-pan-zoom-control-background" />
<path
d="M1280 576v128q0 26 -19 45t-45 19h-896q-26 0 -45 -19t-19 -45v-128q0 -26 19 -45t45 -19h896q26 0 45 19t19 45zM1536 1120v-960q0 -119 -84.5 -203.5t-203.5 -84.5h-960q-119 0 -203.5 84.5t-84.5 203.5v960q0 119 84.5 203.5t203.5 84.5h960q119 0 203.5 -84.5 t84.5 -203.5z"
class="svg-pan-zoom-control-element" />
</g>
</g>
</svg>
Thanks!

Related

How to replace svg with png?

I have a Blazor app, it uses Applayout.razor component as a logo.
How can I use my own wwwroot/images/mylogo.png instead of the svg image?
Applayout.razor:
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 2">
<g id="flex">
<path id="Combined Shape" fill-rule="evenodd" clip-rule="evenodd"
...
</g>
</g>
</svg>
Any particular reason not to use IMG tag? Something like this <img src="/images/mylogo.png" />

How to center element inside SVG polygon

I have SVG that is assembled from multiple polygons.
I am trying to put image/button inside polygon center but what ever I try it always put image in x=0 and y=0 of the screen.
<Svg width="546px" height="794px" viewBox="0 0 546 794" version="1.1" >
<G id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<G id="item0" transform="translate(1.000000, 1.000000)" fill="#EDAF51" fill-rule="nonzero" stroke="#720D00">
<Polygon id="RX-03" points="206.65269...">
</Polygon>
<Circle x="0" y="0" cx="40" cy="40" r="15" fill="black" />
</G>
With this I get:
But if I put <Circle x="110" y="0" I get
And this is correct but I don't want to use x=110 I am trying to make this circle to be relative to it's parent polygon.
So I can set circle to x=0 y=0 and to keep it inside area of parent polygon.
New answer on the comment of the author of the question
In svg, with mutual positioning between elements, there is only absolute positioning.
Relative positioning in svg, as you want - there is no circle relative to the parent polygon.
Only absolute positioning of a circle will help to place it in the right place
You can create a circle once and clone it several times while positioning:
<use xlink:href="#crc1" x="100" y="150" />
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="546px" height="794px" viewBox="0 0 546 794" >
<defs>
<circle id="crc1" cx="0" cy="0" r="15" stroke="red" />
</defs>
<image transform="translate(0, -300)" xlink:href="https://i.stack.imgur.com/q0PXl.png"
width="100%" height="100%"
/>
<use xlink:href="#crc1" x="100" y="150" />
<use xlink:href="#crc1" x="210" y="110" />
<use xlink:href="#crc1" x="300" y="190" />
<use xlink:href="#crc1" x="385" y="190" />
<use xlink:href="#crc1" x="500" y="190" />
</svg>
</div>
An image can be inserted into any SVG shape in several ways:
Using clipPath
Using mask
Using pattern
With any method of inserting an image, you need to focus on the shape of the template.
If the template has a symmetrical shape, it is necessary to select the original image with the same aspect ratio.
In other words, if the cropping pattern is a circle or regular polygons, then you need to select images with the same width and height.
I translated the React syntax into the regular SVG syntax. If necessary, you can go back
Selected round image badge
Insert this image into the hexagon`
1. Using clipPath
The hexagon acts as a cropping pattern.
<style>
.container {
width:50%;
height:50%;
}
</style>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 546 794" >
<defs>
<clipPath id="clip">
<path fill="none" stroke="none" stroke-width="2" d="m275.9 190.9 175.6 101.4 0 202.7-175.6 101.4-175.6-101.4 0-202.7z" />
</clipPath>
</defs>
<image xlink:href="https://i.stack.imgur.com/gOrJU.png"
x="0"y="0"
width="100%" height="100%"
clip-path="url(#clip)" />
</svg>
</div>
2. Using mask
.container {
width:50%;
height:50%;
}
image {
mask:url(#msk1);
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 546 794" >
<defs>
<mask id="msk1">
<path fill="white" stroke="red" stroke-width="12" d="m275.9 190.9 175.6 101.4 0 202.7-175.6 101.4-175.6-101.4 0-202.7z" />
</mask>
</defs>
<image xlink:href="https://i.stack.imgur.com/gOrJU.png" x="0" y="0" width="100%" height="100%" />
</svg>
</div>
3. Using pattern
.container {
width:50%;
height:50%;
}
path {
fill:url(#ptn1);
stroke:#DBC176;
stroke-width:8;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 546 794" >
<defs>
<pattern id="ptn1" width="1" height="1">
<image xlink:href="https://i.stack.imgur.com/gOrJU.png" x="-24" y="3" width="400px" height="400px" />
</pattern>
</defs>
<path d="m275.9 190.9 175.6 101.4 0 202.7-175.6 101.4-175.6-101.4 0-202.7z" />
</svg>
</div>

How to use an external image as pattern in svg-edit?

I'm a new to svg-edit, and I have a problem with using external link as pattern image.
Svg-edit delete the part
xlink:href="http://www.micromark.com/RS/SR/Product/85373_T.jpg"
when I apply modifications in the source :
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:undefined="http:/www.w3.org/1999/xlink">
<defs>
<pattern x="0" y="0" width="100" patternUnits="userSpaceOnUse" id="testGilles" height="100" xmlns:xlink="http:/www.w3.org/1999/xlink">
<image id="svg_3" width="100" height="100" xlink:href="http://www.micromark.com/RS/SR/Product/85373_T.jpg"/>
</pattern>
</defs>
<g>
<title>Layer 1</title>
<rect id="svg_1" height="225" width="238" y="87" x="82" stroke-width="5" stroke="#000000" fill="url(#testGilles)"/>
</g>
</svg>
Does anyone knows why ?
I hope this is clear, it's not easy for me to explain it in English :)

What is the best strategy for testing D3/HighCharts/SVG?

Our server generates the data and then the client generates charts using HighCharts which is SVG. We are struggling to write an automated test in order to verify that the generated chart is correct.
This is what the SVG HighCharts generates
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="347" height="450"><desc>Created with Highcharts 3.0.2</desc><defs><clipPath id="highcharts-1"><rect fill="none" x="0" y="0" width="272" height="275"></rect></clipPath></defs><rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" width="347" height="450"></rect><g class="highcharts-button" style="cursor:default;" title="Chart context menu" stroke-linecap="round" transform="translate(313,10)"><title>Chart context menu</title><rect rx="2" ry="2" fill="white" x="0.5" y="0.5" width="24" height="22" stroke="none" stroke-width="1"></rect><path fill="#E0E0E0" d="M 6 6.5 L 20 6.5 M 6 11.5 L 20 11.5 M 6 16.5 L 20 16.5" stroke="#666" stroke-width="3" zIndex="1"></path><text x="0" y="13" style="font-family:"HelveticaNeue-Roman", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;font-size:12px;color:black;fill:black;" zIndex="1"></text></g><g class="highcharts-grid" zIndex="1"></g><g class="highcharts-grid" zIndex="1"><path fill="none" d="M 65 211.5 L 337 211.5" stroke="#C0C0C0" stroke-width="1" zIndex="1" opacity="1"></path><path fill="none" d="M 65 106.5 L 337 106.5" stroke="#C0C0C0" stroke-width="1" zIndex="1" opacity="1"></path><path fill="none" d="M 65 315.5 L 337 315.5" stroke="#C0C0C0" stroke-width="1" zIndex="1" opacity="1"></path></g><g class="highcharts-axis" zIndex="2"><path fill="none" d="M 142.5 316 L
142.5 321" stroke="#C0D0E0" stroke-width="1" opacity="1"></path><path fill="none" d="M 181.5 316 L 181.5 321" stroke="#C0D0E0" stroke-width="1" opacity="1"></path><path fill="none" d="M 219.5 316 L
219.5 321" stroke="#C0D0E0" stroke-width="1" opacity="1"></path><path fill="none" d="M 258.5 316 L 258.5 321" stroke="#C0D0E0" stroke-width="1" opacity="1"></path><path fill="none" d="M 297.5 316 L
297.5 321" stroke="#C0D0E0" stroke-width="1" opacity="1"></path><path fill="none" d="M 336.5 316 L 336.5 321" stroke="#C0D0E0" stroke-width="1" opacity="1"></path><path fill="none" d="M 103.5 316 L
103.5 321" stroke="#C0D0E0" stroke-width="1" opacity="1"></path><path fill="none" d="M 65.5 316 L 65.5 321" stroke="#C0D0E0" stroke-width="1"></path><text x="201" y="373" style="font-family:Tahoma, Arial, sans-serif;font-size:9pt;color:#505050;font-weight:bold;fill:#505050;" zIndex="7" text-anchor="middle" transform="translate(0,0)" visibility="visible"><tspan x="201">Project</tspan></text><path fill="none" d="M 65 315.5 L 337 315.5" stroke="#505050" stroke-width="1" zIndex="7" visibility="visible"></path></g><g class="highcharts-axis" zIndex="2"><text x="24.9375" y="178" style="font-family:Tahoma, Arial, sans-serif;font-size:9pt;color:#505050;font-weight:bold;fill:#505050;" zIndex="7" text-anchor="middle" transform="translate(0,0) rotate(270
24.9375 178)" visibility="visible"><tspan x="24.9375">Percent Complete (%)</tspan></text></g><g class="highcharts-series-group" zIndex="3"><g class="highcharts-series highcharts-tracker highcharts-tracker highcharts-tracker highcharts-tracker" visibility="visible" zIndex="0.1" transform="translate(65,40) scale(1 1)" style="" clip-path="url(#highcharts-1)"><rect fill="#9F2727" x="3.5" y="275.5" width="31" height="0" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0"></rect><rect fill="#9F2727" x="42.5" y="275.5" width="31" height="0" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0"></rect><rect fill="#9F2727" x="81.5" y="59.5" width="31" height="216" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0"></rect><rect fill="#9F2727" x="120.5" y="144.5" width="31" height="131" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0"></rect><rect fill="#9F2727" x="159.5" y="13.5" width="31" height="262" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0"></rect><rect fill="#9F2727" x="198.5" y="236.5" width="31" height="39" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0"></rect><rect fill="#9F2727" x="237.5" y="72.5" width="31" height="203" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0"></rect></g><g class="highcharts-markers" visibility="visible" zIndex="0.1" transform="translate(65,40) scale(1 1)"></g></g><g class="highcharts-data-labels highcharts-tracker highcharts-tracker highcharts-tracker highcharts-tracker" visibility="visible" zIndex="6" transform="translate(65,40) scale(1 1)" style=""><g zIndex="1" style="cursor:default;" transform="translate(16,256)" visibility="inherit"><text x="3" y="15" style="font-family:"HelveticaNeue-Roman", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;font-size:11px;color:#000000;line-height:14px;fill:#000000;" zIndex="1"></text></g><g zIndex="1" style="cursor:default;" transform="translate(55,256)" visibility="inherit"><text x="3" y="15" style="font-family:"HelveticaNeue-Roman", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;font-size:11px;color:#000000;line-height:14px;fill:#000000;" zIndex="1"></text></g><g zIndex="1" style="cursor:default;" transform="translate(82,40)" visibility="inherit"><text x="3" y="15" style="font-family:"HelveticaNeue-Roman", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;font-size:11px;color:#000000;line-height:14px;fill:#000000;" zIndex="1"><tspan x="3">41%</tspan></text></g><g zIndex="1" style="cursor:default;" transform="translate(121,125)" visibility="inherit"><text x="3" y="15" style="font-family:"HelveticaNeue-Roman", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;font-size:11px;color:#000000;line-height:14px;fill:#000000;" zIndex="1"><tspan x="3">25%</tspan></text></g><g zIndex="1" style="cursor:default;" transform="translate(160,-6)" visibility="inherit"><text x="3" y="15" style="font-family:"HelveticaNeue-Roman", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;font-size:11px;color:#000000;line-height:14px;fill:#000000;" zIndex="1"><tspan x="3">50%</tspan></text></g><g zIndex="1" style="cursor:default;" transform="translate(202,217)" visibility="inherit"><text x="3" y="15" style="font-family:"HelveticaNeue-Roman", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;font-size:11px;color:#000000;line-height:14px;fill:#000000;" zIndex="1"><tspan x="3">8%</tspan></text></g><g zIndex="1" style="cursor:default;" transform="translate(238,53)" visibility="inherit"><text x="3" y="15" style="font-family:"HelveticaNeue-Roman", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;font-size:11px;color:#000000;line-height:14px;fill:#000000;" zIndex="1"><tspan x="3">39%</tspan></text></g></g><g class="highcharts-legend" zIndex="7" transform="translate(94,404)"><rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" width="158" height="31" visibility="visible"></rect><g zIndex="1"><g><g class="highcharts-legend-item" zIndex="1" transform="translate(8,3)"><text x="21" y="15" style="font-family:Tahoma, Arial, sans-serif;font-size:9pt;cursor:pointer;color:#274b6d;fill:#274b6d;" text-anchor="start" zIndex="2"><tspan x="21">Percent Complete-Sum</tspan></text><rect rx="2" ry="2" fill="#9F2727" x="0" y="4" width="16" height="12" zIndex="3"></rect></g></g></g></g><g class="highcharts-axis-labels" zIndex="7"></g><g class="highcharts-axis-labels" zIndex="7"><text x="57" y="322.3421875" style="font-family:Tahoma, Arial, sans-serif;font-size:8pt;width:116px;color:#666;cursor:default;line-height:14px;fill:#666;" text-anchor="end" opacity="1"><tspan x="57">0</tspan></text><text x="57" y="217.19933035714288" style="font-family:Tahoma, Arial, sans-serif;font-size:8pt;width:116px;color:#666;cursor:default;line-height:14px;fill:#666;" text-anchor="end" opacity="1"><tspan x="57">20%</tspan></text><text x="57" y="112.05647321428572" style="font-family:Tahoma, Arial, sans-serif;font-size:8pt;width:116px;color:#666;cursor:default;line-height:14px;fill:#666;" text-anchor="end" opacity="1"><tspan x="57">40%</tspan></text></g><g class="highcharts-tooltip" zIndex="8" style="cursor:default;padding:0;white-space:nowrap;" visibility="hidden" transform="translate(46,45)" opacity="0"><rect rx="3" ry="3" fill="none" x="0.5" y="0.5" width="182" height="31" fill-opacity="0.85" isShadow="true" stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></rect><rect rx="3" ry="3" fill="none" x="0.5" y="0.5" width="182" height="31" fill-opacity="0.85" isShadow="true" stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></rect><rect rx="3" ry="3" fill="none" x="0.5" y="0.5" width="182" height="31" fill-opacity="0.85" isShadow="true" stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></rect><rect rx="3" ry="3" fill="rgb(255,255,255)" x="0.5" y="0.5" width="182" height="31" fill-opacity="0.85" stroke="#9F2727" stroke-width="1" anchorX="194.5" anchorY="8"></rect></g></svg>
Our current strategy is to generate the SVG baselines in all browsers, save them, rerun the SVG generation using selenium driver and compare the two XML response naively.
However we noticed that the DPI and the browser heavily affects height and width of the svg, which makes the tests brittle. We also tried taking screenshots of the two charts and comparing however it was very resolution dependent.
Currently we complement the UI tests with unit tests that makes sures the input to highcharts is correct, but we want to make sure we cover all the bases.
Please help us determine the correct strategy to test SVG elements generated by libraries like highcharts and d3.js.
Thank you very much.
I think you're on the right path, using Selenium to verify the dimensions of the various elements of the chart. The key is to verify their relative dimensions compared to the <svg>'s size, maybe allowing a small margin of error, and not their absolute ones.

Selenium Webdriver - Validate a value in tooltip for a section (bar) of a bar chart

I need to validate the value of the margin (sum) element from the bar chart as shown below. So how do I extract the value 31732 from margin (sum) tooltip for Electrolux vendor (bar 1) in the bar chart?
The html for the div enclosing this value is also given below.
I would appreciate any help to point me in the right direction.
Thanks in advance.
<div id="highcharts-60" class="highcharts-container" style="position: relative; overflow: hidden; width: 727px; height: 378px; text-align: left; font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif; font-size: 12px; left: 0px; top: -0.600006px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="727" height="378">
<defs>
<rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" width="727" height="378" stroke-width="0" stroke="#4572A7">
<text class="highcharts-title" x="364" y="25" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:10px;color:#3E576F;fill:#3E576F;" text-anchor="middle" zIndex="1">
<g class="highcharts-grid" zIndex="1">
<g class="highcharts-grid" zIndex="1">
<path d="M 106.5 40 L 106.5 291" fill="none" stroke="#C0C0C0" stroke-width="1">
<path d="M 147.5 40 L 147.5 291" fill="none" stroke="#C0C0C0" stroke-width="1">
<path d="M 187.5 40 L 187.5 291" fill="none" stroke="#C0C0C0" stroke-width="1">
<path d="M 228.5 40 L 228.5 291" fill="none" stroke="#C0C0C0" stroke-width="1">
<path d="M 269.5 40 L 269.5 291" fill="none" stroke="#C0C0C0" stroke-width="1">
<path d="M 310.5 40 L 310.5 291" fill="none" stroke="#C0C0C0" stroke-width="1">
<path d="M 350.5 40 L 350.5 291" fill="none" stroke="#C0C0C0" stroke-width="1">
<path d="M 391.5 40 L 391.5 291" fill="none" stroke="#C0C0C0" stroke-width="1">
<path d="M 432.5 40 L 432.5 291" fill="none" stroke="#C0C0C0" stroke-width="1">
<path d="M 473.5 40 L 473.5 291" fill="none" stroke="#C0C0C0" stroke-width="1">
<path d="M 513.5 40 L 513.5 291" fill="none" stroke="#C0C0C0" stroke-width="1">
<path d="M 554.5 40 L 554.5 291" fill="none" stroke="#C0C0C0" stroke-width="1">
<path d="M 595.5 40 L 595.5 291" fill="none" stroke="#C0C0C0" stroke-width="1">
<path d="M 636.5 40 L 636.5 291" fill="none" stroke="#C0C0C0" stroke-width="1">
<path d="M 676.5 40 L 676.5 291" fill="none" stroke="#C0C0C0" stroke-width="1">
<path d="M 717.5 40 L 717.5 291" fill="none" stroke="#C0C0C0" stroke-width="1">
</g>
<g class="highcharts-series-group" zIndex="3">
<g class="highcharts-series" width="611" height="251" transform="translate(717,291) rotate(90) scale(-1,1)" clip-path="url(https://staging.datarpm.com/analytics/4fbf89e5e4b0a97336652433#highcharts-61)" visibility="visible">
<rect rx="0" ry="0" fill="none" x="220.5" y="352.5" width="18" height="258" stroke-width="5" stroke="rgb(0, 0, 0)" r="0" isShadow="true" stroke-opacity="0.05" transform="translate(-1,-1)">
<rect rx="0" ry="0" fill="none" x="220.5" y="352.5" width="18" height="258" stroke-width="3" stroke="rgb(0, 0, 0)" r="0" isShadow="true" stroke-opacity="0.1" transform="translate(-1,-1)">
<rect rx="0" ry="0" fill="none" x="220.5" y="352.5" width="18" height="258" stroke-width="1" stroke="rgb(0, 0, 0)" r="0" isShadow="true" stroke-opacity="0.15000000000000002" transform="translate(-1,-1)">
<rect rx="0" ry="0" fill="#4572A7" x="220.5" y="352.5" width="18" height="258" stroke-width="1" stroke="#FFFFFF" r="0" fill-opacity="1">
<rect rx="0" ry="0" fill="none" x="178.5" y="319.5" width="18" height="291" stroke-width="5" stroke="rgb(0, 0, 0)" r="0" isShadow="true" stroke-opacity="0.05" transform="translate(-1,-1)">
<rect rx="0" ry="0" fill="none" x="178.5" y="319.5" width="18" height="291" stroke-width="3" stroke="rgb(0, 0, 0)" r="0" isShadow="true" stroke-opacity="0.1" transform="translate(-1,-1)">
<rect rx="0" ry="0" fill="none" x="178.5" y="319.5" width="18" height="291" stroke-width="1" stroke="rgb(0, 0, 0)" r="0" isShadow="true" stroke-opacity="0.15000000000000002" transform="translate(-1,-1)">
<rect rx="0" ry="0" fill="#4572A7" x="178.5" y="319.5" width="18" height="291" stroke-width="1" stroke="#FFFFFF" r="0" fill-opacity="1">
<rect rx="0" ry="0" fill="none" x="136.5" y="293.5" width="18" height="317" stroke-width="5" stroke="rgb(0, 0, 0)" r="0" isShadow="true" stroke-opacity="0.05" transform="translate(-1,-1)">
<rect rx="0" ry="0" fill="none" x="136.5" y="293.5" width="18" height="317" stroke-width="3" stroke="rgb(0, 0, 0)" r="0" isShadow="true" stroke-opacity="0.1" transform="translate(-1,-1)">
<rect rx="0" ry="0" fill="none" x="136.5" y="293.5" width="18" height="317" stroke-width="1" stroke="rgb(0, 0, 0)" r="0" isShadow="true" stroke-opacity="0.15000000000000002" transform="translate(-1,-1)">
<rect rx="0" ry="0" fill="#4572A7" x="136.5" y="293.5" width="18" height="317" stroke-width="1" stroke="#FFFFFF" r="0" fill-opacity="1">
<rect rx="0" ry="0" fill="none" x="94.5" y="62.5" width="18" height="548" stroke-width="5" stroke="rgb(0, 0, 0)" r="0" isShadow="true" stroke-opacity="0.05" transform="translate(-1,-1)">
<rect rx="0" ry="0" fill="none" x="94.5" y="62.5" width="18" height="548" stroke-width="3" stroke="rgb(0, 0, 0)" r="0" isShadow="true" stroke-opacity="0.1" transform="translate(-1,-1)">
<rect rx="0" ry="0" fill="none" x="94.5" y="62.5" width="18" height="548" stroke-width="1" stroke="rgb(0, 0, 0)" r="0" isShadow="true" stroke-opacity="0.15000000000000002" transform="translate(-1,-1)">
<rect rx="0" ry="0" fill="#4572A7" x="94.5" y="62.5" width="18" height="548" stroke-width="1" stroke="#FFFFFF" r="0">
<rect rx="0" ry="0" fill="none" x="52.5" y="257.5" width="18" height="353" stroke-width="5" stroke="rgb(0, 0, 0)" r="0" isShadow="true" stroke-opacity="0.05" transform="translate(-1,-1)">
<rect rx="0" ry="0" fill="none" x="52.5" y="257.5" width="18" height="353" stroke-width="3" stroke="rgb(0, 0, 0)" r="0" isShadow="true" stroke-opacity="0.1" transform="translate(-1,-1)">
<rect rx="0" ry="0" fill="none" x="52.5" y="257.5" width="18" height="353" stroke-width="1" stroke="rgb(0, 0, 0)" r="0" isShadow="true" stroke-opacity="0.15000000000000002" transform="translate(-1,-1)">
<rect rx="0" ry="0" fill="#4572A7" x="52.5" y="257.5" width="18" height="353" stroke-width="1" stroke="#FFFFFF" r="0">
<rect rx="0" ry="0" fill="none" x="10.5" y="247.5" width="18" height="363" stroke-width="5" stroke="rgb(0, 0, 0)" r="0" isShadow="true" stroke-opacity="0.05" transform="translate(-1,-1)">
<rect rx="0" ry="0" fill="none" x="10.5" y="247.5" width="18" height="363" stroke-width="3" stroke="rgb(0, 0, 0)" r="0" isShadow="true" stroke-opacity="0.1" transform="translate(-1,-1)">
<rect rx="0" ry="0" fill="none" x="10.5" y="247.5" width="18" height="363" stroke-width="1" stroke="rgb(0, 0, 0)" r="0" isShadow="true" stroke-opacity="0.15000000000000002" transform="translate(-1,-1)">
<rect rx="0" ry="0" fill="#4572A7" x="10.5" y="247.5" width="18" height="363" stroke-width="1" stroke="#FFFFFF" r="0">
</g>
</g>
<g class="highcharts-legend" zIndex="7" transform="translate(298,337)">
<rect rx="5" ry="5" fill="none" x="0.5" y="0.5" width="130" height="25" stroke-width="1" stroke="#909090" visibility="visible">
<text x="30" y="18" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3E576F;fill:#3E576F;" zIndex="2">
<tspan x="30"> margin (sum)</tspan>
</text>
<rect rx="2" ry="2" fill="#4572A7" x="9.5" y="7.5" width="16" height="12" stroke-width="1" zIndex="3" stroke="#FFFFFF" r="0">
</g>
<g class="highcharts-axis" zIndex="7">
<text x="26" y="165.5" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#6D869F;font-weight:bold;fill:#6D869F;" zIndex="7" transform="rotate(270 26 165)" text-anchor="middle">
<g class="highcharts-axis" zIndex="7">
<text x="411.5" y="323" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#6D869F;font-weight:bold;fill:#6D869F;" zIndex="7" text-anchor="middle">
<tspan x="411.5"> margin (sum)</tspan>
</text>
<path d="M 106.5 40 L 106.5 291" fill="none" stroke="#C0D0E0" stroke-width="1" zIndex="7">
<g class="highcharts-tooltip" zIndex="8" visibility="hidden" transform="translate(202.5577832333554,26.04093567342961)">
<rect rx="5" ry="5" fill="none" x="7" y="7" width="131" height="38" stroke-width="5" fill-opacity="0.85" isShadow="true" stroke="rgb(0, 0, 0)" stroke-opacity="0.05" transform="translate(1,1)">
<rect rx="5" ry="5" fill="none" x="7" y="7" width="131" height="38" stroke-width="3" fill-opacity="0.85" isShadow="true" stroke="rgb(0, 0, 0)" stroke-opacity="0.1" transform="translate(1,1)">
<rect rx="5" ry="5" fill="none" x="7" y="7" width="131" height="38" stroke-width="1" fill-opacity="0.85" isShadow="true" stroke="rgb(0, 0, 0)" stroke-opacity="0.15000000000000002" transform="translate(1,1)">
<rect rx="5" ry="5" fill="rgb(255,255,255)" x="7" y="7" width="131" height="38" stroke-width="2" fill-opacity="0.85" stroke="#4572A7">
<text x="12" y="24" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#333333;padding:0;white-space:nowrap;fill:#333333;" zIndex="1">
<tspan style="text-decoration: underline; font-weight: bold;" x="12">Electrolux</tspan>
<tspan style="font-weight:bold" dy="13" x="12"> margin (sum)</tspan>
<tspan dx="3"> : 31732</tspan>
</text>
</g>
<g class="highcharts-tracker" zIndex="9" transform="translate(717,291) rotate(90) scale(-1,1)" width="611" height="251">
<rect rx="3" ry="3" fill="url(https://staging.datarpm.com/analytics/4fbf89e5e4b0a97336652433#highcharts-62)" x="0.5" y="0.5" width="23" height="19" stroke-width="1" transform="translate(693,348)" zIndex="19" stroke="#B0B0B0">
<rect rx="3" ry="3" fill="url(https://staging.datarpm.com/analytics/4fbf89e5e4b0a97336652433#highcharts-63)" x="0.5" y="0.5" width="23" height="19" stroke-width="1" transform="translate(693,328)" zIndex="19" stroke="#B0B0B0">
<path d="M 6 17 L 18 17 18 14 6 14 Z M 12 14 L 9 9 11 9 11 5 13 5 13 9 15 9 Z" fill="#A8BF77" transform="translate(693,348)" stroke="#A0A0A0" stroke-width="1" zIndex="20">
<path d="M 6 14 L 18 14 18 9 6 9 Z M 9 9 L 9 5 15 5 15 9 Z M 9 14 L 7.5 17 16.5 17 15 14 Z" fill="#B5C9DF" transform="translate(693,328)" stroke="#A0A0A0" stroke-width="1" zIndex="20">
<rect rx="0" ry="0" fill="rgb(255,255,255)" x="693" y="348" width="24" height="20" stroke-width="0" fill-opacity="0.001" title="Export to raster or vector image" zIndex="21" style="cursor:pointer;">
<rect rx="0" ry="0" fill="rgb(255,255,255)" x="693" y="328" width="24" height="20" stroke-width="0" fill-opacity="0.001" title="Print the chart" zIndex="21" style="cursor:pointer;">
</svg>
</div>
I assume, that are not testing the highcharts themselves, but only that the correct data is passed to it. Since testing whether the data is visualized correctly would be highcharts's responsibility.
If in JavaScript chart has been assign to a variable (e.g. var chart = new Highcharts.Chart({ ... })), then you can try to get the data by calling the highcharts series data api
int[] data = js.executeScript("return chart.series.data;");
If that doesn't work, then you can always extract the data from the html like this:
//get the element that contains the data
WebElement currentValueElement = driver.findElement(By.xpath('//*[#class="highcharts-tooltip"]//text/tspan[last()]'));
//get the value from that element
int currentvalue = Integer.parseInt(currentValueElement.split(":")[1].trim())
From what I see, the tooltip might be a dynamic Javascript popup like you see with some dropdown menus such as Google search tips. You are the only person to have access to the FULL source (HTML headers) and so only you can figure that out for us. That being the case, if you are desparate, you can use a physical mouse click (using Webdriver Action class) combined with a slight delay and some keystrokes to select and copy (with ctrl-c ) and then access the clipboard with java.awt.Toolkit to get the value and then process it. This is just off the top of my head.
There may be better ways of doing this than what I suggest above. Alternatively, it's very possible that the DOM has access to the values of that tooltip (where you can use a cssSelector to get) but without having access to you page with Firebug (using Firefinder plugin), its hard to tell.
did you try using this xpath and getting text from it?
"//tspan[#dx='3']"