퍼지와 스크린 샷 비교

Question

나는 웹 페이지 기능 테스트를 자동화하기 위해 셀레늄을 사용하고 있습니다. 새 코드를 만들 때 픽셀 별 비교를 수행하는 것이 중요합니다. 따라서 Selenium을 사용하여 스크린 샷을 찍고 base64 인코딩 된 문자열을 비교하여 변경 사항이 있는지 확인합니다.

실제로 이미지에서 완전한 픽셀 일관성을 얻는 것은 어렵습니다. 사소한 blurriness/렌더링 artifacts가 "fail"대신에 "pass"로 간주되기를 바랍니다. 그래서 우리 테스트를 좀 덜 깨지기 쉽게하기 위해 퍼지 비교를하는 방법이 있는지 궁금합니다.

필자는 base64 문자열 사이의 Levenshtein 거리를 시작점으로 생각하고 있었지만, 이것이 좋은 접근 방법인지 아니면 허용 오차가 있어야 하는지를 실제로 알지 못합니다 "에서"렌더링 유물 ". 어떤 아이디어/접근법?

Answer 1

그래서 ImageMagick 명령 줄 도구 (왜 이미지 비교를 다시 작성했기 때문에)로 끝났습니다. "비교"도구의 "Peak Absolute Error"측정 항목은 두 이미지가 동일하기 전에 픽셀을 얼마나 흐리게 처리해야하는지 알려줍니다. 이것은 잘 작동하는 것 같습니다 ... 약간의 그래픽 왜곡이있는 이미지의 경우 일치하지 않는 많은 픽셀이있을 수 있지만 약간의 퍼지가 일치하도록 충분합니다. 그러나 실제로는 다른 두 이미지의 경우 대부분의 픽셀이 일치 할지라도 매우 다른 경향이없는 이미지가 있습니다. 지금은 이미지가 동일한 것으로 간주되어야하는지 확인하기 위해 15 % 미만의 PAE가 있는지 확인하고 있습니다. 내가 사용 명령 줄은 다음과 같습니다 ImageMagick과의 비교 도구에

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

문서는 여기에 있습니다 : http://www.imagemagick.org/script/compare.php

Answer 2

아티팩트 (예 : BMP 또는 PNG)를 생성하지 않는 이미지 형식을 사용하면 픽셀 단위로 비교할 수 있습니다. 각 픽셀을 일반적인 Euclidean Distance으로 확인할 수 있다고 생각합니다. 는 거리 C# 코드를 테스트하지 않았

// 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; 
} 

의 사각형을 제곱근을 계산하지만 확인하지 않는 성능을 약간 개선하기 위해,하지만 당신에게 아이디어를 줄 것이다. 몇 가지 시도해보고 maxDistanceAllowed을 필요에 맞게 조정하십시오.

Answer 3

내가 눈에 띄지 변경의보고를 피하려고하는 인간의 시각 시스템의 모델을 사용 perceptualdiff을 사용하고

(렌더러 회귀 테스트에 사용 된 저자).

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

:

가

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

needle 회귀 테스트 프레임 워크가 스크린과 비교 pdiff을 사용을 지원한다 (diff.ppm이 차이의 영역을 강조 PPM 형식 이미지 어디) : 사용이 매우 간단

Answer 4

다른 사람이 비슷한 것을 찾고 있다면 묘사 된 - dpxdt입니다. CI/CD 프로세스의 일부로 사용하도록 설계되었습니다.

지각적인 차이점을 서버, 명령 줄 도구, 팬텀 j의 래퍼와 결합합니다.

전체 사이트 크롤링 및 차이점 비교 페이지와 같은 기능을 제공합니다.