Selenium 测试D3/HighCharts/SVG的最佳策略是什么？

我们的服务器生成数据，然后客户端使用HighCharts（SVG）生成图表。为了验证生成的图表是否正确，我们正在努力编写一个自动测试

这就是SVG HighCharts生成的内容

<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:&quot;HelveticaNeue-Roman&quot;, &quot;HelveticaNeue&quot;, &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, &quot;Arial&quot;, 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:&quot;HelveticaNeue-Roman&quot;, &quot;HelveticaNeue&quot;, &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, &quot;Arial&quot;, 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:&quot;HelveticaNeue-Roman&quot;, &quot;HelveticaNeue&quot;, &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, &quot;Arial&quot;, 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:&quot;HelveticaNeue-Roman&quot;, &quot;HelveticaNeue&quot;, &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, &quot;Arial&quot;, 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:&quot;HelveticaNeue-Roman&quot;, &quot;HelveticaNeue&quot;, &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, &quot;Arial&quot;, 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:&quot;HelveticaNeue-Roman&quot;, &quot;HelveticaNeue&quot;, &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, &quot;Arial&quot;, 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:&quot;HelveticaNeue-Roman&quot;, &quot;HelveticaNeue&quot;, &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, &quot;Arial&quot;, 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:&quot;HelveticaNeue-Roman&quot;, &quot;HelveticaNeue&quot;, &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, &quot;Arial&quot;, 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>

使用Highcharts 3.0.2Chart上下文菜单创建项目完成百分比（%）41%25%50%8%39%Sum020%40%

我们当前的策略是在所有浏览器中生成SVG基线，保存它们，使用selenium驱动程序重新运行SVG生成，并天真地比较两个XML响应

然而，我们注意到DPI和浏览器严重影响svg的高度和宽度，这使得测试变得脆弱。我们还尝试拍摄了两张图表的屏幕截图，并进行了比较，但这取决于分辨率

目前，我们用单元测试来补充UI测试，以确保highcharts的输入是正确的，但我们希望确保涵盖所有基础

请帮助我们确定测试highcharts和d3.js等库生成的SVG元素的正确策略

---

非常感谢。

我认为您走的是正确的道路，使用

Selenium

验证图表各个元素的尺寸。关键是验证它们相对于

大小的相对尺寸，可能允许较小的误差，而不是它们的绝对误差。

对于Highcharts，设置

图表的宽度
和
图表的高度
如何？如果浏览器返回不同的维度，那么我不确定这是否可以在没有一些黑客的情况下轻松完成。