Chiến lược tốt nhất để thử nghiệm D3/HighCharts/SVG là gì?

Question

Máy chủ của chúng tôi tạo dữ liệu và sau đó khách hàng tạo biểu đồ bằng HighCharts là SVG. Chúng tôi đang đấu tranh để viết một bài kiểm tra tự động để xác minh rằng biểu đồ được tạo là chính xác.

Đây là những gì HighCharts SVG tạo

<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> 

chiến lược hiện tại của chúng tôi là tạo ra các đường cơ sở SVG trong tất cả các trình duyệt, lưu chúng, chạy lại hệ SVG sử dụng driver selen và so sánh phản ứng hai XML ngây thơ.

Tuy nhiên, chúng tôi nhận thấy rằng DPI và trình duyệt ảnh hưởng nhiều đến chiều cao và chiều rộng của svg khiến cho các thử nghiệm trở nên giòn. Chúng tôi cũng đã thử chụp ảnh màn hình của hai bảng xếp hạng và so sánh tuy nhiên nó là rất độ phân giải phụ thuộc.

Hiện tại chúng tôi bổ sung các bài kiểm tra giao diện người dùng với các bài kiểm tra đơn vị làm cho đầu vào cho bản đồ là chính xác, nhưng chúng tôi muốn đảm bảo rằng chúng tôi bao gồm tất cả các cơ sở.

Vui lòng giúp chúng tôi xác định chiến lược chính xác để kiểm tra các phần tử SVG được tạo bởi các thư viện như highcharts và d3.js.

Cảm ơn bạn rất nhiều.

Answer 1

Tôi nghĩ bạn đang đi đúng hướng, sử dụng Selenium để xác minh kích thước của các thành phần khác nhau của biểu đồ. Điều quan trọng là để xác minh kích thước tương đối của họ so với kích thước của <svg>, có thể cho phép một biên độ nhỏ của lỗi, và không phải là những tuyệt đối của họ.