feat: implement disableHover, improve safeArea computation and other assertView fixes

.eslintignore

@@ -6,4 +6,5 @@ bundle.compat.js
 bundle.native.js
 wt
 test/e2e/report
+test/e2e/static/basic-report
 tmp

.prettierignore

@@ -11,3 +11,4 @@ bundle.native.js
 wt/**
 test/e2e/report
 tmp/**
+.testplane/**

package.json

@@ -34,7 +34,9 @@
     "test-unit": "npm run create-client-scripts-symlinks && _mocha \"test/!(integration|e2e)/**/*.js\"",
     "test": "npm run test-unit && npm run check-types && npm run lint",
     "test-integration": "npm run create-client-scripts-symlinks && mocha -r ts-node/register -r test/integration/*/**",
-    "test-e2e": "node bin/testplane --config test/e2e/testplane.config.ts",
+    "test-e2e": "npm run test-e2e:generate-fixtures && npm run test-e2e:run-tests",
+    "test-e2e:run-tests": "node bin/testplane --config test/e2e/testplane.config.ts",
+    "test-e2e:generate-fixtures": "node bin/testplane --config test/e2e/fixtures/basic-report/testplane.config.ts",
     "test-e2e:gui": "node bin/testplane --config test/e2e/testplane.config.ts gui",
     "toc": "doctoc docs --title '### Contents'",
     "precommit": "npm run lint",

src/browser/camera/index.ts

@@ -1,6 +1,9 @@
 import _ from "lodash";
 import { Image } from "../../image";
 import * as utils from "./utils";
+import makeDebug from "debug";
+
+const debug = makeDebug("testplane:screenshots:camera");
 
 export interface ImageArea {
     left: number;
@@ -41,15 +44,16 @@ export class Camera {
         this._calibration = calibration;
     }
 
-    async captureViewportImage(page?: PageMeta): Promise<Image> {
+    /** @param viewport - Current state of the viewport. Top/left denote scroll offsets, width/height denote viewport size. */
+    async captureViewportImage(viewport?: ImageArea): Promise<Image> {
         const base64 = await this._takeScreenshot();
         const image = Image.fromBase64(base64);
 
         const { width, height } = await image.getSize();
         const imageArea: ImageArea = { left: 0, top: 0, width, height };
 
         const calibratedArea = this._calibrateArea(imageArea);
-        const viewportCroppedArea = this._cropAreaToViewport(calibratedArea, page);
+        const viewportCroppedArea = this._cropAreaToViewport(calibratedArea, viewport);
 
         if (viewportCroppedArea.width !== width || viewportCroppedArea.height !== height) {
             await image.crop(viewportCroppedArea);
@@ -68,23 +72,28 @@ export class Camera {
         return { left, top, width: imageArea.width - left, height: imageArea.height - top };
     }
 
-    private _cropAreaToViewport(imageArea: ImageArea, page?: PageMeta): ImageArea {
-        if (!page) {
+    /* On some browsers, e.g. older firefox versions, the screenshot returned by the browser can be the whole page
+       (even beyond the viewport, potentially spanning thousands of pixels down).
+       This function is used to detect such cases and crop the image to the viewport, always. */
+    private _cropAreaToViewport(imageArea: ImageArea, viewport?: ImageArea): ImageArea {
+        if (!viewport) {
             return imageArea;
         }
 
-        const isFullPage = utils.isFullPage(imageArea, page, this._screenshotMode);
-        const cropArea = _.clone(page.viewport);
+        const isFullPage = utils.isFullPage(imageArea, viewport, this._screenshotMode);
+        const cropArea = _.clone(viewport);
 
         if (!isFullPage) {
             _.extend(cropArea, { top: 0, left: 0 });
         }
-
-        return {
-            left: imageArea.left + cropArea.left,
-            top: imageArea.top + cropArea.top,
-            width: Math.min(imageArea.width - cropArea.left, cropArea.width),
-            height: Math.min(imageArea.height - cropArea.top, cropArea.height),
-        };
+        debug(
+            "cropping area to viewport. imageArea: %O, viewport: %O, cropArea: %O, isFullPage: %s",
+            imageArea,
+            viewport,
+            cropArea,
+            isFullPage,
+        );
+
+        return utils.getIntersection(imageArea, cropArea);
     }
 }

src/browser/camera/utils.ts

@@ -1,16 +1,26 @@
-import { ImageArea, PageMeta, ScreenshotMode } from ".";
+import { ImageArea, ScreenshotMode } from ".";
 
-export const isFullPage = (imageArea: ImageArea, page: PageMeta, screenshotMode: ScreenshotMode): boolean => {
+export const isFullPage = (imageArea: ImageArea, viewport: ImageArea, screenshotMode: ScreenshotMode): boolean => {
     switch (screenshotMode) {
         case "fullpage":
             return true;
         case "viewport":
             return false;
         case "auto":
-            return compareDimensions(imageArea, page);
+            return imageArea.height > viewport.height || imageArea.width > viewport.width;
     }
 };
 
-function compareDimensions(imageArea: ImageArea, page: PageMeta): boolean {
-    return imageArea.height >= page.documentHeight && imageArea.width >= page.documentWidth;
-}
+export const getIntersection = (area1: ImageArea, area2: ImageArea): ImageArea => {
+    const left = Math.max(area1.left, area2.left);
+    const top = Math.max(area1.top, area2.top);
+    const right = Math.min(area1.left + area1.width, area2.left + area2.width);
+    const bottom = Math.min(area1.top + area1.height, area2.top + area2.height);
+
+    return {
+        left,
+        top,
+        width: Math.max(0, right - left),
+        height: Math.max(0, bottom - top),
+    };
+};