Qual è la migliore strategia per testare D3/HighCharts/SVG?

Question

Il nostro server genera i dati e quindi il client genera grafici utilizzando HighCharts che è SVG. Stiamo lottando per scrivere un test automatico per verificare che il grafico generato sia corretto.

Questo è ciò che i Highcharts SVG genera

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

La nostra attuale strategia è quello di generare linee di base SVG in tutti i browser, salvarli, eseguire nuovamente la generazione SVG usando driver di selenio e confrontare ingenuamente la risposta a due XML.

Tuttavia abbiamo notato che il DPI e il browser colpisce pesantemente l'altezza e la larghezza del formato SVG, che rende i test fragili. Abbiamo anche provato a prendere screenshot dei due grafici e confrontando tuttavia era molto dipendente dalla risoluzione .

Attualmente completiamo i test dell'interfaccia utente con test di unità che rendono sicuro l'input per i diagrammi elevati è corretto, ma vogliamo essere sicuri di coprire tutte le basi.

Si prega di aiutarci a determinare la strategia corretta per testare gli elementi SVG generati da librerie come highcharts e d3.js.

Grazie mille.

Answer 1

Penso che tu sia sulla strada giusta, usando Selenium per verificare le dimensioni dei vari elementi del grafico. La chiave è verificare le loro dimensioni relative rispetto alla dimensione dello <svg>, forse lasciando un piccolo margine di errore, e non i loro valori assoluti.