我们的服务器生成数据，然后客户端使用 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:"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>
我们当前的策略是在所有浏览器中生成 SVG 基线，保存它们，使用 selenium 驱动程序重新运行 SVG 生成，并简单地比较两个 XML 响应。
但是我们注意到 DPI 和浏览器严重影响 svg 的高度和宽度，这使得测试变得脆弱。我们还尝试截取两个图表的屏幕截图并进行比较，但它非常依赖于分辨率。
目前，我们通过单元测试来补充 UI 测试，以确保 highcharts 的输入正确，但我们希望确保涵盖所有基础。
请帮助我们确定测试由 highcharts 和 d3.js 等库生成的 SVG 元素的正确策略。
非常感谢。
最佳答案
我认为你走在正确的道路上，使用 Selenium验证图表各个元素的尺寸。关键是验证它们与<svg>相比的相对尺寸。的大小，可能允许很小的误差范围，而不是它们的绝对误差。
关于selenium - 测试 D3/HighCharts/SVG 的最佳策略是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30139059/