feat: improve and refactor screen-shooter and split it into 3 versions (#1240)

Author: shadowusr

src/browser/commands/assert-view/index.js

@@ -5,7 +5,8 @@ const path = require("path");
 const _ = require("lodash");
 const { pngValidator: validatePng } = require("png-validator");
 const { Image } = require("../../../image");
-const { ScreenShooter } = require("../../screen-shooter");
+const { ElementsScreenShooter } = require("../../screen-shooter/elements-screen-shooter");
+const { ViewportScreenShooter } = require("../../screen-shooter/viewport-screen-shooter");
 const temp = require("../../../temp");
 const { getCaptureProcessors } = require("./capture-processors");
 const RuntimeConfig = require("../../../config/runtime-config");
@@ -31,7 +32,21 @@ const getIgnoreDiffPixelCountRatio = value => {
 };
 
 module.exports.default = browser => {
-    const screenShooter = ScreenShooter.create(browser);
+    const browserProperties = {
+        isWebdriverProtocol: browser.isWebdriverProtocol,
+        shouldUsePixelRatio: browser.shouldUsePixelRatio,
+        needsCompatLib: browser.needsCompatLib,
+    };
+    const screenShooterPromise = ElementsScreenShooter.create({
+        camera: browser.camera,
+        browser: browser.publicAPI,
+        browserProperties,
+    });
+    const viewportScreenShooterPromise = ViewportScreenShooter.create({
+        camera: browser.camera,
+        browser: browser.publicAPI,
+        browserProperties,
+    });
     const { publicAPI: session, config } = browser;
     const {
         assertViewOpts,
@@ -45,28 +60,20 @@ module.exports.default = browser => {
 
     const { handleNoRefImage, handleImageDiff, handleInvalidRefImage } = getCaptureProcessors();
 
-    const assertView = async (state, selectors, opts) => {
-        opts = _.defaults(opts, assertViewOpts, {
+    const getDefaultOpts = opts =>
+        _.defaults(opts, assertViewOpts, {
             compositeImage,
             screenshotDelay,
             tolerance,
             antialiasingTolerance,
             disableAnimation,
         });
 
+    const compareScreenshot = async (state, currImgInst, currImgMeta, opts) => {
         const { testplaneCtx } = session.executionContext;
         const test = session.executionContext.ctx.currentTest;
         testplaneCtx.assertViewResults = testplaneCtx.assertViewResults || AssertViewResults.create();
 
-        let debugId = "debugId";
-        try {
-            debugId = `${test.fullTitle()}.${browser.id}.${state}`;
-        } catch {
-            /**/
-        }
-        debug(`[${debugId}] assertView selectors: %O`, selectors);
-        debug(`[${debugId}] assertView opts: %O`, opts);
-
         if (testplaneCtx.assertViewResults.hasState(state)) {
             return Promise.reject(new AssertViewError(`duplicate name for "${state}" state`));
         }
@@ -77,7 +84,6 @@ module.exports.default = browser => {
         const { tempOpts } = RuntimeConfig.getInstance();
         temp.attach(tempOpts);
 
-        const { image: currImgInst, meta: currImgMeta } = await screenShooter.capture(selectors, opts);
         const currSize = await currImgInst.getSize();
         const currImg = { path: temp.path(Object.assign(tempOpts, { suffix: ".png" })), size: currSize };
 
@@ -153,11 +159,44 @@ module.exports.default = browser => {
         testplaneCtx.assertViewResults.add({ stateName: state, refImg: refImg });
     };
 
+    const assertView = async (state, selectors, opts) => {
+        opts = getDefaultOpts(opts);
+
+        let debugId = "debugId";
+        try {
+            const test = session.executionContext.ctx.currentTest;
+            debugId = `${test.fullTitle()}.${browser.id}.${state}`;
+            opts.debugId = debugId;
+        } catch {
+            /**/
+        }
+        debug(`[${debugId}] assertView selectors: %O`, selectors);
+        debug(`[${debugId}] assertView opts: %O`, opts);
+
+        const screenShooter = await screenShooterPromise;
+        const { image, meta } = await screenShooter.capture(selectors, opts);
+
+        return compareScreenshot(state, image, meta, opts);
+    };
+
+    const PSEUDO_SELECTOR_REGEXP = /(.*?)(::before|::after)\s*$/i;
+    const getSelectorToWaitForExist = selector => {
+        if (!_.isString(selector)) {
+            return selector;
+        }
+        const match = selector.match(PSEUDO_SELECTOR_REGEXP);
+        if (!match) {
+            return selector;
+        }
+        const elementSelector = match[1].trim();
+        return elementSelector || selector;
+    };
+
     const waitSelectorsForExist = async (browser, selectors) => {
         await Promise.all(
             [].concat(selectors).map(selector =>
                 browser
-                    .$(selector)
+                    .$(getSelectorToWaitForExist(selector))
                     .then(el => el.waitForExist())
                     .catch(() => {
                         throw new Error(
@@ -175,13 +214,14 @@ module.exports.default = browser => {
     };
 
     const assertViewByViewport = async (state, opts) => {
-        opts = Object.assign(opts, {
-            allowViewportOverflow: true,
-            compositeImage: false,
-            captureElementFromTop: false,
-        });
+        opts = getDefaultOpts(opts);
+
+        debug(`assertViewByViewport state: ${state}, opts: %O`, opts);
+
+        const vpScreenShooter = await viewportScreenShooterPromise;
+        const { image, meta } = await vpScreenShooter.capture(opts);
 
-        return assertView(state, "body", opts);
+        return compareScreenshot(state, image, meta, opts);
     };
 
     const shouldAssertViewport = selectorsOrOpts => {

src/browser/existing-browser.ts

@@ -4,8 +4,8 @@ import { attach, type AttachOptions, type ElementArray } from "@testplane/webdri
 import { sessionEnvironmentDetector } from "@testplane/wdio-utils";
 import { Browser, BrowserOpts } from "./browser";
 import { customCommandFileNames } from "./commands";
-import { Camera, ImageArea } from "./camera";
-import { type ClientBridge, build as buildClientBridge } from "./client-bridge";
+import { Camera, CaptureViewportImageOpts } from "./camera";
+import { ClientBridge } from "./client-bridge";
 import * as history from "./history";
 import * as logger from "../utils/logger";
 import { WEBDRIVER_PROTOCOL } from "../constants/config";
@@ -19,6 +19,7 @@ import { NEW_ISSUE_LINK } from "../constants/help";
 import type { SessionOptions } from "./types";
 import { Page } from "puppeteer-core";
 import { CDP } from "./cdp";
+import type * as browserSideUtilsImplementation from "./client-scripts/browser-utils/implementation";
 
 const OPTIONAL_SESSION_OPTS = ["transformRequest", "transformResponse"];
 
@@ -30,7 +31,6 @@ interface ScrollByParams {
 
 const BROWSER_SESSION_HINT = "browser session";
 const CDP_CONNECTION_HINT = "cdp connection";
-const CLIENT_BRIDGE_HINT = "client bridge";
 
 function ensure<T>(value: T | undefined | null, hint?: string): asserts value is T {
     if (!value) {
@@ -73,7 +73,7 @@ export class ExistingBrowser extends Browser {
     protected _camera: Camera;
     protected _meta: Record<string, unknown>;
     protected _calibration?: CalibrationResult;
-    protected _clientBridge?: ClientBridge;
+    protected _browserSideUtils?: ClientBridge<typeof browserSideUtilsImplementation>;
     protected _cdp: CDP | null = null;
     protected _tags: Set<string> = new Set();
 
@@ -125,7 +125,7 @@ export class ExistingBrowser extends Browser {
 
                 await this._prepareSession();
                 await this._performCalibration(calibrator);
-                await this._buildClientScripts();
+                await this._initBrowserSideUtils();
             },
         );
 
@@ -167,11 +167,6 @@ export class ExistingBrowser extends Browser {
         return this._session.execute(script);
     }
 
-    callMethodOnBrowserSide<T>(name: string, args: unknown[] = []): Promise<T> {
-        ensure(this._clientBridge, CLIENT_BRIDGE_HINT);
-        return this._clientBridge.call(name, args);
-    }
-
     get shouldUsePixelRatio(): boolean {
         return this._calibration ? this._calibration.usePixelRatio : true;
     }
@@ -180,6 +175,10 @@ export class ExistingBrowser extends Browser {
         return this._config.automationProtocol === WEBDRIVER_PROTOCOL;
     }
 
+    get needsCompatLib(): boolean {
+        return this._calibration ? this._calibration.needsCompatLib : false;
+    }
+
     async captureViewportImage(opts?: CaptureViewportImageOpts, screenshotDelay?: number): Promise<Image> {
         if (screenshotDelay) {
             await new Promise(resolve => setTimeout(resolve, screenshotDelay));
@@ -327,8 +326,8 @@ export class ExistingBrowser extends Browser {
                     this.restoreHttpTimeout();
                 }
 
-                if (this._clientBridge) {
-                    await this._clientBridge.call("resetZoom");
+                if (this._browserSideUtils) {
+                    await this._browserSideUtils.call("resetZoom", []);
                 }
 
                 return result;
@@ -473,10 +472,10 @@ export class ExistingBrowser extends Browser {
         });
     }
 
-    protected async _buildClientScripts(): Promise<ClientBridge> {
-        return buildClientBridge(this, { calibration: this._calibration }).then(
-            clientBridge => (this._clientBridge = clientBridge),
-        );
+    protected async _initBrowserSideUtils(): Promise<ClientBridge<typeof browserSideUtilsImplementation>> {
+        return ClientBridge.create(this._session!, "browser-utils", {
+            needsCompatLib: this._calibration?.needsCompatLib,
+        }).then(clientBridge => (this._browserSideUtils = clientBridge));
     }
 
     _stubCommands(): void {

src/browser/screen-shooter/composite-image/debug-utils.ts

@@ -4,7 +4,7 @@ import { convertRgbaToPng } from "../../../utils/eight-bit-rgba-to-png";
 import { loadEsm } from "../../../utils/preload-utils";
 import type { Coord, Rect, Size, YBand } from "../../isomorphic/geometry";
 import path from "node:path";
-import { CaptureSpec } from "../../client-scripts/screen-shooter/types";
+import type { CaptureSpec } from "../../client-scripts/screen-shooter/types";
 
 type DebugRectColor = { r: number; g: number; b: number; a: number };