diff --git a/docs/src/docs/modules/layout-check.adoc b/docs/src/docs/modules/layout-check.adoc index cc56f6f434..10f541b2a0 100644 --- a/docs/src/docs/modules/layout-check.adoc +++ b/docs/src/docs/modules/layout-check.adoc @@ -12,15 +12,22 @@ Although, manual inspection can never be pixel-accurate. An inspection of perhap At this point an automatic comparison of reference screenshots can help. This test is to be seen in addition to the functional tests, but cannot replace them. In a test case, it would also be conceivable to combine the check of function and layout. -== Description +== How it works A layout test with the Testerra utilities is actually a comparison between a reference and the actual state. This is done via the screenshot functionality of Selenium, in which both screenshots (reference and actual) are compared pixel by pixel from top to bottom. In this comparison, a third image is created in which differences (ReferencePixel != ActualPixel) are marked in red. +image::layoutcheck_comparison.png[alt="Visualization of a layout check",width=920,height=233] + +In case that one image has a different size than the other Testerra reports this as an <<#_optional_assertions, Optional assertion>>. Testerra considers only the common pixels of both images as 100%. Pixels that are outside of one or the other image are not included in the error calculation. In the comparison, those Pixels are marked in blue. + +image::layoutcheck_diffsize_comparison.png[alt="Visualization of a layout check with different sized images",width=920,height=233] + + === Prerequisites The following prerequisites must be met . Concrete execution environment: Layout tests should run in a concrete browser environment to ensure the comparability of the screenshots. -** Size of browser window: Define fixed size to exclude different sizes of the images at different VM resolutions +** Size of browser window: Define fixed size to exclude different sizes of the images at different screen resolutions ** Screen resolution and scaling: Make sure you have the same screen resolution and scaling on each presentation device. == Configuration diff --git a/docs/src/images/layoutcheck_comparison.png b/docs/src/images/layoutcheck_comparison.png new file mode 100644 index 0000000000..089e56f96d Binary files /dev/null and b/docs/src/images/layoutcheck_comparison.png differ diff --git a/docs/src/images/layoutcheck_diffsize_comparison.png b/docs/src/images/layoutcheck_diffsize_comparison.png new file mode 100644 index 0000000000..4ade655af4 Binary files /dev/null and b/docs/src/images/layoutcheck_diffsize_comparison.png differ diff --git a/driver-ui/src/main/java/eu/tsystems/mms/tic/testframework/layout/LayoutCheck.java b/driver-ui/src/main/java/eu/tsystems/mms/tic/testframework/layout/LayoutCheck.java index 47ec9c7352..cff79c068b 100644 --- a/driver-ui/src/main/java/eu/tsystems/mms/tic/testframework/layout/LayoutCheck.java +++ b/driver-ui/src/main/java/eu/tsystems/mms/tic/testframework/layout/LayoutCheck.java @@ -271,7 +271,7 @@ private static double generateDistanceImage( int pixelsInError = 0; int noOfIgnoredPixels = 0; // calculate the size of the distance image and create an empty image - final Dimension distanceImageSize = calculateMaxImageSize(expectedImage, actualImage); + final Dimension distanceImageSize = calculateMinImageSize(expectedImage, actualImage); final BufferedImage distanceImage = new BufferedImage( distanceImageSize.width, distanceImageSize.height, expectedImage.getType()); @@ -317,10 +317,8 @@ private static double generateDistanceImage( distanceImage.setRGB(currentX, currentY, Color.RED.getRGB()); pixelsInError++; } - } - - // count the ignored pixels for calculating - if (useIgnoreColor && expectedRgb == ignoreColor) { + } else { + // count the ignored pixels for calculating noOfIgnoredPixels++; } } else { @@ -380,19 +378,19 @@ private static boolean doRGBsMatch(int expectedRgb, int actualImageRGB) { } /** - * Calculates the sizes that result from the maximum sizes of both pictures. + * Calculates the sizes that result from the minimum sizes of both pictures. * * @param expectedImage The expected image - * @param actualImage The actual image - * @return Calculated maximum size of the images + * @param actualImage The actual image + * @return Calculated minimum size of the images */ - private static Dimension calculateMaxImageSize( + private static Dimension calculateMinImageSize( final BufferedImage expectedImage, final BufferedImage actualImage ) { return new Dimension( - Math.max(expectedImage.getWidth(), actualImage.getWidth()), - Math.max(expectedImage.getHeight(), actualImage.getHeight()) + Math.min(expectedImage.getWidth(), actualImage.getWidth()), + Math.min(expectedImage.getHeight(), actualImage.getHeight()) ); } diff --git a/integration-tests/src/test/java/eu/tsystems/mms/tic/testframework/test/layoutcheck/LayoutCheckImageTest.java b/integration-tests/src/test/java/eu/tsystems/mms/tic/testframework/test/layoutcheck/LayoutCheckImageTest.java index 4607c66b9f..fd474e31fb 100644 --- a/integration-tests/src/test/java/eu/tsystems/mms/tic/testframework/test/layoutcheck/LayoutCheckImageTest.java +++ b/integration-tests/src/test/java/eu/tsystems/mms/tic/testframework/test/layoutcheck/LayoutCheckImageTest.java @@ -48,4 +48,10 @@ public void testT01_CheckImageLayout() { uiElement.expect().screenshot().pixelDistance("TestImage").isLowerThan(1.0); } + @Test + public void testT02_CheckImageLayoutDifferentSizes() { + UiElement uiElement = getUIElementQa("testimage"); + uiElement.expect().screenshot().pixelDistance("TestImageDifferentSize").isLowerThan(1.0); + } + } diff --git a/integration-tests/src/test/resources/layout-references/chromeHeadless/TestImageDifferentSize.png b/integration-tests/src/test/resources/layout-references/chromeHeadless/TestImageDifferentSize.png new file mode 100644 index 0000000000..4863b4b4cb Binary files /dev/null and b/integration-tests/src/test/resources/layout-references/chromeHeadless/TestImageDifferentSize.png differ