webdriver-image-comparison - npm Package Compare versions

Comparing version 0.22.0 to 1.0.0

build/base.spec.js

@@ -10,3 +10,3 @@ "use strict";
             baselineFolder: './subfolder//../baseline',
-            screenshotPath: './../my_folder//screenshots'
+            screenshotPath: './../my_folder//screenshots',
         });
@@ -20,3 +20,3 @@ expect(instance.folders.actualFolder).toBe('../my_folder/screenshots/actual');
             baseline: './subfolder//../baseline',
-            screenshot: './../my_folder//screenshots'
+            screenshot: './../my_folder//screenshots',
         };
@@ -28,3 +28,3 @@ var setPath = function (folderPath) {
             baselineFolder: setPath(options.baseline),
-            screenshotPath: setPath(options.screenshot)
+            screenshotPath: setPath(options.screenshot),
         });
@@ -31,0 +31,0 @@ expect(instance.folders.actualFolder).toBe('../my_folder/screenshots/actual');

build/commands/saveElement.js

@@ -50,5 +50,5 @@ "use strict";
     return __awaiter(this, void 0, void 0, function () {
-        var _a, addressBarShadowPadding, formatImageName, logLevel, savePerInstance, toolBarShadowPadding, executor, disableCSSAnimation, hideScrollBars, resizeDimensions, hideElements, removeElements, beforeOptions, enrichedInstanceData, devicePixelRatio, isLandscape, currentPosition, base64Image, elementRectangleOptions, rectangles, croppedBase64Image, afterOptions;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var _a, addressBarShadowPadding, formatImageName, logLevel, savePerInstance, toolBarShadowPadding, executor, disableCSSAnimation, hideScrollBars, resizeDimensions, hideElements, removeElements, 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) {
                 case 0:
@@ -78,20 +78,19 @@ _a = saveElementOptions.wic, addressBarShadowPadding = _a.addressBarShadowPadding, formatImageName = _a.formatImageName, logLevel = _a.logLevel, savePerInstance = _a.savePerInstance, toolBarShadowPadding = _a.toolBarShadowPadding;
                 case 1:
-                    enrichedInstanceData = _b.sent();
-                    devicePixelRatio = enrichedInstanceData.dimensions.window.devicePixelRatio;
-                    isLandscape = enrichedInstanceData.dimensions.window.isLandscape;
+                    enrichedInstanceData = _c.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;
                     return [4, executor(scrollElementIntoView_1.default, element, addressBarShadowPadding)];
                 case 2:
-                    currentPosition = _b.sent();
+                    currentPosition = _c.sent();
                     return [4, (0, utils_1.waitFor)(500)];
                 case 3:
-                    _b.sent();
+                    _c.sent();
                     return [4, (0, screenshots_1.takeBase64Screenshot)(methods.screenShot)];
                 case 4:
-                    base64Image = _b.sent();
+                    base64Image = _c.sent();
                     elementRectangleOptions = {
                         devicePixelRatio: devicePixelRatio,
-                        innerHeight: enrichedInstanceData.dimensions.window.innerHeight,
-                        isAndroidNativeWebScreenshot: enrichedInstanceData.isAndroidNativeWebScreenshot,
-                        isAndroid: enrichedInstanceData.isAndroid,
-                        isIos: enrichedInstanceData.isIos,
+                        innerHeight: innerHeight,
+                        isAndroidNativeWebScreenshot: isAndroidNativeWebScreenshot,
+                        isAndroid: isAndroid,
+                        isIos: isIos,
                         isLandscape: isLandscape,
@@ -106,9 +105,12 @@ };
                 case 5:
-                    rectangles = _b.sent();
+                    rectangles = _c.sent();
                     return [4, executor(scrollToPosition_1.default, currentPosition)];
                 case 6:
-                    _b.sent();
+                    _c.sent();
                     return [4, (0, images_1.makeCroppedBase64Image)({
+                            addIOSBezelCorners: false,
                             base64Image: base64Image,
+                            deviceName: deviceName,
                             devicePixelRatio: devicePixelRatio,
+                            isIos: isIos,
                             isLandscape: isLandscape,
@@ -120,3 +122,3 @@ logLevel: logLevel,
                 case 7:
-                    croppedBase64Image = _b.sent();
+                    croppedBase64Image = _c.sent();
                     afterOptions = {
@@ -127,23 +129,23 @@ actualFolder: folders.actualFolder,
                         filePath: {
-                            browserName: enrichedInstanceData.browserName,
-                            deviceName: enrichedInstanceData.deviceName,
-                            isMobile: enrichedInstanceData.isMobile,
+                            browserName: browserName,
+                            deviceName: deviceName,
+                            isMobile: isMobile,
                             savePerInstance: savePerInstance,
                         },
                         fileName: {
-                            browserName: enrichedInstanceData.browserName,
-                            browserVersion: enrichedInstanceData.browserVersion,
-                            deviceName: enrichedInstanceData.deviceName,
-                            devicePixelRatio: enrichedInstanceData.dimensions.window.devicePixelRatio,
+                            browserName: browserName,
+                            browserVersion: browserVersion,
+                            deviceName: deviceName,
+                            devicePixelRatio: devicePixelRatio,
                             formatImageName: formatImageName,
-                            isMobile: enrichedInstanceData.isMobile,
-                            isTestInBrowser: enrichedInstanceData.isTestInBrowser,
-                            logName: enrichedInstanceData.logName,
-                            name: enrichedInstanceData.name,
-                            outerHeight: enrichedInstanceData.dimensions.window.outerHeight,
-                            outerWidth: enrichedInstanceData.dimensions.window.outerWidth,
-                            platformName: enrichedInstanceData.platformName,
-                            platformVersion: enrichedInstanceData.platformVersion,
-                            screenHeight: enrichedInstanceData.dimensions.window.screenHeight,
-                            screenWidth: enrichedInstanceData.dimensions.window.screenWidth,
+                            isMobile: isMobile,
+                            isTestInBrowser: isTestInBrowser,
+                            logName: logName,
+                            name: name,
+                            outerHeight: outerHeight,
+                            outerWidth: outerWidth,
+                            platformName: platformName,
+                            platformVersion: platformVersion,
+                            screenHeight: screenHeight,
+                            screenWidth: screenWidth,
                             tag: tag,
@@ -150,0 +152,0 @@ },

build/commands/saveScreen.js

@@ -46,7 +46,7 @@ "use strict";
     return __awaiter(this, void 0, void 0, function () {
-        var _a, addressBarShadowPadding, formatImageName, logLevel, savePerInstance, toolBarShadowPadding, disableCSSAnimation, hideScrollBars, hideElements, removeElements, beforeOptions, enrichedInstanceData, devicePixelRatio, isLandscape, base64Image, screenRectangleOptions, rectangles, croppedBase64Image, afterOptions;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var _a, addressBarShadowPadding, addIOSBezelCorners, formatImageName, logLevel, savePerInstance, toolBarShadowPadding, disableCSSAnimation, hideScrollBars, hideElements, removeElements, beforeOptions, enrichedInstanceData, browserName, browserVersion, deviceName, _b, devicePixelRatio, innerHeight, innerWidth, isLandscape, outerHeight, outerWidth, screenHeight, screenWidth, isAndroidChromeDriverScreenshot, isAndroidNativeWebScreenshot, isIos, isMobile, isTestInBrowser, logName, name, platformName, platformVersion, base64Image, screenRectangleOptions, rectangles, croppedBase64Image, afterOptions;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
-                    _a = saveScreenOptions.wic, addressBarShadowPadding = _a.addressBarShadowPadding, formatImageName = _a.formatImageName, logLevel = _a.logLevel, savePerInstance = _a.savePerInstance, toolBarShadowPadding = _a.toolBarShadowPadding;
+                    _a = saveScreenOptions.wic, addressBarShadowPadding = _a.addressBarShadowPadding, addIOSBezelCorners = _a.addIOSBezelCorners, formatImageName = _a.formatImageName, logLevel = _a.logLevel, savePerInstance = _a.savePerInstance, toolBarShadowPadding = _a.toolBarShadowPadding;
                     disableCSSAnimation = 'disableCSSAnimation' in saveScreenOptions.method
@@ -70,15 +70,14 @@ ? saveScreenOptions.method.disableCSSAnimation
                 case 1:
-                    enrichedInstanceData = _b.sent();
-                    devicePixelRatio = enrichedInstanceData.dimensions.window.devicePixelRatio;
-                    isLandscape = enrichedInstanceData.dimensions.window.isLandscape;
+                    enrichedInstanceData = _c.sent();
+                    browserName = enrichedInstanceData.browserName, browserVersion = enrichedInstanceData.browserVersion, deviceName = enrichedInstanceData.deviceName, _b = enrichedInstanceData.dimensions.window, devicePixelRatio = _b.devicePixelRatio, innerHeight = _b.innerHeight, innerWidth = _b.innerWidth, isLandscape = _b.isLandscape, outerHeight = _b.outerHeight, outerWidth = _b.outerWidth, screenHeight = _b.screenHeight, screenWidth = _b.screenWidth, isAndroidChromeDriverScreenshot = enrichedInstanceData.isAndroidChromeDriverScreenshot, isAndroidNativeWebScreenshot = enrichedInstanceData.isAndroidNativeWebScreenshot, isIos = enrichedInstanceData.isIos, isMobile = enrichedInstanceData.isMobile, isTestInBrowser = enrichedInstanceData.isTestInBrowser, logName = enrichedInstanceData.logName, name = enrichedInstanceData.name, platformName = enrichedInstanceData.platformName, platformVersion = enrichedInstanceData.platformVersion;
                     return [4, (0, screenshots_1.takeBase64Screenshot)(methods.screenShot)];
                 case 2:
-                    base64Image = _b.sent();
+                    base64Image = _c.sent();
                     screenRectangleOptions = {
                         devicePixelRatio: devicePixelRatio,
-                        innerHeight: enrichedInstanceData.dimensions.window.innerHeight,
-                        innerWidth: enrichedInstanceData.dimensions.window.innerWidth,
-                        isAndroidChromeDriverScreenshot: enrichedInstanceData.isAndroidChromeDriverScreenshot,
-                        isAndroidNativeWebScreenshot: enrichedInstanceData.isAndroidNativeWebScreenshot,
-                        isIos: enrichedInstanceData.isIos,
+                        innerHeight: innerHeight,
+                        innerWidth: innerWidth,
+                        isAndroidChromeDriverScreenshot: isAndroidChromeDriverScreenshot,
+                        isAndroidNativeWebScreenshot: isAndroidNativeWebScreenshot,
+                        isIos: isIos,
                         isLandscape: isLandscape,
@@ -88,4 +87,7 @@ };
                     return [4, (0, images_1.makeCroppedBase64Image)({
+                            addIOSBezelCorners: addIOSBezelCorners,
                             base64Image: base64Image,
+                            deviceName: deviceName,
                             devicePixelRatio: devicePixelRatio,
+                            isIos: isIos,
                             isLandscape: isLandscape,
@@ -96,3 +98,3 @@ logLevel: logLevel,
                 case 3:
-                    croppedBase64Image = _b.sent();
+                    croppedBase64Image = _c.sent();
                     afterOptions = {
@@ -103,23 +105,23 @@ actualFolder: folders.actualFolder,
                         filePath: {
-                            browserName: enrichedInstanceData.browserName,
-                            deviceName: enrichedInstanceData.deviceName,
-                            isMobile: enrichedInstanceData.isMobile,
+                            browserName: browserName,
+                            deviceName: deviceName,
+                            isMobile: isMobile,
                             savePerInstance: savePerInstance,
                         },
                         fileName: {
-                            browserName: enrichedInstanceData.browserName,
-                            browserVersion: enrichedInstanceData.browserVersion,
-                            deviceName: enrichedInstanceData.deviceName,
+                            browserName: browserName,
+                            browserVersion: browserVersion,
+                            deviceName: deviceName,
                             devicePixelRatio: devicePixelRatio,
                             formatImageName: formatImageName,
-                            isMobile: enrichedInstanceData.isMobile,
-                            isTestInBrowser: enrichedInstanceData.isTestInBrowser,
-                            logName: enrichedInstanceData.logName,
-                            name: enrichedInstanceData.name,
-                            outerHeight: enrichedInstanceData.dimensions.window.outerHeight,
-                            outerWidth: enrichedInstanceData.dimensions.window.outerWidth,
-                            platformName: enrichedInstanceData.platformName,
-                            platformVersion: enrichedInstanceData.platformVersion,
-                            screenHeight: enrichedInstanceData.dimensions.window.screenHeight,
-                            screenWidth: enrichedInstanceData.dimensions.window.screenWidth,
+                            isMobile: isMobile,
+                            isTestInBrowser: isTestInBrowser,
+                            logName: logName,
+                            name: name,
+                            outerHeight: outerHeight,
+                            outerWidth: outerWidth,
+                            platformName: platformName,
+                            platformVersion: platformVersion,
+                            screenHeight: screenHeight,
+                            screenWidth: screenWidth,
                             tag: tag,
@@ -126,0 +128,0 @@ },

build/helpers/afterScreenshot.js

@@ -46,3 +46,2 @@ "use strict";
 var hideRemoveElements_1 = require("../clientSideScripts/hideRemoveElements");
-var chalk_1 = require("chalk");
 var options_interface_1 = require("./options.interface");
@@ -78,3 +77,3 @@ function afterScreenshot(executor, options) {
                     if (logLevel === options_interface_1.LogLevel.debug || logLevel === options_interface_1.LogLevel.warn) {
-                        console.log((0, chalk_1.yellow)("\n#####################################################################################\n WARNING:\n (One of) the elements that needed to be hidden or removed could not be found on the\n page and caused this error\n Error: ".concat(e_1, "\n We made sure the test didn't break.\n#####################################################################################\n")));
+                        console.log('\x1b[33m%s\x1b[0m', "\n#####################################################################################\n WARNING:\n (One of) the elements that needed to be hidden or removed could not be found on the\n page and caused this error\n Error: ".concat(e_1, "\n We made sure the test didn't break.\n#####################################################################################\n"));
                     }
@@ -81,0 +80,0 @@ return [3, 7];

build/helpers/beforeScreenshot.js

@@ -56,3 +56,2 @@ "use strict";
 var hideRemoveElements_1 = require("../clientSideScripts/hideRemoveElements");
-var chalk_1 = require("chalk");
 var options_interface_1 = require("./options.interface");
@@ -93,3 +92,3 @@ function beforeScreenshot(executor, options, addShadowPadding) {
                     if (logLevel === options_interface_1.LogLevel.debug || logLevel === options_interface_1.LogLevel.warn) {
-                        console.log((0, chalk_1.yellow)("\n#####################################################################################\n WARNING:\n (One of) the elements that needed to be hidden or removed could not be found on the\n page and caused this error\n Error: ".concat(e_1, "\n We made sure the test didn't break.\n#####################################################################################\n")));
+                        console.log('\x1b[33m%s\x1b[0m', "\n#####################################################################################\n WARNING:\n (One of) the elements that needed to be hidden or removed could not be found on the\n page and caused this error\n Error: ".concat(e_1, "\n We made sure the test didn't break.\n#####################################################################################\n"));
                     }
@@ -96,0 +95,0 @@ return [3, 6];

build/helpers/constants.d.ts

@@ -83,1 +83,2 @@ import { IosOffsets } from './constants.interfaces';
 export declare const IOS_OFFSETS: IosOffsets;
+export declare const supportedIosBezelDevices: string[];

build/helpers/constants.interfaces.d.ts

@@ -20,4 +20,2 @@ export interface AndroidOffsets {
             [key in OrientationEnum]: {
-                SAFE_AREA: number;
-                STATUS_BAR: number;
                 ADDRESS_BAR: number;
@@ -30,2 +28,4 @@ HOME_BAR: {
                 };
+                SAFE_AREA: number;
+                STATUS_BAR: number;
             };
@@ -32,0 +32,0 @@ };

build/helpers/constants.js

@@ -14,3 +14,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IOS_OFFSETS = exports.ANDROID_OFFSETS = exports.DEFAULT_TABBABLE_OPTIONS = exports.FULL_PAGE_SCROLL_TIMEOUT = exports.DEFAULT_RESIZE_DIMENSIONS = exports.CUSTOM_CSS_ID = exports.DESKTOP = exports.DEFAULT_SHADOW = exports.FOLDERS = exports.PLATFORMS = exports.DEFAULT_FORMAT_STRING = void 0;
+exports.supportedIosBezelDevices = exports.IOS_OFFSETS = exports.ANDROID_OFFSETS = exports.DEFAULT_TABBABLE_OPTIONS = exports.FULL_PAGE_SCROLL_TIMEOUT = exports.DEFAULT_RESIZE_DIMENSIONS = exports.CUSTOM_CSS_ID = exports.DESKTOP = exports.DEFAULT_SHADOW = exports.FOLDERS = exports.PLATFORMS = exports.DEFAULT_FORMAT_STRING = void 0;
 exports.DEFAULT_FORMAT_STRING = '{tag}-{browserName}-{width}x{height}-dpr-{dpr}';
@@ -131,2 +131,16 @@ exports.PLATFORMS = {
         },
+        852: {
+            LANDSCAPE: {
+                SAFE_AREA: 59,
+                STATUS_BAR: 0,
+                ADDRESS_BAR: 50,
+                HOME_BAR: { x: 316, y: 378, height: 9, width: 220 },
+            },
+            PORTRAIT: {
+                SAFE_AREA: 59,
+                STATUS_BAR: 59,
+                ADDRESS_BAR: 50,
+                HOME_BAR: { x: 125, y: 837, height: 9, width: 143 },
+            },
+        },
         896: {
@@ -160,2 +174,16 @@ LANDSCAPE: {
         },
+        932: {
+            LANDSCAPE: {
+                SAFE_AREA: 59,
+                STATUS_BAR: 0,
+                ADDRESS_BAR: 50,
+                HOME_BAR: { x: 345, y: 415, height: 9, width: 242 },
+            },
+            PORTRAIT: {
+                SAFE_AREA: 59,
+                STATUS_BAR: 59,
+                ADDRESS_BAR: 50,
+                HOME_BAR: { x: 137, y: 917, height: 9, width: 158 },
+            },
+        },
     },
@@ -263,2 +291,27 @@ IPAD: {
 };
+exports.supportedIosBezelDevices = [
+    'iphonex',
+    'iphonexs',
+    'iphonexsmax',
+    'iphonexr',
+    'iphone11',
+    'iphone11pro',
+    'iphone11promax',
+    'iphone12',
+    'iphone12mini',
+    'iphone12pro',
+    'iphone12promax',
+    'iphone13',
+    'iphone13mini',
+    'iphone13pro',
+    'iphone13promax',
+    'iphone14',
+    'iphone14plus',
+    'iphone14pro',
+    'iphone14promax',
+    'ipadmini',
+    'ipadair',
+    'ipadpro11',
+    'ipadpro129',
+];
 //# sourceMappingURL=constants.js.map

build/helpers/options.interface.d.ts

 import { TabbableOptions } from '../commands/tabbable.interfaces';
 export interface ClassOptions {
     addressBarShadowPadding?: number;
+    addIOSBezelCorners?: boolean;
     autoSaveBaseline?: boolean;
@@ -32,14 +33,15 @@ baselineFolder?: any;
     addressBarShadowPadding: number;
+    addIOSBezelCorners: boolean;
     autoSaveBaseline: boolean;
     clearFolder: boolean;
+    compareOptions: CompareOptions;
+    disableCSSAnimation: boolean;
     formatImageName: string;
-    isHybridApp: boolean;
-    savePerInstance: boolean;
-    toolBarShadowPadding: number;
-    disableCSSAnimation: boolean;
     fullPageScrollTimeout: number;
     hideScrollBars: boolean;
+    isHybridApp: boolean;
     logLevel: LogLevel;
-    compareOptions: CompareOptions;
+    savePerInstance: boolean;
     tabbableOptions: TabbableOptions;
+    toolBarShadowPadding: number;
 }
@@ -46,0 +48,0 @@ interface CompareOptions {

build/helpers/options.js

@@ -20,2 +20,3 @@ "use strict";
         addressBarShadowPadding: options.addressBarShadowPadding || constants_1.DEFAULT_SHADOW.ADDRESS_BAR,
+        addIOSBezelCorners: options.addIOSBezelCorners || false,
         autoSaveBaseline: options.autoSaveBaseline || false,
@@ -22,0 +23,0 @@ clearFolder: options.clearRuntimeFolder || false,

build/helpers/utils.d.ts

@@ -16,1 +16,5 @@ import { FormatFileNameOptions, GetAddressBarShadowPaddingOptions, GetAndCreatePathOptions, GetToolBarShadowPaddingOptions, ScreenshotSize } from './utils.interfaces';
 export declare function getScreenshotSize(screenshot: string, devicePixelRation?: number): ScreenshotSize;
+export declare function getIosBezelImageNames(normalizedDeviceName: string): {
+    topImageName: string;
+    bottomImageName: string;
+};

build/helpers/utils.js

@@ -39,3 +39,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.getIosBezelImageNames = 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 path_1 = require("path");
@@ -145,2 +145,101 @@ var constants_1 = require("./constants");
 exports.getScreenshotSize = getScreenshotSize;
+function getIosBezelImageNames(normalizedDeviceName) {
+    var topImageName, bottomImageName;
+    switch (normalizedDeviceName) {
+        case 'iphonex':
+            topImageName = 'iphonex.iphonexs.iphone11pro-top';
+            bottomImageName = 'iphonex.iphonexs.iphone11pro-bottom';
+            break;
+        case 'iphonexs':
+            topImageName = 'iphonex.iphonexs.iphone11pro-top';
+            bottomImageName = 'iphonex.iphonexs.iphone11pro-bottom';
+            break;
+        case 'iphonexsmax':
+            topImageName = 'iphonexsmax-top';
+            bottomImageName = 'iphonexsmax-bottom';
+            break;
+        case 'iphonexr':
+            topImageName = 'iphonexr.iphone11-top';
+            bottomImageName = 'iphonexr.iphone11-bottom';
+            break;
+        case 'iphone11':
+            topImageName = 'iphonexr.iphone11-top';
+            bottomImageName = 'iphonexr.iphone11-bottom';
+            break;
+        case 'iphone11pro':
+            topImageName = 'iphonex.iphonexs.iphone11pro-top';
+            bottomImageName = 'iphonex.iphonexs.iphone11pro-bottom';
+            break;
+        case 'iphone11promax':
+            topImageName = 'iphone11promax-top';
+            bottomImageName = 'iphone11promax-bottom';
+            break;
+        case 'iphone12':
+            topImageName = 'iphone12.iphone12pro-top';
+            bottomImageName = 'iphone12.iphone12pro.iphone13.iphone13pro.iphone14-bottom';
+            break;
+        case 'iphone12mini':
+            topImageName = 'iphone12mini-top';
+            bottomImageName = 'iphone12mini.iphone13mini-bottom';
+            break;
+        case 'iphone12pro':
+            topImageName = 'iphone12.iphone12pro-top';
+            bottomImageName = 'iphone12.iphone12pro.iphone13.iphone13pro.iphone14-bottom';
+            break;
+        case 'iphone12promax':
+            topImageName = 'iphone12promax-top';
+            bottomImageName = 'iphone12promax.iphone13promax.iphone14plus-bottom';
+            break;
+        case 'iphone13':
+            topImageName = 'iphone13.iphone13pro.iphone14-top';
+            bottomImageName = 'iphone12.iphone12pro.iphone13.iphone13pro.iphone14-bottom';
+            break;
+        case 'iphone13mini':
+            topImageName = 'iphone13mini-top';
+            bottomImageName = 'iphone12mini.iphone13mini-bottom';
+            break;
+        case 'iphone13pro':
+            topImageName = 'iphone13.iphone13pro.iphone14-top';
+            bottomImageName = 'iphone12.iphone12pro.iphone13.iphone13pro.iphone14-bottom';
+            break;
+        case 'iphone13promax':
+            topImageName = 'iphone13promax.iphone14plus-top';
+            bottomImageName = 'iphone12promax.iphone13promax.iphone14plus-bottom';
+            break;
+        case 'iphone14':
+            topImageName = 'iphone13.iphone13pro.iphone14-top';
+            bottomImageName = 'iphone12.iphone12pro.iphone13.iphone13pro.iphone14-bottom';
+            break;
+        case 'iphone14plus':
+            topImageName = 'iphone13promax.iphone14plus-top';
+            bottomImageName = 'iphone12promax.iphone13promax.iphone14plus-bottom';
+            break;
+        case 'iphone14pro':
+            topImageName = 'iphone14pro-top';
+            bottomImageName = 'iphone14pro-bottom';
+            break;
+        case 'iphone14promax':
+            topImageName = 'iphone14promax-top';
+            bottomImageName = 'iphone14promax-bottom';
+            break;
+        case 'ipadmini':
+            topImageName = 'ipadmini6th-top';
+            bottomImageName = 'ipadmini6th-bottom';
+            break;
+        case 'ipadair':
+            topImageName = 'ipadair4th.ipadair5th-top';
+            bottomImageName = 'ipadair4th.ipadair5th-bottom';
+            break;
+        case 'ipadpro11':
+            topImageName = 'ipadpro11-top';
+            bottomImageName = 'ipadpro11-bottom';
+            break;
+        case 'ipadpro129':
+            topImageName = 'ipadpro129-top';
+            bottomImageName = 'ipadpro129-bottom';
+            break;
+    }
+    return { topImageName: topImageName, bottomImageName: bottomImageName };
+}
+exports.getIosBezelImageNames = getIosBezelImageNames;
 //# sourceMappingURL=utils.js.map

build/methods/images.d.ts

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

build/methods/images.interfaces.d.ts

@@ -89,4 +89,7 @@ import { RectanglesOutput } from './rectangles.interfaces';
 export interface CroppedBase64Image {
+    addIOSBezelCorners: boolean;
     base64Image: string;
+    deviceName: string;
     devicePixelRatio: number;
+    isIos: boolean;
     isLandscape: boolean;
@@ -93,0 +96,0 @@ logLevel: LogLevel;

build/methods/images.js

@@ -51,3 +51,2 @@ "use strict";
 exports.addBlockOuts = exports.saveBase64Image = exports.makeFullPageBase64Image = exports.executeImageCompare = exports.makeCroppedBase64Image = exports.checkBaselineImageExists = void 0;
-var chalk_1 = require("chalk");
 var fs_extra_1 = require("fs-extra");
@@ -71,11 +70,11 @@ var path_1 = require("path");
                                     if (logLevel === options_interface_1.LogLevel.info) {
-                                        console.log((0, chalk_1.yellow)("\n#####################################################################################\n INFO:\n Autosaved the image to\n ".concat(baselineFilePath, "\n#####################################################################################\n")));
+                                        console.log('\x1b[33m%s\x1b[0m', "\n#####################################################################################\n INFO:\n Autosaved the image to\n ".concat(baselineFilePath, "\n#####################################################################################\n"));
                                     }
                                 }
                                 catch (error) {
-                                    reject((0, chalk_1.red)("\n#####################################################################################\n Image could not be copied. The following error was thrown:\n ".concat(error, "\n#####################################################################################\n")));
+                                    reject("\n#####################################################################################\n Image could not be copied. The following error was thrown:\n ".concat(error, "\n#####################################################################################\n"));
                                 }
                             }
                             else {
-                                reject((0, chalk_1.red)("\n#####################################################################################\n Baseline image not found, save the actual image manually to the baseline.\n The image can be found here:\n ".concat(actualFilePath, "\n If you want the module to auto save a non existing image to the baseline you\n can provide 'autoSaveBaseline: true' to the options.\n#####################################################################################\n")));
+                                reject("\n#####################################################################################\n Baseline image not found, save the actual image manually to the baseline.\n The image can be found here:\n ".concat(actualFilePath, "\n If you want the module to auto save a non existing image to the baseline you\n can provide 'autoSaveBaseline: true' to the options.\n#####################################################################################\n"));
                             }
@@ -91,7 +90,7 @@ }
 function makeCroppedBase64Image(_a) {
-    var base64Image = _a.base64Image, devicePixelRatio = _a.devicePixelRatio, isLandscape = _a.isLandscape, logLevel = _a.logLevel, rectangles = _a.rectangles, _b = _a.resizeDimensions, resizeDimensions = _b === void 0 ? constants_1.DEFAULT_RESIZE_DIMENSIONS : _b;
+    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_1.DEFAULT_RESIZE_DIMENSIONS : _b;
     return __awaiter(this, void 0, void 0, function () {
-        var _c, screenshotHeight, screenshotWidth, isRotated, newBase64Image, _d, resizeValues, _e, top, right, bottom, left, height, width, x, y, canvasWidth, canvasHeight, canvas, image, ctx, sourceXStart, sourceYStart;
-        return __generator(this, function (_f) {
-            switch (_f.label) {
+        var _c, screenshotHeight, screenshotWidth, isRotated, newBase64Image, _d, resizeValues, _e, top, right, bottom, left, height, width, x, y, canvasWidth, canvasHeight, canvas, image, ctx, sourceXStart, sourceYStart, normalizedDeviceName, isSupported, isIosBezelError, _f, topImageName, bottomImageName, topImage, bottomImage, topBase64Image, _g, bottomBase64Image, _h, _j, _k, _l, _m;
+        return __generator(this, function (_o) {
+            switch (_o.label) {
                 case 0:
@@ -103,7 +102,7 @@ _c = (0, utils_1.getScreenshotSize)(base64Image, devicePixelRatio), screenshotHeight = _c.height, screenshotWidth = _c.width;
                 case 1:
-                    _d = _f.sent();
+                    _d = _o.sent();
                     return [3, 3];
                 case 2:
                     _d = base64Image;
-                    _f.label = 3;
+                    _o.label = 3;
                 case 3:
@@ -119,3 +118,3 @@ newBase64Image = _d;
                         if (logLevel === options_interface_1.LogLevel.debug || logLevel === options_interface_1.LogLevel.warn) {
-                            console.log((0, chalk_1.yellow)("\n#####################################################################################\n WARNING:\n THE 'resizeDimensions' NEEDS TO BE AN OBJECT LIKE\n {\n    top: 10,\n    right: 20,\n    bottom: 15,\n    left: 25,\n }\n NOW IT WILL BE DEFAULTED TO\n  {\n    top: ".concat(resizeDimensions, ",\n    right: ").concat(resizeDimensions, ",\n    bottom: ").concat(resizeDimensions, ",\n    left: ").concat(resizeDimensions, ",\n }\n THIS IS DEPRACATED AND WILL BE REMOVED IN A NEW MAJOR RELEASE\n#####################################################################################\n")));
+                            console.log('\x1b[33m%s\x1b[0m', "\n#####################################################################################\n WARNING:\n THE 'resizeDimensions' NEEDS TO BE AN OBJECT LIKE\n {\n    top: 10,\n    right: 20,\n    bottom: 15,\n    left: 25,\n }\n NOW IT WILL BE DEFAULTED TO\n  {\n    top: ".concat(resizeDimensions, ",\n    right: ").concat(resizeDimensions, ",\n    bottom: ").concat(resizeDimensions, ",\n    left: ").concat(resizeDimensions, ",\n }\n THIS IS DEPRECATED AND WILL BE REMOVED IN A NEW MAJOR RELEASE\n#####################################################################################\n"));
                         }
@@ -133,3 +132,3 @@ }
                 case 4:
-                    image = _f.sent();
+                    image = _o.sent();
                     ctx = canvas.getContext('2d');
@@ -140,3 +139,3 @@ sourceXStart = x - left;
                         if (logLevel === options_interface_1.LogLevel.debug || logLevel === options_interface_1.LogLevel.warn) {
-                            console.log((0, chalk_1.yellow)("\n#####################################################################################\n THE RESIZE DIMENSION LEFT '".concat(left, "' MADE THE CROPPING GO OUT OF\n THE IMAGE BOUNDARIES RESULTING IN AN IMAGE STARTPOSITION '").concat(sourceXStart, "'.\n THIS HAS BEEN DEFAULTED TO '0'\n#####################################################################################\n")));
+                            console.log('\x1b[33m%s\x1b[0m', "\n#####################################################################################\n THE RESIZE DIMENSION LEFT '".concat(left, "' MADE THE CROPPING GO OUT OF\n THE IMAGE BOUNDARIES RESULTING IN AN IMAGE STARTPOSITION '").concat(sourceXStart, "'.\n THIS HAS BEEN DEFAULTED TO '0'\n#####################################################################################\n"));
                         }
@@ -147,3 +146,3 @@ sourceXStart = 0;
                         if (logLevel === options_interface_1.LogLevel.debug || logLevel === options_interface_1.LogLevel.warn) {
-                            console.log((0, chalk_1.yellow)("\n#####################################################################################\n THE RESIZE DIMENSION LEFT '".concat(top, "' MADE THE CROPPING GO OUT OF\n THE IMAGE BOUNDARIES RESULTING IN AN IMAGE STARTPOSITION '").concat(sourceYStart, "'.\n THIS HAS BEEN DEFAULTED TO '0'\n#####################################################################################\n")));
+                            console.log('\x1b[33m%s\x1b[0m', "\n#####################################################################################\n THE RESIZE DIMENSION LEFT '".concat(top, "' MADE THE CROPPING GO OUT OF\n THE IMAGE BOUNDARIES RESULTING IN AN IMAGE STARTPOSITION '").concat(sourceYStart, "'.\n THIS HAS BEEN DEFAULTED TO '0'\n#####################################################################################\n"));
                         }
@@ -153,2 +152,65 @@ sourceYStart = 0;
                     ctx.drawImage(image, sourceXStart, sourceYStart, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
+                    normalizedDeviceName = deviceName
+                        .toLowerCase()
+                        .replace(/([^A-Za-z0-9]|simulator|inch|(\d(st|nd|rd|th)) generation)/gi, '');
+                    isSupported = (normalizedDeviceName.includes('iphone') && constants_1.supportedIosBezelDevices.includes(normalizedDeviceName)) ||
+                        (normalizedDeviceName.includes('ipad') &&
+                            constants_1.supportedIosBezelDevices.includes(normalizedDeviceName) &&
+                            (canvasHeight / devicePixelRatio >= 1133 || canvasWidth / devicePixelRatio >= 1133));
+                    isIosBezelError = false;
+                    if (!(addIOSBezelCorners && isIos && isSupported)) return [3, 14];
+                    _f = (0, utils_1.getIosBezelImageNames)(normalizedDeviceName), topImageName = _f.topImageName, bottomImageName = _f.bottomImageName;
+                    if (!(topImageName && bottomImageName)) return [3, 13];
+                    topImage = (0, fs_extra_1.readFileSync)((0, path_1.join)(__dirname, "../assets/ios/".concat(topImageName, ".png"))).toString('base64');
+                    bottomImage = (0, fs_extra_1.readFileSync)((0, path_1.join)(__dirname, "../assets/ios/".concat(bottomImageName, ".png"))).toString('base64');
+                    if (!isLandscape) return [3, 6];
+                    return [4, rotateBase64Image({
+                            base64Image: topImage,
+                            degrees: -90,
+                            newHeight: (0, utils_1.getScreenshotSize)(topImage).width,
+                            newWidth: (0, utils_1.getScreenshotSize)(topImage).height,
+                        })];
+                case 5:
+                    _g = _o.sent();
+                    return [3, 7];
+                case 6:
+                    _g = topImage;
+                    _o.label = 7;
+                case 7:
+                    topBase64Image = _g;
+                    if (!isLandscape) return [3, 9];
+                    return [4, rotateBase64Image({
+                            base64Image: bottomImage,
+                            degrees: -90,
+                            newHeight: (0, utils_1.getScreenshotSize)(topImage).width,
+                            newWidth: (0, utils_1.getScreenshotSize)(topImage).height,
+                        })];
+                case 8:
+                    _h = _o.sent();
+                    return [3, 10];
+                case 9:
+                    _h = bottomImage;
+                    _o.label = 10;
+                case 10:
+                    bottomBase64Image = _h;
+                    _k = (_j = ctx).drawImage;
+                    return [4, (0, canvas_1.loadImage)("data:image/png;base64,".concat(topBase64Image))];
+                case 11:
+                    _k.apply(_j, [_o.sent(), 0, 0]);
+                    _m = (_l = ctx).drawImage;
+                    return [4, (0, canvas_1.loadImage)("data:image/png;base64,".concat(bottomBase64Image))];
+                case 12:
+                    _m.apply(_l, [_o.sent(), isLandscape ? canvasWidth - (0, utils_1.getScreenshotSize)(bottomImage).height : 0,
+                        isLandscape ? 0 : canvasHeight - (0, utils_1.getScreenshotSize)(bottomImage).height]);
+                    return [3, 14];
+                case 13:
+                    isIosBezelError = true;
+                    _o.label = 14;
+                case 14:
+                    if (addIOSBezelCorners && isIos && !isSupported) {
+                        isIosBezelError = true;
+                    }
+                    if (isIosBezelError) {
+                        console.log('\x1b[33m%s\x1b[0m', "\n#####################################################################################\n WARNING:\n We could not find the bezel corners for the device '".concat(deviceName, "'.\n The normalized device name is '").concat(normalizedDeviceName, "'\n and couldn't be found in the supported devices:\n ").concat(constants_1.supportedIosBezelDevices.join(', '), "\n#####################################################################################\n"));
+                    }
                     return [2, canvas.toDataURL().replace(/^data:image\/png;base64,/, '')];
@@ -163,3 +225,3 @@ }
     return __awaiter(this, void 0, void 0, function () {
-        var devicePixelRatio, fileName, isAndroidNativeWebScreenshot, isHybridApp, isLandscape, logLevel, platformName, _a, actualFolder, autoSaveBaseline, baselineFolder, browserName, deviceName, diffFolder, isMobile, savePerInstance, diffFilePath, imageCompareOptions, createFolderOptions, actualFolderPath, baselineFolderPath, actualFilePath, baselineFilePath, resembleIgnoreDefaults, ignore, blockOut, statusAddressToolBarOptions, ignoredBoxes, _b, _c, compareOptions, data, misMatchPercentage, isDifference, isDifferenceMessage, debugMessage, diffFolderPath, _d;
+        var devicePixelRatio, fileName, isAndroidNativeWebScreenshot, isHybridApp, isLandscape, logLevel, platformName, _a, actualFolder, autoSaveBaseline, baselineFolder, browserName, deviceName, diffFolder, isMobile, savePerInstance, diffFilePath, imageCompareOptions, createFolderOptions, actualFolderPath, baselineFolderPath, actualFilePath, baselineFilePath, resembleIgnoreDefaults, ignore, blockOut, statusAddressToolBarOptions, ignoredBoxes, _b, _c, compareOptions, data, rawMisMatchPercentage, reportMisMatchPercentage, isDifference, isDifferenceMessage, debugMessage, diffFolderPath, _d;
         return __generator(this, function (_e) {
@@ -214,7 +276,6 @@ switch (_e.label) {
                     data = _e.sent();
-                    misMatchPercentage = imageCompareOptions.rawMisMatchPercentage
-                        ? data.rawMisMatchPercentage
-                        : Number(data.rawMisMatchPercentage.toFixed(2));
-                    if (!(misMatchPercentage > imageCompareOptions.saveAboveTolerance || logLevel === options_interface_1.LogLevel.debug)) return [3, 6];
-                    isDifference = misMatchPercentage > imageCompareOptions.saveAboveTolerance;
+                    rawMisMatchPercentage = data.rawMisMatchPercentage;
+                    reportMisMatchPercentage = imageCompareOptions.rawMisMatchPercentage ? rawMisMatchPercentage : data.misMatchPercentage;
+                    if (!(rawMisMatchPercentage > imageCompareOptions.saveAboveTolerance || logLevel === options_interface_1.LogLevel.debug)) return [3, 6];
+                    isDifference = rawMisMatchPercentage > imageCompareOptions.saveAboveTolerance;
                     isDifferenceMessage = 'WARNING:\n There was a difference. Saved the difference to';
@@ -230,3 +291,3 @@ debugMessage = 'INFO:\n Debug mode is enabled. Saved the debug file to:';
                     if (logLevel === options_interface_1.LogLevel.debug || logLevel === options_interface_1.LogLevel.warn) {
-                        console.log((0, chalk_1.yellow)("\n#####################################################################################\n ".concat(isDifference ? isDifferenceMessage : debugMessage, "\n ").concat(diffFilePath, "\n#####################################################################################\n")));
+                        console.log('\x1b[33m%s\x1b[0m', "\n#####################################################################################\n ".concat(isDifference ? isDifferenceMessage : debugMessage, "\n ").concat(diffFilePath, "\n#####################################################################################\n"));
                     }
@@ -238,5 +299,5 @@ _e.label = 6;
                             folders: __assign({ actual: actualFilePath, baseline: baselineFilePath }, (diffFilePath ? { diff: diffFilePath } : {})),
-                            misMatchPercentage: misMatchPercentage,
+                            misMatchPercentage: reportMisMatchPercentage,
                         }
-                        : misMatchPercentage];
+                        : reportMisMatchPercentage];
             }
@@ -353,2 +414,28 @@ });
 }
+function createDeviceBezelCorners(_a) {
+    var ctx = _a.ctx, x = _a.x, y = _a.y, width = _a.width, height = _a.height, radius = _a.radius;
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + width - radius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    ctx.lineTo(x + radius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+}
+function createNotch(_a) {
+    var ctx = _a.ctx, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
+    var radius = Math.round((height > width ? width : height) / 2);
+    createDeviceBezelCorners({
+        ctx: ctx,
+        x: x,
+        y: y,
+        width: width,
+        height: height,
+        radius: radius,
+    });
+}
 //# sourceMappingURL=images.js.map

build/methods/screenshots.js

@@ -51,3 +51,2 @@ "use strict";
 exports.takeBase64Screenshot = exports.getFullPageScreenshotsDataDesktop = exports.getFullPageScreenshotsDataAndroidChromeDriver = exports.getFullPageScreenshotsDataNativeMobile = exports.getBase64FullPageScreenshotsData = void 0;
-var chalk_1 = require("chalk");
 var scrollToPosition_1 = require("../clientSideScripts/scrollToPosition");
@@ -369,5 +368,5 @@ var getDocumentScrollHeight_1 = require("../clientSideScripts/getDocumentScrollHeight");
     if (logLevel === options_interface_1.LogLevel.debug || logLevel === options_interface_1.LogLevel.warn) {
-        console.log((0, chalk_1.yellow)("\n#####################################################################################\n WARNING:\n (One of) the elements that needed to be hidden or removed could not be found on the\n page and caused this error\n Error: ".concat(error, "\n We made sure the test didn't break.\n#####################################################################################\n")));
+        console.log('\x1b[33m%s\x1b[0m', "\n#####################################################################################\n WARNING:\n (One of) the elements that needed to be hidden or removed could not be found on the\n page and caused this error\n Error: ".concat(error, "\n We made sure the test didn't break.\n#####################################################################################\n"));
     }
 }
 //# sourceMappingURL=screenshots.js.map

package.json

 {
   "name": "webdriver-image-comparison",
-  "version": "0.22.0",
+  "version": "1.0.0",
   "description": "An image compare module that can be used for different NodeJS Test automation frameworks that support the webdriver protocol",
@@ -8,5 +8,6 @@ "main": "./build/index.js",
   "scripts": {
-    "compile": "tsc --allowJs true --declaration false && tsc",
+    "compile": "npm run copy-files && tsc --allowJs true --declaration false && tsc",
     "lint": "eslint lib/**/*.ts",
     "clean": "rimraf coverage build tmp",
+    "copy-files": "npx copyfiles -u 1 lib/assets/**/*.png build/",
     "pretest": "npm run lint",
@@ -37,8 +38,6 @@ "test": "jest",
   "dependencies": {
-    "canvas": "^2.9.3",
-    "chalk": "^4.1.2",
+    "canvas": "^2.10.1",
     "fs-extra": "^10.0.1"
   },
   "devDependencies": {
-    "@types/chalk": "^2.2.0",
     "@types/fs-extra": "^9.0.13",
@@ -50,2 +49,3 @@ "@types/jest": "^27.4.1",
     "@typescript-eslint/parser": "^5.30.7",
+    "copyfiles": "^2.4.1",
     "eslint": "^8.20.0",
@@ -52,0 +52,0 @@ "eslint-config-prettier": "^8.5.0",

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2087287

increased by14.81%

Dependency count

2

decreased by-33.33%

Number of package files

278

increased by11.2%

Lines of code

10644

increased by2.19%

Number of low quality alerts

0

decreased by-100%

Dependency changes

• - Removedchalk@^4.1.2

• - Removedansi-styles@4.3.0(transitive)

• - Removedchalk@4.1.2(transitive)

• - Removedcolor-convert@2.0.1(transitive)

• - Removedcolor-name@1.1.4(transitive)

• - Removedhas-flag@4.0.0(transitive)

• - Removedsupports-color@7.2.0(transitive)

• Updatedcanvas@^2.10.1