working on canvas svg using selenium webdriver | xpath | highchart
For below example you have to use xpath with name space.
<!DOCTYPE html>
<html><body>
<div id="overview-layout">
<div id="overview-body">
<div class="" id="overview-tabcontent-container">
<div data-highcharts-chart="7" class="chart" id="chart_1">
<div id="highcharts-26" class="highcharts-container">
<svg height="304" width="1154" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect zIndex="1"></rect>
<path zIndex="2"></path>
<g transform="translate(73,0)" style="cursor:default;text-align:center;" zIndex="7" class="highcharts-button">
<rect stroke-width="1" stroke="#68A" height="18" width="30" y="0.5" x="0.5" fill="url()" ry="0" rx="0"></rect>
<text zIndex="1" y="14" x="7.483333110809326">
<tspan x="7.483333110809326">1h</tspan></text>
</g>
<g transform="translate(103,0)" style="cursor:default;text-align:center;" zIndex="7" class="highcharts-button">
<rect stroke-width="1" stroke="#68A" height="18" width="30" y="0.5" x="0.5" fill="url()" ry="0" rx="0"></rect>
<text zIndex="1" y="14" x="7.483333110809326">
<tspan x="7.483333110809326">4h</tspan></text>
</g>
<g transform="translate(133,0)" style="cursor:default;text-align:center;" zIndex="7" class="highcharts-button">
<rect stroke-width="1" stroke="#68A" height="18" width="30" y="0.5" x="0.5" fill="url()" ry="0" rx="0"></rect>
<text zIndex="1" y="14" x="7.483333110809326">
<tspan x="7.483333110809326">8h</tspan></text>
</g>
<g transform="translate(163,0)" style="cursor:default;text-align:center;" zIndex="7" class="highcharts-button">
<rect stroke-width="1" stroke="#68A" height="18" width="30" y="0.5" x="0.5" fill="url()" ry="0" rx="0"></rect>
<text zIndex="1" y="14" x="7.391666889190674">
<tspan x="7.391666889190674">All</tspan></text>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
</body></html>
example to access first tspan inside svg
//*[name()='svg' and namespace-uri()='http://www.w3.org/2000/svg']/*[name()='g'][1]/*[name()='text']/*[name()='tspan']
No images available.