Adding support for Android devices

.gitignore

@@ -9,3 +9,6 @@ yarn.lock
 # project
 .tmp
 lib
+
+# Mac OSX
+.DS_Store

src/utils/ScreenDimension.js

@@ -83,7 +83,7 @@ export default class ScreenDimensions {
   }
 
   getScale() {
-    if (this.isIOS) {
+    if (this.isIOS || this.isAndroid) {
       return this.getScreenWidth() / this.getViewportWidth();
     }
     return 1;

src/utils/ScreenshotStrategyManager.js

@@ -26,8 +26,8 @@ export default class ScreenshotStrategyManager {
       return new FullpageScreenshotStrategy(screenDimensions);
     }
 
-    const { isIOS } = browser;
-    if (isIOS) {
+    const { isMobile } = browser;
+    if (isMobile) {
       log('use iOS Trim and Merge viewport strategy')
       return new TrimAndMergeViewportStrategy(screenDimensions);
     }

src/utils/mobile/fixedHeights.js

@@ -0,0 +1,10 @@
+export default {
+  android: {
+    toolbarHeight: 43,
+    addressbarHeight: 77
+  },
+  iOS: {
+    toolbarHeight: 44,
+    addressbarHeight: 44
+  }
+};

src/utils/normalizeScreenshot.js

@@ -1,6 +1,7 @@
 import CropDimension from './CropDimension';
 import getBase64ImageSize from './getBase64ImageSize';
 import { cropImage, scaleImage } from './image';
+import fixedHeights from './mobile/fixedHeights';
 
 async function normalizeRetinaScreenshot(browser, screenDimensions, base64Screenshot) {
     // check if image dimensions are different to viewport as browsers like firefox scales images automatically down
@@ -18,16 +19,19 @@ async function normalizeRetinaScreenshot(browser, screenDimensions, base64Screen
     return base64Screenshot;
 }
 
-async function normalizeIOSScreenshot(browser, screenDimensions, base64Screenshot) {
-  const toolbarHeight = 44; // bottom toolbar has always a fixed height of 44px
-  const addressbarHeight = 44; // bottom toolbar has always a fixed height of 44px
+async function normalizeMobileScreenshot(browser, screenDimensions, base64Screenshot) {
+  const mobileFixedHeights = (browser.isAndroid) ? fixedHeights.android : fixedHeights.iOS;
+  const toolbarHeight = mobileFixedHeights.toolbarHeight;
+  const addressbarHeight = mobileFixedHeights.addressbarHeight;
 
   const viewportHeight = screenDimensions.applyScaleFactor(screenDimensions.getViewportHeight());
   const viewportWidth = screenDimensions.applyScaleFactor(screenDimensions.getViewportWidth());
+  let isIpad = false;
 
   // all iPad's have 1024..
-  const isIpad = screenDimensions.getScreenHeight() === 1024 || screenDimensions.getScreenWidth() === 1024;
-  const isIphone = !isIpad;
+  if (browser.isIOS) {
+    isIpad = screenDimensions.getScreenHeight() === 1024 || screenDimensions.getScreenWidth() === 1024;
+  }
 
   // detect if status bar + navigation bar is shown
   const barsShown = viewportHeight < screenDimensions.getScreenHeight();
@@ -37,7 +41,7 @@ async function normalizeIOSScreenshot(browser, screenDimensions, base64Screensho
     // calculate height of status + addressbar
     barsHeight = screenDimensions.getScreenHeight() - viewportHeight;
 
-    if (isIphone && barsHeight > addressbarHeight) {
+    if (!isIpad && barsHeight > addressbarHeight) {
       // iPhone's have also sometimes toolbar at the bottom when navigation bar is shown, need to consider that
       barsHeight -= toolbarHeight;
     }
@@ -58,18 +62,18 @@ async function normalizeIOSScreenshot(browser, screenDimensions, base64Screensho
   return base64Screenshot;
 }
 
-
-export default async function normalizeSreenshot(browser, screenDimensions, base64Screenshot) {
+export default async function normalizeScreenshot(browser, screenDimensions, base64Screenshot) {
   let normalizedScreenshot = base64Screenshot;
 
   // check if we could have a retina image
   if (screenDimensions.getPixelRatio() > 1) {
     normalizedScreenshot = await normalizeRetinaScreenshot(browser, screenDimensions, normalizedScreenshot);
   }
 
-  // check if we have to crop navigation- & toolbar for iOS
-  if (browser.isMobile && browser.isIOS) {
-    normalizedScreenshot = await normalizeIOSScreenshot(browser, screenDimensions, normalizedScreenshot);
+  // check if we have to crop navigation- & toolbar for iOS or Android
+  if (browser.isMobile) {
+    normalizedScreenshot = await normalizeMobileScreenshot(browser, screenDimensions, normalizedScreenshot);
   }
+
   return normalizedScreenshot;
 }

test/fixture/screenshot/android/v5.1/started_in_landscape/dimensions.json

@@ -0,0 +1,21 @@
+{
+  "body": {
+    "offsetHeight": 0,
+    "scrollHeight": 480
+  },
+  "window": {
+    "pixelRatio": 2,
+    "orientation": 0,
+    "innerWidth": 320,
+    "screenHeight": 480,
+    "innerHeight": 403,
+    "screenWidth": 320
+  },
+  "html": {
+    "clientWidth": 320,
+    "offsetHeight": 0,
+    "scrollWidth": 320,
+    "clientHeight": 480,
+    "scrollHeight": 0
+  }
+}

test/fixture/screenshot/android/v5.1/started_in_landscape_rotated_back/dimensions.json

@@ -0,0 +1,21 @@
+{
+  "body": {
+    "offsetHeight": 0,
+    "scrollHeight": 480
+  },
+  "window": {
+    "pixelRatio": 2,
+    "orientation": 0,
+    "innerWidth": 320,
+    "screenHeight": 480,
+    "innerHeight": 403,
+    "screenWidth": 320
+  },
+  "html": {
+    "clientWidth": 320,
+    "offsetHeight": 0,
+    "scrollWidth": 320,
+    "clientHeight": 480,
+    "scrollHeight": 0
+  }
+}

test/fixture/screenshot/android/v5.1/started_in_landscape_rotated_to_portrait/dimensions.json

@@ -0,0 +1,21 @@
+{
+  "body": {
+    "offsetHeight": 0,
+    "scrollHeight": 480
+  },
+  "window": {
+    "pixelRatio": 2,
+    "orientation": 0,
+    "innerWidth": 320,
+    "screenHeight": 480,
+    "innerHeight": 403,
+    "screenWidth": 320
+  },
+  "html": {
+    "clientWidth": 320,
+    "offsetHeight": 0,
+    "scrollWidth": 320,
+    "clientHeight": 480,
+    "scrollHeight": 0
+  }
+}

test/fixture/screenshot/android/v5.1/started_in_portrait/dimensions.json

@@ -0,0 +1,21 @@
+{
+  "body": {
+    "offsetHeight": 0,
+    "scrollHeight": 480
+  },
+  "window": {
+    "pixelRatio": 2,
+    "orientation": 0,
+    "innerWidth": 320,
+    "screenHeight": 480,
+    "innerHeight": 403,
+    "screenWidth": 320
+  },
+  "html": {
+    "clientWidth": 320,
+    "offsetHeight": 0,
+    "scrollWidth": 320,
+    "clientHeight": 480,
+    "scrollHeight": 0
+  }
+}

test/fixture/screenshot/android/v5.1/started_in_portrait_rotated_back/dimensions.json

@@ -0,0 +1,21 @@
+{
+  "body": {
+    "offsetHeight": 0,
+    "scrollHeight": 480
+  },
+  "window": {
+    "pixelRatio": 2,
+    "orientation": 0,
+    "innerWidth": 320,
+    "screenHeight": 480,
+    "innerHeight": 403,
+    "screenWidth": 320
+  },
+  "html": {
+    "clientWidth": 320,
+    "offsetHeight": 0,
+    "scrollWidth": 320,
+    "clientHeight": 480,
+    "scrollHeight": 0
+  }
+}

test/fixture/screenshot/android/v5.1/started_in_portrait_rotated_to_landscape/dimensions.json

@@ -0,0 +1,21 @@
+{
+  "body": {
+    "offsetHeight": 0,
+    "scrollHeight": 480
+  },
+  "window": {
+    "pixelRatio": 2,
+    "orientation": 0,
+    "innerWidth": 320,
+    "screenHeight": 480,
+    "innerHeight": 403,
+    "screenWidth": 320
+  },
+  "html": {
+    "clientWidth": 320,
+    "offsetHeight": 0,
+    "scrollWidth": 320,
+    "clientHeight": 480,
+    "scrollHeight": 0
+  }
+}

test/helper/compareImages.js

@@ -7,7 +7,7 @@ export default function compareImages(image1, image2, misMatchPercentage = 0.2)
   return new Promise((resolve) => {
     const image = resemble(image1).compareTo(image2);
     image.onComplete((data) => {
-      assert.isTrue(data.isSameDimensions, `different dimensions, see "${image1}" and "${image2}"`);
+      assert.isTrue(data.isSameDimensions, `different dimensions ${JSON.stringify(data.dimensionDifference)}, see "${image1}" and "${image2}"`);
       assert.closeTo(Number(data.misMatchPercentage), 0, misMatchPercentage, `different images, see "${image1}" and "${image2}"`);
       resolve();
     });

test/unit/utils/normalizeScreenshot.test.js

@@ -147,4 +147,66 @@ describe('normalizeScreenshot', function() {
 
   });
 
+  context('Android', function() {
+    const androidDir = path.join(screenshotDir, 'android');
+    const files = glob.sync('**/screenshot.png', {cwd: androidDir});
+
+    const data = files.map((file) => {
+      const dir = path.dirname(file);
+      const [ version, device, test ] = _.times(2)
+        .reduce((f, v, i) => f.concat(path.dirname(f[f.length -1])), [dir])
+        .reverse()
+        .map((f) => path.basename(f).replace(/_/g, ' '))
+
+      return {
+        version,
+        device,
+        test,
+        screenshotFile: path.join(androidDir, file),
+        expectedScreenshotFile: path.join(androidDir, dir, 'expected.png'),
+        dimensionsFile: path.join(androidDir, dir, 'dimensions.json'),
+        skipFile: path.join(androidDir, dir, '.SKIP'),
+        dir,
+      };
+    });
+
+    const testData = _.mapValues(_.groupBy(data, "version"), (list) => _.groupBy(list, "device"));
+
+    _.mapKeys(testData, (devices, version) => {
+      context(version, function () {
+        _.mapKeys(devices, (list, device) => {
+          context(device, function () {
+            list.forEach(({ test, screenshotFile, expectedScreenshotFile, dimensionsFile, skipFile, dir }) => {
+              it(test, async function () {
+                const browser = {
+                  isMobile: true,
+                  isIOS: false,
+                  isAndroid: true
+                };
+
+                const skip = await fsExtra.exists(skipFile);
+                if (skip) {
+                  this.skip();
+                  return;
+                }
+                const dimensions = await fsExtra.readJson(dimensionsFile);
+                const base64Screenshot = await readAsBase64(screenshotFile);
+                const screenDimensions = new ScreenDimension(dimensions, browser);
+
+                const normalizedSreenshot = await normalizeScreenshot(browser, screenDimensions, base64Screenshot);
+                const normalizedSreenshotPath = path.join(tmpPath, 'normalizeScreenshot', dir, 'normalized.png');
+                await saveBase64Image(normalizedSreenshotPath, normalizedSreenshot);
+                await readAsBase64(expectedScreenshotFile); // just to check if it exists
+
+                await compareImages(normalizedSreenshotPath, expectedScreenshotFile, 0.001);
+              });
+            });
+          });
+        });
+      });
+    });
+
+
+  });
+
 });