webdriver-image-comparison - npm Package Compare versions

Comparing version 4.1.0 to 5.0.0

CHANGELOG.md

 # webdriver-image-comparison
 
+## 5.0.0
+
+### Major Changes
+
+- b717d9a: # 💥 Breaking changes
+
+  - the new element screenshot is producing "smaller" screenshots on certain Android OS versions (not all), but it's more "accurate" so we accept this
+
+  # 🚀 New Features
+
+  ## Add StoryBook📖 support
+
+  Automatically scan local/remote storybook instances to create element screenshots of each component by adding
+
+  ```ts
+  export const config: Options.Testrunner = {
+    // ...
+    services: ["visual"],
+    // ....
+  };
+  ```
+
+  to your `services` and running `npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook` through the command line.
+  It will automatically use Chrome. The following options can be provided through the command line
+
+  - `--headless`, defaults to `true`
+  - `--numShards {number}`, this will be the amount of parallel instances that will be used to run the stories. This will be limited by the `maxInstances` in your `wdio.conf`-file. When running in `headless`-mode then do not increase the number to more than 20 to prevent flakiness
+  - `--clip {boolean}`, try to take an element instead of a viewport screenshot, defaults to `true`
+  - `--clipSelector {string}`, this is the selector that will be used to:
+
+    - select the element to take the screenshot of
+    - the element to wait for to be visible before a screenshot is taken
+
+    defaults to `#storybook-root > :first-child` for V7 and `#root > :first-child:not(script):not(style)` for V6
+
+  - `--version`, the version of storybook, defaults to 7. This is needed to know if the V6 `clipSelector` needs to be used.
+  - `--browsers {edge,chrome,safari,firefox}`, defaults to Chrome
+  - `--skipStories`, this can be:
+    - a string (`example-button--secondary,example-button--small`)
+    - or a regex (`"/.*button.*/gm"`) to skip certain stories
+
+  You can also provide service options
+
+  ```ts
+  export const config: Options.Testrunner = {
+      // ...
+      services: [
+        [
+          'visual',
+          {
+              // Some default options
+              baselineFolder: join(process.cwd(), './__snapshots__/'),
+              debug: true,
+              // The storybook options
+              storybook: {
+                  clip: false,
+                  clipSelector: ''#some-id,
+                  numShards: 4,
+                  skipStories: ['example-button--secondary', 'example-button--small'],
+                  url: 'https://www.bbc.co.uk/iplayer/storybook/',
+                  version: 6,
+              },
+          },
+        ],
+      ],
+      // ....
+  }
+  ```
+
+  The baseline images will be stored in the following structure:
+
+  ```log
+  {projectRoot}
+  |_`__snapshots__`
+    |_`{category}`
+      |_`{componentName}`
+        |_{browserName}
+          |_`{{component-id}-element-{browser}-{resolution}-dpr-{dprValue}}.png`
+  ```
+
+  which will look like this
+
+  ![image](https://github.com/webdriverio/visual-testing/assets/11979740/7c41a8b4-2498-4e85-be11-cb1ec601b760)
+
+  > [!NOTE]
+  > Storybook 6.5 or higher is supported
+
+  # 💅 Polish
+
+  - `hideScrollBars` is disabled by default when using the Storybook runner
+  - By default, all element screenshots in the browser, except for iOS, will use the native method to take element screenshots. This will make taking an element screenshot more than 5% faster. If it fails it will fall back to the "viewport" screenshot and create a cropped element screenshot.
+  - Taking an element screenshot becomes 70% faster due to removing the fixed scroll delay of 500ms and changing the default scrolling behaviour to an instant scroll
+  - refactor web element screenshots and update the screenshots
+  - added more UTs to increase the coverage
+
+  # 🐛 Bug Fixes
+
+  - When the element has no height or width, we default to the viewport screen size to prevent not cropping any screenshot. An error like below will be logged in red
+
+  ```logs
+
+  The element has no width or height. We defaulted to the viewport screen size of width: ${width} and height: ${height}.
+
+  ```
+
+  - There were cases where element screenshots were automatically rotated which was not intended
+
 ## 4.1.0
@@ -4,0 +111,0 @@

dist/clientSideScripts/scrollElementIntoView.js

@@ -5,8 +5,11 @@ "use strict";
     var currentPosition = 0;
-    var htmlNode = document.querySelector('html');
-    var bodyNode = document.querySelector('body');
+    var htmlNode = document.documentElement;
+    var bodyNode = document.body;
+    var styleTag = document.createElement('style');
+    styleTag.innerHTML = '* { scroll-behavior: unset !important; }';
+    document.head.appendChild(styleTag);
     if (htmlNode.scrollTop > 0) {
         currentPosition = htmlNode.scrollTop;
     }
-    if (bodyNode.scrollTop > 0) {
+    else if (bodyNode.scrollTop > 0) {
         currentPosition = bodyNode.scrollTop;
@@ -18,12 +21,7 @@ }
         htmlNode.scrollTop = yPosition;
-        if (htmlNode.scrollTop === yPosition) {
-            return currentPosition;
-        }
     }
-    if (bodyNode.scrollHeight > bodyNode.clientHeight) {
+    else if (bodyNode.scrollHeight > bodyNode.clientHeight) {
         bodyNode.scrollTop = yPosition;
-        if (bodyNode.scrollTop === yPosition) {
-            return currentPosition;
-        }
     }
+    document.head.removeChild(styleTag);
     return currentPosition;
@@ -30,0 +28,0 @@ }

dist/commands/saveWebElement.js

@@ -46,3 +46,2 @@ "use strict";
 var afterScreenshot_js_1 = __importDefault(require("../helpers/afterScreenshot.js"));
-var rectangles_js_1 = require("../methods/rectangles.js");
 var constants_js_1 = require("../helpers/constants.js");
@@ -54,8 +53,8 @@ var scrollElementIntoView_js_1 = __importDefault(require("../clientSideScripts/scrollElementIntoView.js"));
     return __awaiter(this, void 0, void 0, function () {
-        var _a, addressBarShadowPadding, autoElementScroll, formatImageName, logLevel, savePerInstance, toolBarShadowPadding, executor, disableCSSAnimation, enableLayoutTesting, hideScrollBars, resizeDimensions, hideElements, removeElements, waitForFontsLoaded, beforeOptions, enrichedInstanceData, browserName, browserVersion, deviceName, _b, devicePixelRatio, innerHeight, isLandscape, outerHeight, outerWidth, screenHeight, screenWidth, isAndroid, isAndroidNativeWebScreenshot, isIOS, isMobile, isTestInBrowser, logName, name, platformName, platformVersion, currentPosition, base64Image, elementRectangleOptions, rectangles, croppedBase64Image, afterOptions;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+        var _a, addressBarShadowPadding, autoElementScroll, formatImageName, logLevel, savePerInstance, toolBarShadowPadding, executor, screenShot, takeElementScreenshot, disableCSSAnimation, enableLayoutTesting, hideScrollBars, resizeDimensions, hideElements, removeElements, waitForFontsLoaded, beforeOptions, enrichedInstanceData, browserName, browserVersion, deviceName, _b, devicePixelRatio, innerHeight, isLandscape, outerHeight, outerWidth, screenHeight, screenWidth, isAndroid, isAndroidNativeWebScreenshot, isIOS, isMobile, isTestInBrowser, logName, name, platformName, platformVersion, currentPosition, _c, base64Image, rectangles, isWebDriverElementScreenshot, _d, height, width, croppedBase64Image, afterOptions;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
                 case 0:
                     _a = saveElementOptions.wic, addressBarShadowPadding = _a.addressBarShadowPadding, autoElementScroll = _a.autoElementScroll, formatImageName = _a.formatImageName, logLevel = _a.logLevel, savePerInstance = _a.savePerInstance, toolBarShadowPadding = _a.toolBarShadowPadding;
-                    executor = methods.executor;
+                    executor = methods.executor, screenShot = methods.screenShot, takeElementScreenshot = methods.takeElementScreenshot;
                     disableCSSAnimation = saveElementOptions.method.disableCSSAnimation !== undefined
@@ -90,18 +89,14 @@ ? Boolean(saveElementOptions.method.disableCSSAnimation)
                 case 1:
-                    enrichedInstanceData = _c.sent();
+                    enrichedInstanceData = _e.sent();
                     browserName = enrichedInstanceData.browserName, browserVersion = enrichedInstanceData.browserVersion, deviceName = enrichedInstanceData.deviceName, _b = enrichedInstanceData.dimensions.window, devicePixelRatio = _b.devicePixelRatio, innerHeight = _b.innerHeight, isLandscape = _b.isLandscape, outerHeight = _b.outerHeight, outerWidth = _b.outerWidth, screenHeight = _b.screenHeight, screenWidth = _b.screenWidth, isAndroid = enrichedInstanceData.isAndroid, isAndroidNativeWebScreenshot = enrichedInstanceData.isAndroidNativeWebScreenshot, isIOS = enrichedInstanceData.isIOS, isMobile = enrichedInstanceData.isMobile, isTestInBrowser = enrichedInstanceData.isTestInBrowser, logName = enrichedInstanceData.logName, name = enrichedInstanceData.name, platformName = enrichedInstanceData.platformName, platformVersion = enrichedInstanceData.platformVersion;
-                    if (!autoElementScroll) return [3, 4];
+                    if (!autoElementScroll) return [3, 3];
                     return [4, executor(scrollElementIntoView_js_1.default, element, addressBarShadowPadding)];
                 case 2:
-                    currentPosition = _c.sent();
-                    return [4, (0, utils_js_1.waitFor)(500)];
-                case 3:
-                    _c.sent();
-                    _c.label = 4;
-                case 4: return [4, (0, screenshots_js_1.takeBase64Screenshot)(methods.screenShot)];
-                case 5:
-                    base64Image = _c.sent();
-                    elementRectangleOptions = {
-                        devicePixelRatio: devicePixelRatio || NaN,
-                        innerHeight: innerHeight || NaN,
+                    currentPosition = _e.sent();
+                    _e.label = 3;
+                case 3: return [4, (0, screenshots_js_1.takeWebElementScreenshot)({
+                        devicePixelRatio: devicePixelRatio,
+                        element: element,
+                        executor: executor,
+                        innerHeight: innerHeight,
                         isAndroidNativeWebScreenshot: isAndroidNativeWebScreenshot,
@@ -111,29 +106,35 @@ isAndroid: isAndroid,
                         isLandscape: isLandscape,
-                    };
-                    return [4, (0, rectangles_js_1.determineElementRectangles)({
-                            executor: executor,
+                        screenShot: screenShot,
+                        takeElementScreenshot: takeElementScreenshot,
+                    })];
+                case 4:
+                    _c = _e.sent(), base64Image = _c.base64Image, rectangles = _c.rectangles, isWebDriverElementScreenshot = _c.isWebDriverElementScreenshot;
+                    if (!(autoElementScroll && currentPosition)) return [3, 6];
+                    return [4, executor(scrollToPosition_js_1.default, currentPosition)];
+                case 5:
+                    _e.sent();
+                    _e.label = 6;
+                case 6:
+                    if (rectangles.width === 0 || rectangles.height === 0) {
+                        _d = (0, utils_js_1.getScreenshotSize)(base64Image), height = _d.height, width = _d.width;
+                        rectangles.width = width;
+                        rectangles.height = height;
+                        rectangles.x = 0;
+                        rectangles.y = 0;
+                        console.error("\u001B[31m\nThe element has no width or height. We defaulted to the viewport screen size of width: ".concat(width, " and height: ").concat(height, ".\u001B[0m\n"));
+                    }
+                    return [4, (0, images_js_1.makeCroppedBase64Image)({
+                            addIOSBezelCorners: false,
                             base64Image: base64Image,
-                            options: elementRectangleOptions,
-                            element: element,
+                            deviceName: deviceName,
+                            devicePixelRatio: devicePixelRatio || NaN,
+                            isWebDriverElementScreenshot: isWebDriverElementScreenshot,
+                            isIOS: isIOS,
+                            isLandscape: isLandscape,
+                            logLevel: logLevel,
+                            rectangles: rectangles,
+                            resizeDimensions: resizeDimensions,
                         })];
-                case 6:
-                    rectangles = _c.sent();
-                    if (!(autoElementScroll && currentPosition)) return [3, 8];
-                    return [4, executor(scrollToPosition_js_1.default, currentPosition)];
                 case 7:
-                    _c.sent();
-                    _c.label = 8;
-                case 8: return [4, (0, images_js_1.makeCroppedBase64Image)({
-                        addIOSBezelCorners: false,
-                        base64Image: base64Image,
-                        deviceName: deviceName,
-                        devicePixelRatio: devicePixelRatio || NaN,
-                        isIOS: isIOS,
-                        isLandscape: isLandscape,
-                        logLevel: logLevel,
-                        rectangles: rectangles,
-                        resizeDimensions: resizeDimensions,
-                    })];
-                case 9:
-                    croppedBase64Image = _c.sent();
+                    croppedBase64Image = _e.sent();
                     afterOptions = {
@@ -140,0 +141,0 @@ actualFolder: folders.actualFolder,

dist/helpers/beforeScreenshot.js

@@ -62,6 +62,6 @@ "use strict";
 var waitForFonts_js_1 = __importDefault(require("../clientSideScripts/waitForFonts.js"));
-function beforeScreenshot(executor, options, addShadowPadding) {
-    if (addShadowPadding === void 0) { addShadowPadding = false; }
-    return __awaiter(this, void 0, void 0, function () {
+function beforeScreenshot(executor_1, options_1) {
+    return __awaiter(this, arguments, void 0, function (executor, options, addShadowPadding) {
         var _a, browserName, nativeWebScreenshot, platformName, addressBarShadowPadding, disableCSSAnimation, enableLayoutTesting, hideElements, logLevel, noScrollBars, removeElements, toolBarShadowPadding, waitForFontsLoaded, addressBarPadding, toolBarPadding, e_1, e_2, instanceOptions;
+        if (addShadowPadding === void 0) { addShadowPadding = false; }
         return __generator(this, function (_b) {
@@ -68,0 +68,0 @@ switch (_b.label) {

dist/helpers/options.interfaces.d.ts

@@ -33,2 +33,10 @@ import type { TabbableOptions } from '../commands/tabbable.interfaces';
     tabbableOptions?: TabbableOptions;
+    storybook?: {
+        clip?: boolean;
+        clipSelector?: string;
+        numShards?: number;
+        skipStories?: string | string[];
+        url?: string;
+        version?: number;
+    };
 }
@@ -35,0 +43,0 @@ export interface DefaultOptions {

dist/helpers/options.js

@@ -17,2 +17,3 @@ "use strict";
 var options_interfaces_1 = require("./options.interfaces");
+var utils_js_1 = require("./utils.js");
 function defaultOptions(options) {
@@ -31,3 +32,3 @@ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
         logLevel: (_g = options.logLevel) !== null && _g !== void 0 ? _g : options_interfaces_1.LogLevel.info,
-        savePerInstance: (_h = options.savePerInstance) !== null && _h !== void 0 ? _h : false,
+        savePerInstance: ((_h = options.savePerInstance) !== null && _h !== void 0 ? _h : (0, utils_js_1.isStorybook)()) ? true : false,
         toolBarShadowPadding: (_j = options.toolBarShadowPadding) !== null && _j !== void 0 ? _j : constants_js_1.DEFAULT_SHADOW.TOOL_BAR,
@@ -39,3 +40,3 @@ disableCSSAnimation: (_k = options.disableCSSAnimation) !== null && _k !== void 0 ? _k : false,
             ? Boolean(options.hideScrollBars)
-            : true,
+            : (0, utils_js_1.isStorybook)() ? false : true,
         waitForFontsLoaded: (_o = options.waitForFontsLoaded) !== null && _o !== void 0 ? _o : true,
@@ -42,0 +43,0 @@ compareOptions: {

dist/helpers/utils.d.ts

@@ -25,2 +25,3 @@ import type { FormatFileNameOptions, GetAddressBarShadowPaddingOptions, GetAndCreatePathOptions, GetToolBarShadowPaddingOptions, ScreenshotSize } from './utils.interfaces';
 export declare function isObject(item: unknown): boolean;
+export declare function isStorybook(): boolean;
 //# sourceMappingURL=utils.d.ts.map

dist/helpers/utils.js

@@ -39,3 +39,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isObject = exports.getIosBezelImageNames = exports.getDevicePixelRatio = exports.getScreenshotSize = exports.waitFor = exports.calculateDprData = exports.getToolBarShadowPadding = exports.getAddressBarShadowPadding = exports.checkAndroidChromeDriverScreenshot = exports.checkAndroidNativeWebScreenshot = exports.checkTestInMobileBrowser = exports.checkTestInBrowser = exports.checkIsIos = exports.checkIsAndroid = exports.checkIsMobile = exports.formatFileName = exports.getAndCreatePath = void 0;
+exports.isStorybook = exports.isObject = exports.getIosBezelImageNames = exports.getDevicePixelRatio = exports.getScreenshotSize = exports.waitFor = exports.calculateDprData = exports.getToolBarShadowPadding = exports.getAddressBarShadowPadding = exports.checkAndroidChromeDriverScreenshot = exports.checkAndroidNativeWebScreenshot = exports.checkTestInMobileBrowser = exports.checkTestInBrowser = exports.checkIsIos = exports.checkIsAndroid = exports.checkIsMobile = exports.formatFileName = exports.getAndCreatePath = void 0;
 var node_path_1 = require("node:path");
@@ -262,2 +262,6 @@ var constants_js_1 = require("./constants.js");
 exports.isObject = isObject;
+function isStorybook() {
+    return process.argv.includes('--storybook');
+}
+exports.isStorybook = isStorybook;
 //# sourceMappingURL=utils.js.map

dist/methods/elementPosition.js

@@ -49,8 +49,8 @@ "use strict";
 var getIosStatusAddressToolBarOffsets_js_1 = __importDefault(require("../clientSideScripts/getIosStatusAddressToolBarOffsets.js"));
-function getElementPositionAndroid(executor, element, _a) {
-    var isAndroidNativeWebScreenshot = _a.isAndroidNativeWebScreenshot, isLandscape = _a.isLandscape;
-    return __awaiter(this, void 0, void 0, function () {
-        var _b, safeArea, screenHeight, screenWidth, sideBarWidth, height;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+function getElementPositionAndroid(executor_1, element_1, _a) {
+    return __awaiter(this, arguments, void 0, function (executor, element, _b) {
+        var _c, safeArea, screenHeight, screenWidth, sideBarWidth, height;
+        var isAndroidNativeWebScreenshot = _b.isAndroidNativeWebScreenshot, isLandscape = _b.isLandscape;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0:
@@ -60,3 +60,3 @@ if (!isAndroidNativeWebScreenshot) return [3, 2];
                 case 1:
-                    _b = (_c.sent()), safeArea = _b.safeArea, screenHeight = _b.screenHeight, screenWidth = _b.screenWidth, sideBarWidth = _b.sideBar.width, height = _b.statusAddressBar.height;
+                    _c = (_d.sent()), safeArea = _c.safeArea, screenHeight = _c.screenHeight, screenWidth = _c.screenWidth, sideBarWidth = _c.sideBar.width, height = _c.statusAddressBar.height;
                     return [2, executor(getElementPositionTopScreenNativeMobile_js_1.getElementPositionTopScreenNativeMobile, element, {
@@ -76,6 +76,6 @@ isLandscape: isLandscape,
 exports.getElementPositionAndroid = getElementPositionAndroid;
-function getElementPositionDesktop(executor, element, _a) {
-    var innerHeight = _a.innerHeight, screenshotHeight = _a.screenshotHeight;
-    return __awaiter(this, void 0, void 0, function () {
-        return __generator(this, function (_b) {
+function getElementPositionDesktop(executor_1, element_1, _a) {
+    return __awaiter(this, arguments, void 0, function (executor, element, _b) {
+        var innerHeight = _b.innerHeight, screenshotHeight = _b.screenshotHeight;
+        return __generator(this, function (_c) {
             if (screenshotHeight > innerHeight) {
@@ -89,11 +89,11 @@ return [2, executor(getElementPositionTopDom_js_1.default, element)];
 exports.getElementPositionDesktop = getElementPositionDesktop;
-function getElementPositionIos(executor, element, _a) {
-    var isLandscape = _a.isLandscape;
-    return __awaiter(this, void 0, void 0, function () {
-        var _b, safeArea, screenHeight, screenWidth, sideBarWidth, height;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+function getElementPositionIos(executor_1, element_1, _a) {
+    return __awaiter(this, arguments, void 0, function (executor, element, _b) {
+        var _c, safeArea, screenHeight, screenWidth, sideBarWidth, height;
+        var isLandscape = _b.isLandscape;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0: return [4, executor(getIosStatusAddressToolBarOffsets_js_1.default, constants_js_1.IOS_OFFSETS, isLandscape)];
                 case 1:
-                    _b = _c.sent(), safeArea = _b.safeArea, screenHeight = _b.screenHeight, screenWidth = _b.screenWidth, sideBarWidth = _b.sideBar.width, height = _b.statusAddressBar.height;
+                    _c = _d.sent(), safeArea = _c.safeArea, screenHeight = _c.screenHeight, screenWidth = _c.screenWidth, sideBarWidth = _c.sideBar.width, height = _c.statusAddressBar.height;
                     return [2, executor(getElementPositionTopScreenNativeMobile_js_1.getElementPositionTopScreenNativeMobile, element, {
@@ -100,0 +100,0 @@ isLandscape: isLandscape,

dist/methods/images.d.ts

@@ -7,3 +7,3 @@ import type { CroppedBase64Image, IgnoreBoxes, ImageCompareOptions, ImageCompareResult, ResizeDimensions } from './images.interfaces';
 export declare function checkBaselineImageExists(actualFilePath: string, baselineFilePath: string, autoSaveBaseline: boolean, logLevel: LogLevel): Promise<void>;
-export declare function makeCroppedBase64Image({ addIOSBezelCorners, base64Image, deviceName, devicePixelRatio, isIOS, isLandscape, logLevel, rectangles, resizeDimensions, }: CroppedBase64Image): Promise<string>;
+export declare function makeCroppedBase64Image({ addIOSBezelCorners, base64Image, deviceName, devicePixelRatio, isWebDriverElementScreenshot, isIOS, isLandscape, logLevel, rectangles, resizeDimensions, }: CroppedBase64Image): Promise<string>;
 export declare function executeImageCompare(executor: Executor, options: ImageCompareOptions, isViewPortScreenshot?: boolean, isNativeContext?: boolean): Promise<ImageCompareResult | number>;
@@ -10,0 +10,0 @@ export declare function makeFullPageBase64Image(screenshotsData: FullPageScreenshotsData, { devicePixelRatio, isLandscape }: {

dist/methods/images.interfaces.d.ts

@@ -87,2 +87,3 @@ import type { CanvasRenderingContext2D } from 'canvas';
     devicePixelRatio: number;
+    isWebDriverElementScreenshot?: boolean;
     isIOS: boolean;
@@ -129,2 +130,3 @@ isLandscape: boolean;
 export interface RotatedImage {
+    isWebDriverElementScreenshot: boolean;
     isLandscape: boolean;
@@ -131,0 +133,0 @@ base64Image: string;

dist/methods/images.js

@@ -100,19 +100,19 @@ "use strict";
 function getRotatedImageIfNeeded(_a) {
-    var isLandscape = _a.isLandscape, base64Image = _a.base64Image;
-    return __awaiter(this, void 0, void 0, function () {
-        var _b, screenshotHeight, screenshotWidth, isRotated, _c;
-        return __generator(this, function (_d) {
-            switch (_d.label) {
+    return __awaiter(this, arguments, void 0, function (_b) {
+        var _c, screenshotHeight, screenshotWidth, isRotated, _d;
+        var isWebDriverElementScreenshot = _b.isWebDriverElementScreenshot, isLandscape = _b.isLandscape, base64Image = _b.base64Image;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
                 case 0:
-                    _b = (0, utils_js_1.getScreenshotSize)(base64Image), screenshotHeight = _b.height, screenshotWidth = _b.width;
-                    isRotated = isLandscape && screenshotHeight > screenshotWidth;
+                    _c = (0, utils_js_1.getScreenshotSize)(base64Image), screenshotHeight = _c.height, screenshotWidth = _c.width;
+                    isRotated = !isWebDriverElementScreenshot && isLandscape && screenshotHeight > screenshotWidth;
                     if (!isRotated) return [3, 2];
                     return [4, rotateBase64Image({ base64Image: base64Image, degrees: -90, newHeight: screenshotWidth, newWidth: screenshotHeight })];
                 case 1:
-                    _c = _d.sent();
+                    _d = _e.sent();
                     return [3, 3];
                 case 2:
-                    _c = base64Image;
-                    _d.label = 3;
-                case 3: return [2, _c];
+                    _d = base64Image;
+                    _e.label = 3;
+                case 3: return [2, _d];
             }
@@ -155,7 +155,7 @@ });
 function handleIOSBezelCorners(_a) {
-    var addIOSBezelCorners = _a.addIOSBezelCorners, ctx = _a.ctx, deviceName = _a.deviceName, devicePixelRatio = _a.devicePixelRatio, height = _a.height, isLandscape = _a.isLandscape, width = _a.width;
-    return __awaiter(this, void 0, void 0, function () {
-        var normalizedDeviceName, isSupported, isIosBezelError, _b, topImageName, bottomImageName, topImage, bottomImage, topBase64Image, _c, bottomBase64Image, _d, _e, _f, _g, _h;
-        return __generator(this, function (_j) {
-            switch (_j.label) {
+    return __awaiter(this, arguments, void 0, function (_b) {
+        var normalizedDeviceName, isSupported, isIosBezelError, _c, topImageName, bottomImageName, topImage, bottomImage, topBase64Image, _d, bottomBase64Image, _e, _f, _g, _h, _j;
+        var addIOSBezelCorners = _b.addIOSBezelCorners, ctx = _b.ctx, deviceName = _b.deviceName, devicePixelRatio = _b.devicePixelRatio, height = _b.height, isLandscape = _b.isLandscape, width = _b.width;
+        return __generator(this, function (_k) {
+            switch (_k.label) {
                 case 0:
@@ -171,3 +171,3 @@ normalizedDeviceName = deviceName
                     if (!(addIOSBezelCorners && isSupported)) return [3, 10];
-                    _b = (0, utils_js_1.getIosBezelImageNames)(normalizedDeviceName), topImageName = _b.topImageName, bottomImageName = _b.bottomImageName;
+                    _c = (0, utils_js_1.getIosBezelImageNames)(normalizedDeviceName), topImageName = _c.topImageName, bottomImageName = _c.bottomImageName;
                     if (!(topImageName && bottomImageName)) return [3, 9];
@@ -184,9 +184,9 @@ topImage = (0, fs_extra_1.readFileSync)((0, node_path_1.join)(__dirname, '..', '..', 'assets', 'ios', "".concat(topImageName, ".png"))).toString('base64');
                 case 1:
-                    _c = _j.sent();
+                    _d = _k.sent();
                     return [3, 3];
                 case 2:
-                    _c = topImage;
-                    _j.label = 3;
+                    _d = topImage;
+                    _k.label = 3;
                 case 3:
-                    topBase64Image = _c;
+                    topBase64Image = _d;
                     if (!isLandscape) return [3, 5];
@@ -200,17 +200,17 @@ return [4, rotateBase64Image({
                 case 4:
-                    _d = _j.sent();
+                    _e = _k.sent();
                     return [3, 6];
                 case 5:
-                    _d = bottomImage;
-                    _j.label = 6;
+                    _e = bottomImage;
+                    _k.label = 6;
                 case 6:
-                    bottomBase64Image = _d;
-                    _f = (_e = ctx).drawImage;
+                    bottomBase64Image = _e;
+                    _g = (_f = ctx).drawImage;
                     return [4, (0, canvas_1.loadImage)("data:image/png;base64,".concat(topBase64Image))];
                 case 7:
-                    _f.apply(_e, [_j.sent(), 0, 0]);
-                    _h = (_g = ctx).drawImage;
+                    _g.apply(_f, [_k.sent(), 0, 0]);
+                    _j = (_h = ctx).drawImage;
                     return [4, (0, canvas_1.loadImage)("data:image/png;base64,".concat(bottomBase64Image))];
                 case 8:
-                    _h.apply(_g, [_j.sent(), isLandscape ? width - (0, utils_js_1.getScreenshotSize)(bottomImage).height : 0,
+                    _j.apply(_h, [_k.sent(), isLandscape ? width - (0, utils_js_1.getScreenshotSize)(bottomImage).height : 0,
                         isLandscape ? 0 : height - (0, utils_js_1.getScreenshotSize)(bottomImage).height]);
@@ -220,3 +220,3 @@ return [3, 10];
                     isIosBezelError = true;
-                    _j.label = 10;
+                    _k.label = 10;
                 case 10:
@@ -235,7 +235,7 @@ if (addIOSBezelCorners && !isSupported) {
 function cropAndConvertToDataURL(_a) {
-    var addIOSBezelCorners = _a.addIOSBezelCorners, base64Image = _a.base64Image, deviceName = _a.deviceName, devicePixelRatio = _a.devicePixelRatio, height = _a.height, isIOS = _a.isIOS, isLandscape = _a.isLandscape, sourceX = _a.sourceX, sourceY = _a.sourceY, width = _a.width;
-    return __awaiter(this, void 0, void 0, function () {
+    return __awaiter(this, arguments, void 0, function (_b) {
         var canvas, ctx, image;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var addIOSBezelCorners = _b.addIOSBezelCorners, base64Image = _b.base64Image, deviceName = _b.deviceName, devicePixelRatio = _b.devicePixelRatio, height = _b.height, isIOS = _b.isIOS, isLandscape = _b.isLandscape, sourceX = _b.sourceX, sourceY = _b.sourceY, width = _b.width;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
@@ -246,3 +246,3 @@ canvas = (0, canvas_1.createCanvas)(width, height);
                 case 1:
-                    image = _b.sent();
+                    image = _c.sent();
                     ctx.drawImage(image, sourceX, sourceY, width, height, 0, 0, width, height);
@@ -252,4 +252,4 @@ if (!isIOS) return [3, 3];
                 case 2:
-                    _b.sent();
-                    _b.label = 3;
+                    _c.sent();
+                    _c.label = 3;
                 case 3: return [2, canvas.toDataURL().replace(/^data:image\/png;base64,/, '')];
@@ -261,10 +261,10 @@ }
 function makeCroppedBase64Image(_a) {
-    var addIOSBezelCorners = _a.addIOSBezelCorners, base64Image = _a.base64Image, deviceName = _a.deviceName, devicePixelRatio = _a.devicePixelRatio, isIOS = _a.isIOS, isLandscape = _a.isLandscape, logLevel = _a.logLevel, rectangles = _a.rectangles, _b = _a.resizeDimensions, resizeDimensions = _b === void 0 ? constants_js_1.DEFAULT_RESIZE_DIMENSIONS : _b;
-    return __awaiter(this, void 0, void 0, function () {
+    return __awaiter(this, arguments, void 0, function (_b) {
         var newBase64Image, _c, screenshotHeight, screenshotWidth, _d, top, right, bottom, left, height, width, x, y, _e, sourceXStart, sourceXEnd, _f, sourceYStart, sourceYEnd;
-        return __generator(this, function (_g) {
-            switch (_g.label) {
-                case 0: return [4, getRotatedImageIfNeeded({ isLandscape: isLandscape, base64Image: base64Image })];
+        var addIOSBezelCorners = _b.addIOSBezelCorners, base64Image = _b.base64Image, deviceName = _b.deviceName, devicePixelRatio = _b.devicePixelRatio, _g = _b.isWebDriverElementScreenshot, isWebDriverElementScreenshot = _g === void 0 ? false : _g, isIOS = _b.isIOS, isLandscape = _b.isLandscape, logLevel = _b.logLevel, rectangles = _b.rectangles, _h = _b.resizeDimensions, resizeDimensions = _h === void 0 ? constants_js_1.DEFAULT_RESIZE_DIMENSIONS : _h;
+        return __generator(this, function (_j) {
+            switch (_j.label) {
+                case 0: return [4, getRotatedImageIfNeeded({ isWebDriverElementScreenshot: isWebDriverElementScreenshot, isLandscape: isLandscape, base64Image: base64Image })];
                 case 1:
-                    newBase64Image = _g.sent();
+                    newBase64Image = _j.sent();
                     _c = (0, utils_js_1.getScreenshotSize)(base64Image), screenshotHeight = _c.height, screenshotWidth = _c.width;
@@ -308,7 +308,7 @@ _d = __assign(__assign({}, constants_js_1.DEFAULT_RESIZE_DIMENSIONS), resizeDimensions), top = _d.top, right = _d.right, bottom = _d.bottom, left = _d.left;
 exports.makeCroppedBase64Image = makeCroppedBase64Image;
-function executeImageCompare(executor, options, isViewPortScreenshot, isNativeContext) {
-    if (isViewPortScreenshot === void 0) { isViewPortScreenshot = false; }
-    if (isNativeContext === void 0) { isNativeContext = false; }
-    return __awaiter(this, void 0, void 0, function () {
+function executeImageCompare(executor_1, options_1) {
+    return __awaiter(this, arguments, void 0, function (executor, options, isViewPortScreenshot, isNativeContext) {
         var _a, ignoreRegions, devicePixelRatio, fileName, isAndroidNativeWebScreenshot, isAndroid, isHybridApp, isLandscape, logLevel, platformName, _b, actualFolder, autoSaveBaseline, baselineFolder, browserName, deviceName, diffFolder, isMobile, savePerInstance, diffFilePath, imageCompareOptions, createFolderOptions, actualFolderPath, baselineFolderPath, actualFilePath, baselineFilePath, resembleIgnoreDefaults, ignore, blockOut, webStatusAddressToolBarOptions, statusAddressToolBarOptions, _c, _d, _e, ignoredBoxes, compareOptions, data, rawMisMatchPercentage, reportMisMatchPercentage, isDifference, isDifferenceMessage, debugMessage, diffFolderPath, _f;
+        if (isViewPortScreenshot === void 0) { isViewPortScreenshot = false; }
+        if (isNativeContext === void 0) { isNativeContext = false; }
         return __generator(this, function (_g) {
@@ -396,8 +396,8 @@ switch (_g.label) {
 exports.executeImageCompare = executeImageCompare;
-function makeFullPageBase64Image(screenshotsData, _a) {
-    var devicePixelRatio = _a.devicePixelRatio, isLandscape = _a.isLandscape;
-    return __awaiter(this, void 0, void 0, function () {
-        var amountOfScreenshots, canvasHeight, canvasWidth, canvas, ctx, i, currentScreenshot, _b, screenshotHeight, screenshotWidth, isRotated, newBase64Image, _c, _d, canvasYPosition, imageHeight, imageWidth, imageXPosition, imageYPosition, image;
-        return __generator(this, function (_e) {
-            switch (_e.label) {
+function makeFullPageBase64Image(screenshotsData_1, _a) {
+    return __awaiter(this, arguments, void 0, function (screenshotsData, _b) {
+        var amountOfScreenshots, canvasHeight, canvasWidth, canvas, ctx, i, currentScreenshot, _c, screenshotHeight, screenshotWidth, isRotated, newBase64Image, _d, _e, canvasYPosition, imageHeight, imageWidth, imageXPosition, imageYPosition, image;
+        var devicePixelRatio = _b.devicePixelRatio, isLandscape = _b.isLandscape;
+        return __generator(this, function (_f) {
+            switch (_f.label) {
                 case 0:
@@ -409,7 +409,7 @@ amountOfScreenshots = screenshotsData.data.length;
                     i = 0;
-                    _e.label = 1;
+                    _f.label = 1;
                 case 1:
                     if (!(i < amountOfScreenshots)) return [3, 7];
                     currentScreenshot = screenshotsData.data[i].screenshot;
-                    _b = (0, utils_js_1.getScreenshotSize)(currentScreenshot, devicePixelRatio), screenshotHeight = _b.height, screenshotWidth = _b.width;
+                    _c = (0, utils_js_1.getScreenshotSize)(currentScreenshot, devicePixelRatio), screenshotHeight = _c.height, screenshotWidth = _c.width;
                     isRotated = isLandscape && screenshotHeight > screenshotWidth;
@@ -424,15 +424,15 @@ if (!isRotated) return [3, 3];
                 case 2:
-                    _c = _e.sent();
+                    _d = _f.sent();
                     return [3, 4];
                 case 3:
-                    _c = currentScreenshot;
-                    _e.label = 4;
+                    _d = currentScreenshot;
+                    _f.label = 4;
                 case 4:
-                    newBase64Image = _c;
-                    _d = screenshotsData.data[i], canvasYPosition = _d.canvasYPosition, imageHeight = _d.imageHeight, imageWidth = _d.imageWidth, imageXPosition = _d.imageXPosition, imageYPosition = _d.imageYPosition;
+                    newBase64Image = _d;
+                    _e = screenshotsData.data[i], canvasYPosition = _e.canvasYPosition, imageHeight = _e.imageHeight, imageWidth = _e.imageWidth, imageXPosition = _e.imageXPosition, imageYPosition = _e.imageYPosition;
                     return [4, (0, canvas_1.loadImage)("data:image/png;base64,".concat(newBase64Image))];
                 case 5:
-                    image = _e.sent();
+                    image = _f.sent();
                     ctx.drawImage(image, imageXPosition, imageYPosition, imageWidth, imageHeight, 0, canvasYPosition, imageWidth, imageHeight);
-                    _e.label = 6;
+                    _f.label = 6;
                 case 6:
@@ -484,7 +484,7 @@ i++;
 function rotateBase64Image(_a) {
-    var base64Image = _a.base64Image, degrees = _a.degrees, newHeight = _a.newHeight, newWidth = _a.newWidth;
-    return __awaiter(this, void 0, void 0, function () {
+    return __awaiter(this, arguments, void 0, function (_b) {
         var canvas, ctx, image;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var base64Image = _b.base64Image, degrees = _b.degrees, newHeight = _b.newHeight, newWidth = _b.newWidth;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
@@ -495,3 +495,3 @@ canvas = (0, canvas_1.createCanvas)(newWidth, newHeight);
                 case 1:
-                    image = _b.sent();
+                    image = _c.sent();
                     canvas.width = degrees % 180 === 0 ? image.width : image.height;
@@ -508,10 +508,10 @@ canvas.height = degrees % 180 === 0 ? image.height : image.width;
 function takeResizedBase64Screenshot(_a) {
-    var element = _a.element, devicePixelRatio = _a.devicePixelRatio, isIOS = _a.isIOS, _b = _a.methods, getElementRect = _b.getElementRect, screenShot = _b.screenShot, resizeDimensions = _a.resizeDimensions;
-    return __awaiter(this, void 0, void 0, function () {
+    return __awaiter(this, arguments, void 0, function (_b) {
         var awaitedElement, elementRegion, base64Image, resizedBase64Image;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+        var element = _b.element, devicePixelRatio = _b.devicePixelRatio, isIOS = _b.isIOS, _c = _b.methods, getElementRect = _c.getElementRect, screenShot = _c.screenShot, resizeDimensions = _b.resizeDimensions;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0: return [4, element];
                 case 1:
-                    awaitedElement = _c.sent();
+                    awaitedElement = _d.sent();
                     if (!(0, rectangles_js_1.isWdioElement)(awaitedElement)) {
@@ -522,6 +522,6 @@ console.log('awaitedElement = ', JSON.stringify(awaitedElement));
                 case 2:
-                    elementRegion = _c.sent();
+                    elementRegion = _d.sent();
                     return [4, screenShot()];
                 case 3:
-                    base64Image = _c.sent();
+                    base64Image = _d.sent();
                     return [4, makeCroppedBase64Image({
@@ -544,3 +544,3 @@ addIOSBezelCorners: false,
                 case 4:
-                    resizedBase64Image = _c.sent();
+                    resizedBase64Image = _d.sent();
                     return [2, resizedBase64Image];
@@ -552,16 +552,16 @@ }
 function takeBase64ElementScreenshot(_a) {
-    var element = _a.element, devicePixelRatio = _a.devicePixelRatio, isIOS = _a.isIOS, _b = _a.methods, getElementRect = _b.getElementRect, screenShot = _b.screenShot, resizeDimensions = _a.resizeDimensions;
-    return __awaiter(this, void 0, void 0, function () {
+    return __awaiter(this, arguments, void 0, function (_b) {
         var shouldTakeResizedScreenshot, awaitedElement, error_1;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+        var element = _b.element, devicePixelRatio = _b.devicePixelRatio, isIOS = _b.isIOS, _c = _b.methods, getElementRect = _c.getElementRect, screenShot = _c.screenShot, resizeDimensions = _b.resizeDimensions;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0:
                     shouldTakeResizedScreenshot = resizeDimensions !== constants_js_1.DEFAULT_RESIZE_DIMENSIONS;
                     if (!!shouldTakeResizedScreenshot) return [3, 5];
-                    _c.label = 1;
+                    _d.label = 1;
                 case 1:
-                    _c.trys.push([1, 4, , 5]);
+                    _d.trys.push([1, 4, , 5]);
                     return [4, element];
                 case 2:
-                    awaitedElement = _c.sent();
+                    awaitedElement = _d.sent();
                     if (!(0, rectangles_js_1.isWdioElement)(awaitedElement)) {
@@ -571,5 +571,5 @@ console.error(' takeBase64ElementScreenshot element is not a valid element because of ', JSON.stringify(awaitedElement));
                     return [4, awaitedElement.takeElementScreenshot(awaitedElement.elementId)];
-                case 3: return [2, _c.sent()];
+                case 3: return [2, _d.sent()];
                 case 4:
-                    error_1 = _c.sent();
+                    error_1 = _d.sent();
                     console.error('Error taking an element screenshot with the default `element.takeElementScreenshot(elementId)` method:', error_1, ' We will retry with a resized screenshot');
@@ -587,3 +587,3 @@ return [3, 5];
                     })];
-                case 6: return [2, _c.sent()];
+                case 6: return [2, _d.sent()];
             }
@@ -590,0 +590,0 @@ });

dist/methods/methods.interfaces.d.ts

@@ -5,2 +5,3 @@ import type { RectanglesOutput } from './rectangles.interfaces';
 export type TakeScreenShot = () => Promise<string>;
+export type TakeElementScreenshot = (elementId: string) => Promise<string>;
 export interface Methods {
@@ -10,3 +11,4 @@ executor: Executor;
     screenShot: TakeScreenShot;
+    takeElementScreenshot?: TakeElementScreenshot;
 }
 //# sourceMappingURL=methods.interfaces.d.ts.map

dist/methods/rectangles.js

@@ -58,7 +58,7 @@ "use strict";
 function determineElementRectangles(_a) {
-    var executor = _a.executor, base64Image = _a.base64Image, options = _a.options, element = _a.element;
-    return __awaiter(this, void 0, void 0, function () {
+    return __awaiter(this, arguments, void 0, function (_b) {
         var devicePixelRatio, innerHeight, isAndroid, isAndroidNativeWebScreenshot, isIOS, isLandscape, height, elementPosition, selectorMessage, message;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var executor = _b.executor, base64Image = _b.base64Image, options = _b.options, element = _b.element;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
@@ -70,3 +70,3 @@ devicePixelRatio = options.devicePixelRatio, innerHeight = options.innerHeight, isAndroid = options.isAndroid, isAndroidNativeWebScreenshot = options.isAndroidNativeWebScreenshot, isIOS = options.isIOS, isLandscape = options.isLandscape;
                 case 1:
-                    elementPosition = _b.sent();
+                    elementPosition = _c.sent();
                     return [3, 6];
@@ -77,8 +77,8 @@ case 2:
                 case 3:
-                    elementPosition = _b.sent();
+                    elementPosition = _c.sent();
                     return [3, 6];
                 case 4: return [4, (0, elementPosition_js_1.getElementPositionDesktop)(executor, element, { innerHeight: innerHeight, screenshotHeight: height })];
                 case 5:
-                    elementPosition = _b.sent();
-                    _b.label = 6;
+                    elementPosition = _c.sent();
+                    _c.label = 6;
                 case 6:
@@ -255,9 +255,9 @@ if (elementPosition.height === 0 || elementPosition.width === 0) {
 function determineDeviceBlockOuts(_a) {
-    var isAndroid = _a.isAndroid, screenCompareOptions = _a.screenCompareOptions, instanceData = _a.instanceData;
-    return __awaiter(this, void 0, void 0, function () {
-        var rectangles, blockOutStatusBar, blockOutToolBar, _b, homeBar, statusBar;
-        return __generator(this, function (_c) {
+    return __awaiter(this, arguments, void 0, function (_b) {
+        var rectangles, blockOutStatusBar, blockOutToolBar, _c, homeBar, statusBar;
+        var isAndroid = _b.isAndroid, screenCompareOptions = _b.screenCompareOptions, instanceData = _b.instanceData;
+        return __generator(this, function (_d) {
             rectangles = [];
             blockOutStatusBar = screenCompareOptions.blockOutStatusBar, blockOutToolBar = screenCompareOptions.blockOutToolBar;
-            _b = instanceData.devicePlatformRect, homeBar = _b.homeBar, statusBar = _b.statusBar;
+            _c = instanceData.devicePlatformRect, homeBar = _c.homeBar, statusBar = _c.statusBar;
             if (blockOutStatusBar) {
@@ -264,0 +264,0 @@ rectangles.push(statusBar);

dist/methods/screenshots.d.ts

 import type { Executor, TakeScreenShot } from './methods.interfaces';
-import type { FullPageScreenshotOptions, FullPageScreenshotNativeMobileOptions, FullPageScreenshotDataOptions, FullPageScreenshotsData } from './screenshots.interfaces';
+import type { FullPageScreenshotOptions, FullPageScreenshotNativeMobileOptions, FullPageScreenshotDataOptions, FullPageScreenshotsData, TakeWebElementScreenshot, TakeWebElementScreenshotData } from './screenshots.interfaces';
 export declare function getBase64FullPageScreenshotsData(takeScreenshot: TakeScreenShot, executor: Executor, options: FullPageScreenshotDataOptions): Promise<FullPageScreenshotsData>;
@@ -8,2 +8,3 @@ export declare function getFullPageScreenshotsDataNativeMobile(takeScreenshot: TakeScreenShot, executor: Executor, options: FullPageScreenshotNativeMobileOptions): Promise<FullPageScreenshotsData>;
 export declare function takeBase64Screenshot(takeScreenshot: TakeScreenShot): Promise<string>;
+export declare function takeWebElementScreenshot({ devicePixelRatio, element, executor, fallback, innerHeight, isAndroidNativeWebScreenshot, isAndroid, isIOS, isLandscape, screenShot, takeElementScreenshot, }: TakeWebElementScreenshot): Promise<TakeWebElementScreenshotData>;
 //# sourceMappingURL=screenshots.d.ts.map

dist/methods/screenshots.interfaces.d.ts

 import type { LogLevel } from '../helpers/options.interfaces';
+import type { Executor, TakeElementScreenshot, TakeScreenShot } from './methods.interfaces';
+import type { RectanglesOutput } from './rectangles.interfaces';
 export interface FullPageScreenshotsData {
@@ -56,3 +58,21 @@ fullPageHeight: number;
 }
+export interface TakeWebElementScreenshot {
+    devicePixelRatio?: number;
+    element: any;
+    executor: Executor;
+    fallback?: boolean;
+    innerHeight?: number;
+    isAndroidNativeWebScreenshot: boolean;
+    isAndroid: boolean;
+    isIOS: boolean;
+    isLandscape: boolean;
+    screenShot: TakeScreenShot;
+    takeElementScreenshot?: TakeElementScreenshot;
+}
+export interface TakeWebElementScreenshotData {
+    base64Image: string;
+    isWebDriverElementScreenshot: boolean;
+    rectangles: RectanglesOutput;
+}
 export {};
 //# sourceMappingURL=screenshots.interfaces.d.ts.map

dist/methods/screenshots.js

@@ -53,3 +53,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.takeBase64Screenshot = exports.getFullPageScreenshotsDataDesktop = exports.getFullPageScreenshotsDataAndroidChromeDriver = exports.getFullPageScreenshotsDataNativeMobile = exports.getBase64FullPageScreenshotsData = void 0;
+exports.takeWebElementScreenshot = exports.takeBase64Screenshot = exports.getFullPageScreenshotsDataDesktop = exports.getFullPageScreenshotsDataAndroidChromeDriver = exports.getFullPageScreenshotsDataNativeMobile = exports.getBase64FullPageScreenshotsData = void 0;
 var scrollToPosition_js_1 = __importDefault(require("../clientSideScripts/scrollToPosition.js"));
@@ -64,2 +64,3 @@ var getDocumentScrollHeight_js_1 = __importDefault(require("../clientSideScripts/getDocumentScrollHeight.js"));
 var options_interfaces_1 = require("../helpers/options.interfaces");
+var rectangles_js_1 = require("./rectangles.js");
 function getBase64FullPageScreenshotsData(takeScreenshot, executor, options) {
@@ -395,2 +396,72 @@ return __awaiter(this, void 0, void 0, function () {
 }
+function takeWebElementScreenshot(_a) {
+    return __awaiter(this, arguments, void 0, function (_b) {
+        var base64Image, elementRectangleOptions, rectangles, base64Image, _c, _d, height, width, rectangles, e_7;
+        var devicePixelRatio = _b.devicePixelRatio, element = _b.element, executor = _b.executor, _e = _b.fallback, fallback = _e === void 0 ? false : _e, innerHeight = _b.innerHeight, isAndroidNativeWebScreenshot = _b.isAndroidNativeWebScreenshot, isAndroid = _b.isAndroid, isIOS = _b.isIOS, isLandscape = _b.isLandscape, screenShot = _b.screenShot, takeElementScreenshot = _b.takeElementScreenshot;
+        return __generator(this, function (_f) {
+            switch (_f.label) {
+                case 0:
+                    if (!(isIOS || fallback)) return [3, 3];
+                    return [4, takeBase64Screenshot(screenShot)];
+                case 1:
+                    base64Image = _f.sent();
+                    elementRectangleOptions = {
+                        devicePixelRatio: devicePixelRatio || NaN,
+                        innerHeight: innerHeight || NaN,
+                        isAndroidNativeWebScreenshot: isAndroidNativeWebScreenshot,
+                        isAndroid: isAndroid,
+                        isIOS: isIOS,
+                        isLandscape: isLandscape,
+                    };
+                    return [4, (0, rectangles_js_1.determineElementRectangles)({
+                            executor: executor,
+                            base64Image: base64Image,
+                            options: elementRectangleOptions,
+                            element: element,
+                        })];
+                case 2:
+                    rectangles = _f.sent();
+                    return [2, {
+                            base64Image: base64Image,
+                            isWebDriverElementScreenshot: false,
+                            rectangles: rectangles,
+                        }];
+                case 3:
+                    _f.trys.push([3, 6, , 7]);
+                    _c = takeElementScreenshot;
+                    return [4, element];
+                case 4: return [4, _c.apply(void 0, [(_f.sent()).elementId])];
+                case 5:
+                    base64Image = _f.sent();
+                    _d = (0, utils_js_1.getScreenshotSize)(base64Image), height = _d.height, width = _d.width;
+                    rectangles = { x: 0, y: 0, width: width, height: height };
+                    if (rectangles.width === 0 || rectangles.height === 0) {
+                        throw new Error('The element has no width or height.');
+                    }
+                    return [2, {
+                            base64Image: base64Image,
+                            isWebDriverElementScreenshot: true,
+                            rectangles: rectangles,
+                        }];
+                case 6:
+                    e_7 = _f.sent();
+                    return [2, takeWebElementScreenshot({
+                            devicePixelRatio: devicePixelRatio,
+                            element: element,
+                            executor: executor,
+                            fallback: true,
+                            innerHeight: innerHeight,
+                            isAndroidNativeWebScreenshot: isAndroidNativeWebScreenshot,
+                            isAndroid: isAndroid,
+                            isIOS: isIOS,
+                            isLandscape: isLandscape,
+                            screenShot: screenShot,
+                            takeElementScreenshot: takeElementScreenshot,
+                        })];
+                case 7: return [2];
+            }
+        });
+    });
+}
+exports.takeWebElementScreenshot = takeWebElementScreenshot;
 //# sourceMappingURL=screenshots.js.map

dist/resemble/compare.interfaces.d.ts

@@ -0,1 +1,3 @@
+/// <reference types="node" />
+/// <reference types="resemblejs" />
 export interface CompareData {
@@ -2,0 +4,0 @@ rawMisMatchPercentage: number;

dist/resemble/compareImages.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="node" />
 import type { ComparisonOptions } from 'resemblejs';
@@ -2,0 +3,0 @@ import type { CompareData } from './compare.interfaces';

package.json

 {
   "name": "webdriver-image-comparison",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "author": "Wim Selles - wswebcreation",
@@ -20,10 +20,10 @@ "description": "An image compare module that can be used for different NodeJS Test automation frameworks that support the webdriver protocol",
     "canvas": "^2.11.2",
-    "fs-extra": "^11.1.1",
+    "fs-extra": "^11.2.0",
     "resemblejs": "^5.0.0"
   },
   "devDependencies": {
-    "@types/fs-extra": "^11.0.3",
+    "@types/fs-extra": "^11.0.4",
     "@types/resemblejs": "^4.1.3",
     "copyfiles": "^2.4.1",
-    "webdriverio": "^8.29.7"
+    "webdriverio": "^8.33.1"
   },
@@ -30,0 +30,0 @@ "scripts": {

No alert changes

Improved metrics

Total package byte prevSize

2273522

increased by0.78%

Lines of code

11320

increased by0.99%

Dependency changes

• Updatedfs-extra@^11.2.0