Implement ImageComparator with tests, add draft of VisualStateProvider

Author: mialeska

src/main/java/aquality/selenium/core/applications/AqualityModule.java

@@ -12,6 +12,8 @@
 import aquality.selenium.core.utilities.IElementActionRetrier;
 import aquality.selenium.core.utilities.ISettingsFile;
 import aquality.selenium.core.utilities.IUtilitiesModule;
+import aquality.selenium.core.visualization.IImageComparator;
+import aquality.selenium.core.visualization.IVisualizationModule;
 import aquality.selenium.core.waitings.IConditionalWait;
 import aquality.selenium.core.waitings.IWaitingsModule;
 import com.google.inject.AbstractModule;
@@ -22,7 +24,8 @@
  * Describes all dependencies which is registered for the project.
  */
 public class AqualityModule<T extends IApplication> extends AbstractModule
-        implements IConfigurationsModule, IElementsModule, ILocalizationModule, IUtilitiesModule, IWaitingsModule {
+        implements IConfigurationsModule, IElementsModule, ILocalizationModule, IUtilitiesModule, IWaitingsModule,
+        IVisualizationModule {
 
     private final Provider<T> applicationProvider;
 
@@ -49,5 +52,6 @@ protected void configure() {
         bind(IConditionalWait.class).to(getConditionalWaitImplementation());
         bind(IElementFinder.class).to(getElementFinderImplementation());
         bind(IElementFactory.class).to(getElementFactoryImplementation());
+        bind(IImageComparator.class).to(getImageComparatorImplementation());
     }
 }

src/main/java/aquality/selenium/core/visualization/IImageComparator.java

@@ -0,0 +1,27 @@
+package aquality.selenium.core.visualization;
+
+import java.awt.*;
+
+/**
+ * Compares images with defined threshold.
+ * Default implementation does resize and gray-scaling to simplify comparison.
+ */
+public interface IImageComparator {
+
+    /**
+     * Gets the difference between two images as a percentage.
+     * @param thisOne The first image
+     * @param theOtherOne The image to compare with
+     * @param threshold How big a difference will be ignored as a percentage - value between 0 and 1.
+     * @return The difference between the two images as a percentage - value between 0 and 1.
+     */
+    float percentageDifference(Image thisOne, Image theOtherOne, float threshold);
+
+    /**
+     * Gets the difference between two images as a percentage.
+     * @param thisOne The first image
+     * @param theOtherOne The image to compare with
+     * @return The difference between the two images as a percentage - value between 0 and 1.
+     */
+    float percentageDifference(Image thisOne, Image theOtherOne);
+}

src/main/java/aquality/selenium/core/visualization/IVisualizationModule.java

@@ -0,0 +1,13 @@
+package aquality.selenium.core.visualization;
+
+/**
+ * Describes implementations of visualization services to be registered in DI container.
+ */
+public interface IVisualizationModule {
+    /**
+     * @return class which implements {@link IImageComparator}
+     */
+    default Class<? extends IImageComparator> getImageComparatorImplementation() {
+        return ImageComparator.class;
+    }
+}

src/main/java/aquality/selenium/core/visualization/ImageComparator.java

@@ -0,0 +1,71 @@
+package aquality.selenium.core.visualization;
+
+import java.awt.*;
+import java.awt.image.BufferedImage;
+
+public class ImageComparator implements IImageComparator {
+    private static final int DEFAULT_THRESHOLD = 3;
+    private static final int THRESHOLD_DIVISOR = 255;
+    private final int comparisonHeight = 16;
+    private final int comparisonWidth = 16;
+
+    public float percentageDifference(Image thisOne, Image theOtherOne, float threshold) {
+        if (threshold < 0 || threshold > 1) {
+            throw new IllegalArgumentException(String.format("Threshold should be between 0 and 1, but was [%s]", threshold));
+        }
+
+        int intThreshold = Float.valueOf(threshold * THRESHOLD_DIVISOR).intValue();
+        return percentageDifference(thisOne, theOtherOne, intThreshold);
+    }
+
+    public float percentageDifference(Image thisOne, Image theOtherOne) {
+        return percentageDifference(thisOne, theOtherOne, DEFAULT_THRESHOLD);
+    }
+
+    protected float percentageDifference(Image thisOne, Image theOtherOne, int threshold) {
+        int[][] differences = getDifferences(thisOne, theOtherOne);
+
+        int diffPixels = 0;
+
+        for (int[] bytes : differences) {
+            for (int b : bytes) {
+                if (b > threshold) {
+                    diffPixels++;
+                }
+            }
+        }
+
+        return diffPixels / (float) (comparisonWidth * comparisonHeight);
+    }
+
+    protected int[][] getDifferences(Image thisOne, Image theOtherOne) {
+        int[][] firstGray = getResizedGrayScaleValues(thisOne);
+        int[][] secondGray = getResizedGrayScaleValues(theOtherOne);
+
+        int[][] differences = new int[comparisonWidth][comparisonHeight];
+        for (int y = 0; y < comparisonHeight; y++) {
+            for (int x = 0; x < comparisonWidth; x++) {
+                differences[x][y] = (byte) Math.abs(firstGray[x][y] - secondGray[x][y]);
+            }
+        }
+
+        return differences;
+    }
+
+    protected int[][] getResizedGrayScaleValues(Image image) {
+        BufferedImage resizedImage = new BufferedImage(comparisonWidth, comparisonHeight, BufferedImage.TYPE_BYTE_GRAY);
+        Graphics2D graphics2D = resizedImage.createGraphics();
+        graphics2D.drawImage(image, 0, 0, comparisonWidth, comparisonHeight, null);
+        graphics2D.dispose();
+        int[][] grayScale = new int[comparisonWidth][comparisonHeight];
+        for (int y = 0; y < comparisonHeight; y++) {
+            for (int x = 0; x < comparisonWidth; x++) {
+                int pixel = resizedImage.getRGB(x, y);
+                int red = (pixel >> 16) & 0xff;
+                grayScale[x][y] = Math.abs(red);
+            }
+        }
+
+        return grayScale;
+    }
+}

src/main/java/aquality/selenium/core/visualization/VisualStateProvider.java

@@ -0,0 +1,43 @@
+package aquality.selenium.core.visualization;
+
+import org.openqa.selenium.Dimension;
+import org.openqa.selenium.OutputType;
+import org.openqa.selenium.Point;
+import org.openqa.selenium.remote.RemoteWebElement;
+
+import javax.imageio.ImageIO;
+import java.awt.*;
+import java.awt.image.BufferedImage;
+import java.io.ByteArrayInputStream;
+import java.io.IOException;
+import java.io.InputStream;
+import java.util.function.Supplier;
+
+import static java.awt.image.BufferedImage.TYPE_INT_RGB;
+
+public class VisualStateProvider {
+
+    private final Supplier<RemoteWebElement> getElement;
+
+    public VisualStateProvider(Supplier<RemoteWebElement> getElement){
+        this.getElement = getElement;
+    }
+
+    public Dimension getSize() {
+        return getElement.get().getSize();
+    }
+
+    public Point getLocation() {
+        return getElement.get().getLocation();
+    }
+
+    public Image getImage() {
+        byte[] bytes = getElement.get().getScreenshotAs(OutputType.BYTES);
+        try (InputStream is = new ByteArrayInputStream(bytes)) {
+            return ImageIO.read(is);
+        } catch (IOException exception) {
+            //log
+            return new BufferedImage(0, 0, TYPE_INT_RGB);
+        }
+    }
+}

src/test/java/tests/applications/browser/CachedLabel.java

@@ -5,6 +5,7 @@
 import aquality.selenium.core.elements.interfaces.IElementFinder;
 import aquality.selenium.core.localization.ILocalizationManager;
 import aquality.selenium.core.localization.ILocalizedLogger;
+import aquality.selenium.core.visualization.VisualStateProvider;
 import aquality.selenium.core.waitings.IConditionalWait;
 import org.openqa.selenium.By;
 import tests.applications.ICachedElement;
@@ -58,4 +59,8 @@ public ILocalizedLogger getLocalizedLogger() {
     public ILocalizationManager getLocalizationManager() {
         return AqualityServices.get(ILocalizationManager.class);
     }
+
+    public VisualStateProvider visual() {
+        return new VisualStateProvider(this::getElement);
+    }
 }

src/test/java/tests/visualization/ImageComparatorTests.java

@@ -0,0 +1,80 @@
+package tests.visualization;
+
+import aquality.selenium.core.visualization.IImageComparator;
+import org.testng.Assert;
+import org.testng.annotations.BeforeMethod;
+import org.testng.annotations.Test;
+import tests.applications.browser.AqualityServices;
+import tests.applications.browser.ITheInternetPageTest;
+import theinternet.DynamicLoadingForm;
+import theinternet.TheInternetPage;
+
+import java.awt.*;
+
+public class ImageComparatorTests implements ITheInternetPageTest {
+    private final IImageComparator imageComparator = AqualityServices.get(IImageComparator.class);
+
+    private void startLoading() {
+        DynamicLoadingForm.getStartLabel().click();
+    }
+
+    @Override
+    @BeforeMethod
+    public void beforeMethod() {
+        navigate(TheInternetPage.DYNAMIC_LOADING);
+    }
+
+    @Test
+    public void testGetPercentageDifferenceForSameElement() {
+        Image firstImage = DynamicLoadingForm.getStartLabel().visual().getImage();
+        Image secondImage = DynamicLoadingForm.getStartLabel().visual().getImage();
+
+        Assert.assertEquals(imageComparator.percentageDifference(firstImage, secondImage), 0);
+    }
+
+    @Test
+    public void testGetPercentageDifferenceForSameElementWithZeroThreshold() {
+        Image firstImage = DynamicLoadingForm.getStartLabel().visual().getImage();
+        Image secondImage = DynamicLoadingForm.getStartLabel().visual().getImage();
+
+        Assert.assertEquals(imageComparator.percentageDifference(firstImage, secondImage, 0), 0);
+    }
+
+    @Test
+    public void testGetPercentageDifferenceForDifferentElements() {
+        Image firstImage = DynamicLoadingForm.getStartLabel().visual().getImage();
+        startLoading();
+        Image secondImage = DynamicLoadingForm.getLoadingLabel().visual().getImage();
+
+        Assert.assertNotEquals(imageComparator.percentageDifference(firstImage, secondImage), 0);
+    }
+
+    @Test
+    public void testGetPercentageDifferenceForDifferentElementsWithFullThreshold() {
+        final int threshold = 1;
+        Image firstImage = DynamicLoadingForm.getStartLabel().visual().getImage();
+        startLoading();
+        Image secondImage = DynamicLoadingForm.getLoadingLabel().visual().getImage();
+
+        Assert.assertEquals(imageComparator.percentageDifference(firstImage, secondImage, threshold), 0);
+    }
+
+    @Test
+    public void testGetPercentageDifferenceForSimilarElements() throws InterruptedException {
+        startLoading();
+        Image firstImage = DynamicLoadingForm.getLoadingLabel().visual().getImage();
+        Thread.sleep(300);
+        Image secondImage = DynamicLoadingForm.getLoadingLabel().visual().getImage();
+
+        Assert.assertTrue(imageComparator.percentageDifference(firstImage, secondImage, 0) != 0,
+                "With zero threshold, there should be some difference");
+        Assert.assertTrue(imageComparator.percentageDifference(firstImage, secondImage, 0.2f) <= 0.3,
+                "With 0.2f threshold, the difference should be less or equal than 0.3");
+        Assert.assertTrue(imageComparator.percentageDifference(firstImage, secondImage, 0.4f) <= 0.2,
+                "With 0.4f threshold, the difference should be less or equal than 0.2");
+        Assert.assertTrue(imageComparator.percentageDifference(firstImage, secondImage, 0.6f) <= 0.1,
+                "With 0.6f threshold, the difference should be less or equal than 0.1");
+        Assert.assertEquals(imageComparator.percentageDifference(firstImage, secondImage, 0.6f), 0,
+                "With 0.8f threshold, the difference should be 0");
+    }
+}