Unser Server generiert die Daten und der Client generiert Diagramme mit HighCharts, das heißt SVG. Wir haben Schwierigkeiten, einen automatisierten Test zu schreiben, um zu überprüfen, ob das generierte Diagramm korrekt ist.
Dies erzeugt die SVG HighCharts
%Vor%Unsere derzeitige Strategie besteht darin, die SVG-Grundlinien in allen Browsern zu generieren, sie zu speichern, die SVG-Generierung mit dem Selenium-Treiber erneut auszuführen und die beiden XML-Antworten naiv zu vergleichen.
Allerdings haben wir festgestellt, dass DPI und der Browser die Höhe und Breite des Svg stark beeinflussen, was die Tests spröde macht. Wir haben auch versucht, Screenshots der beiden Charts zu erstellen und zu vergleichen, aber es war sehr Auflösung abhängig.
Gegenwärtig ergänzen wir die UI-Tests mit Komponententests, die sicherstellen, dass der Input für Highcharts korrekt ist, aber wir möchten sicherstellen, dass wir alle Grundlagen abdecken.
Bitte helfen Sie uns, die richtige Strategie zu finden, um SVG-Elemente zu testen, die von Bibliotheken wie highcharts und d3.js erzeugt werden.
Vielen Dank.
Ich denke, Sie sind auf dem richtigen Weg und verwenden Selenium , um die Dimensionen der verschiedenen Elemente des Diagramms zu überprüfen. Der Schlüssel ist, ihre relativen Dimensionen im Vergleich zur Größe von <svg> zu verifizieren, wobei sie möglicherweise eine kleine Fehlerspanne zulässt, und nicht ihre absoluten.
Tags und Links svg d3.js automated-tests selenium highcharts