Rozproszone porównanie zrzutów z Selenium

Question

Używam Selenium do automatyzacji testowania funkcjonalności stron internetowych. Ważne jest, abyśmy porównując piksel po pikselu wprowadzili nowy kod, więc używamy Selenium do robienia zrzutów ekranu i porównywania łańcuchów kodowanych base64, aby sprawdzić, czy coś się zmieniło.

Zauważamy, że w praktyce trudno uzyskać pełną spójność pikseli, szczególnie w przypadku obrazów. Chciałbym, aby pomniejsze artefakty związane z rozmyciem/renderingiem były liczone jako "pass" zamiast "fail", więc zastanawiam się, czy istnieje sposób na porównanie rozmyte, aby nasze testy były trochę mniej kruche.

Myślałem o tym, że może przyjrzeć się odległości Levenshteina między ciągami base64 jako punktu wyjścia, ale tak naprawdę nie wiem, czy to dobre podejście, czy też, jakie powinny być tolerancje, które odróżniają "coś przeniesionego na stronę "z" artefaktu renderującego ". Wszelkie pomysły/podejścia?

Answer 1

Więc skończyło się na tym, że korzystałem z narzędzia wiersza poleceń ImageMagick (ponieważ po co ponownie wymyślić porównanie obrazów). Parametr "Peak Absolute Error" narzędzia "compare" informuje o tym, jak wiele musisz pomieszać pikselom, zanim dwa obrazy będą identyczne. Wydaje się, że działa to dobrze ... w przypadku obrazu z nieznacznymi zniekształceniami graficznymi może być wiele pikseli, które nie pasują do siebie, ale wystarczające fuzzing wystarcza, aby je dopasować; ale w przypadku dwóch obrazów, które są rzeczywiście różne, nawet jeśli większość pikseli może pasować, te, które nie wydają się być bardzo różne. Teraz sprawdzam, czy PAE wynosi mniej niż 15%, aby sprawdzić, czy obrazy powinny być liczone jako identyczne. wiersz polecenia używam to:

compare -metric PAE original.png new.png comparison.png 

Dokumentacja porównania narzędzia ImageMagick jest tutaj: http://www.imagemagick.org/script/compare.php

Answer 2

Użyj formatu obrazu, który nie tworzy artefaktów (np. BMP lub PNG), a następnie możesz wykonać porównanie na piksel. Myślę, że możesz sprawdzić każdy piksel ze wspólnym Euclidean Distance. Aby zwiększyć wydajność trochę, nie obliczyć pierwiastek kwadratowy ale sprawdź kwadratów odległości

// Maximum color distance allowed to define pixel consistency. 
const float maxDistanceAllowed = 5.0; 

// Square of the distance, used in calculations. 
float maxD = maxDistanceAllowed * maxDistanceAllowed; 

public bool isPixelConsistent(Color pixel1, Color pixel2) 
{ 
    // Euclidean distance in 3-dimensions. 
    float distanceSquared = (pixel1.R - pixel2.R)*(pixel1.R - pixel2.R) + (pixel1.G - pixel2.G)*(pixel1.G - pixel2.G) + (pixel1.B - pixel2.B)*(pixel1.B - pixel2.B); 

    // If the actual distance is less than the max allowed, the pixel is 
    // consistent and the method returns TRUE 
    return distanceSquared <= maxD; 
} 

Nie przetestować kod C#, ale powinna dać ci pomysł. Podaj kilka prób i dostosuj maxDistanceAllowed do swoich potrzeb.

Answer 3

Używam perceptualdiff który wykorzystuje model ludzkiego układu wzrokowego, aby spróbować uniknąć zgłaszania niezauważalne zmiany (autorzy wykorzystali do testowania regresji w rendererze). Użycie jest bardzo proste:

perceptualdiff -output diff.ppm baseline.png test.png 

(gdzie diff.ppm jest obraz formatu PPM podkreślając obszary różnica)

Testy ramy needle regresji posiada wsparcie dla korzystania pdiff porównać zdjęcia:

http://needle.readthedocs.org/en/latest/#engines

Answer 4

Jeśli ktoś jeszcze szuka czegoś podobnego, przedstawi się: dpxdt. Jest przeznaczony do użycia jako część procesu CI/CD.

Łączy różnice percepcyjne z serwerem, narzędzie linii poleceń, opakowanie dla phantom js.

Ma funkcjonalność, taką jak przeszukiwanie całej witryny i porównywanie stron pod kątem różnic.