diff --git a/lib/commands/saveElement.ts b/lib/commands/saveElement.ts index 59da02e..e8c2f5a 100644 --- a/lib/commands/saveElement.ts +++ b/lib/commands/saveElement.ts @@ -53,7 +53,7 @@ export default async function saveElement( const enrichedInstanceData: BeforeScreenshotResult = await beforeScreenshot(methods.executor, beforeOptions, true); // 3. Take the screenshot - const screenshot: string = await takeBase64Screenshot(methods.screenShot); + const base64Image: string = await takeBase64Screenshot(methods.screenShot); // 4. Determine the rectangles const elementRectangleOptions: ElementRectanglesOptions = { @@ -63,10 +63,15 @@ export default async function saveElement( isAndroid: enrichedInstanceData.isAndroid, isIos: enrichedInstanceData.isIos, }; - const rectangles: RectanglesOutput = await determineElementRectangles(methods.executor, screenshot, elementRectangleOptions, element); + const rectangles: RectanglesOutput = await determineElementRectangles({ + executor: methods.executor, + base64Image, + options: elementRectangleOptions, + element + }); // 5. Make a cropped base64 image with resizeDimensions - const croppedBase64Image = await makeCroppedBase64Image(screenshot, rectangles, logLevel, resizeDimensions); + const croppedBase64Image = await makeCroppedBase64Image({base64Image, rectangles, logLevel, resizeDimensions}); // 6. The after the screenshot methods const afterOptions: AfterScreenshotOptions = { diff --git a/lib/commands/saveScreen.ts b/lib/commands/saveScreen.ts index 079474a..39773ee 100644 --- a/lib/commands/saveScreen.ts +++ b/lib/commands/saveScreen.ts @@ -49,7 +49,7 @@ export default async function saveScreen( const enrichedInstanceData: BeforeScreenshotResult = await beforeScreenshot(methods.executor, beforeOptions); // 3. Take the screenshot - const screenshot:string = await takeBase64Screenshot(methods.screenShot); + const base64Image:string = await takeBase64Screenshot(methods.screenShot); // Determine the rectangles const screenRectangleOptions: ScreenRectanglesOptions = { @@ -60,10 +60,10 @@ export default async function saveScreen( isAndroidNativeWebScreenshot: enrichedInstanceData.isAndroidNativeWebScreenshot, isIos: enrichedInstanceData.isIos, }; - const rectangles: RectanglesOutput = determineScreenRectangles(screenshot, screenRectangleOptions); + const rectangles: RectanglesOutput = determineScreenRectangles(base64Image, screenRectangleOptions); // 4. Make a cropped base64 image - const croppedBase64Image: string = await makeCroppedBase64Image(screenshot, rectangles, logLevel); + const croppedBase64Image: string = await makeCroppedBase64Image({base64Image, rectangles, logLevel}); // 5. The after the screenshot methods const afterOptions: AfterScreenshotOptions = { diff --git a/lib/methods/images.interfaces.ts b/lib/methods/images.interfaces.ts index d07cad2..b5c0fd4 100644 --- a/lib/methods/images.interfaces.ts +++ b/lib/methods/images.interfaces.ts @@ -1,5 +1,6 @@ import {RectanglesOutput} from './rectangles.interfaces'; import {LogLevel} from "../helpers/options.interface"; +import {DEFAULT_RESIZE_DIMENSIONS} from "../helpers/constants"; export interface ResizeDimensions { // The bottom margin @@ -89,7 +90,7 @@ export interface MethodImageCompareCompareOptions { // Allowable value of misMatchPercentage that prevents saving image with differences saveAboveTolerance?: number; //Scale images to same size before comparison - scaleImagesToSameSize?:boolean; + scaleImagesToSameSize?: boolean; } export interface ImageCompareFolderOptions { @@ -132,7 +133,7 @@ export interface CompareOptions { output?: { ignoredBoxes?: IgnoreBoxes[] }; - scaleToSameSize? : boolean; + scaleToSameSize?: boolean; } export interface IgnoreBoxes { @@ -141,3 +142,10 @@ export interface IgnoreBoxes { left: number; top: number; } + +export interface CroppedBase64Image { + base64Image: string; + rectangles: RectanglesOutput; + logLevel: LogLevel; + resizeDimensions?: number | ResizeDimensions; +} diff --git a/lib/methods/images.ts b/lib/methods/images.ts index 8a9dbeb..3fd09ee 100644 --- a/lib/methods/images.ts +++ b/lib/methods/images.ts @@ -7,7 +7,7 @@ import {DEFAULT_RESIZE_DIMENSIONS} from '../helpers/constants'; import {determineStatusAddressToolBarRectangles} from './rectangles'; import {RectanglesOutput} from './rectangles.interfaces'; import { - CompareOptions, + CompareOptions, CroppedBase64Image, IgnoreBoxes, ImageCompareOptions, ImageCompareResult, @@ -73,12 +73,12 @@ export async function checkBaselineImageExists( /** * Make a cropped image with Canvas */ -export async function makeCroppedBase64Image( - base64Image: string, - rectangles: RectanglesOutput, - logLevel: LogLevel, - resizeDimensions: number | ResizeDimensions = DEFAULT_RESIZE_DIMENSIONS, -): Promise { +export async function makeCroppedBase64Image({ + base64Image, + rectangles, + logLevel, + resizeDimensions = DEFAULT_RESIZE_DIMENSIONS, + }: CroppedBase64Image): Promise { /** * This is in for backwards compatibility, it will be removed in the future */ diff --git a/lib/methods/rectangles.interfaces.ts b/lib/methods/rectangles.interfaces.ts index 8b7a6c0..ef5f492 100644 --- a/lib/methods/rectangles.interfaces.ts +++ b/lib/methods/rectangles.interfaces.ts @@ -1,3 +1,5 @@ +import {Executor} from "./methods.interface"; + export interface RectanglesOptions { // The device pixel ration of the screen / device devicePixelRatio: number; @@ -48,3 +50,10 @@ export interface StatusAddressToolBarRectanglesOptions { export interface StatusAddressToolBarRectangles extends Array{ } + +export interface ElementRectangles{ + executor: Executor; + base64Image: string; + options: ElementRectanglesOptions; + element: any; +} diff --git a/lib/methods/rectangles.spec.ts b/lib/methods/rectangles.spec.ts index 8c91b69..cf2ea61 100644 --- a/lib/methods/rectangles.spec.ts +++ b/lib/methods/rectangles.spec.ts @@ -1,4 +1,8 @@ -import {determineElementRectangles, determineScreenRectangles, determineStatusAddressToolBarRectangles} from './rectangles'; +import { + determineElementRectangles, + determineScreenRectangles, + determineStatusAddressToolBarRectangles +} from './rectangles'; import {IMAGE_STRING} from '../mocks/mocks'; describe('rectangles', () => { @@ -12,7 +16,7 @@ describe('rectangles', () => { isIos: true, }; const MOCKED_EXECUTOR = jest.fn() - // getElementPositionIos for: getIosStatusAddressToolBarHeight + // getElementPositionIos for: getIosStatusAddressToolBarHeight .mockResolvedValueOnce( { statusAddressBar: { @@ -37,7 +41,12 @@ describe('rectangles', () => { y: 10, }); - expect(await determineElementRectangles(MOCKED_EXECUTOR, IMAGE_STRING, options, 'element')).toMatchSnapshot(); + expect(await determineElementRectangles({ + executor: MOCKED_EXECUTOR, + base64Image: IMAGE_STRING, + options, + element: 'element', + })).toMatchSnapshot(); }); it('should determine them for Android Native webscreenshot', async () => { @@ -49,7 +58,7 @@ describe('rectangles', () => { isIos: false, }; const MOCKED_EXECUTOR = jest.fn() - // getElementPositionAndroid for: getAndroidStatusAddressToolBarHeight + // getElementPositionAndroid for: getAndroidStatusAddressToolBarHeight .mockResolvedValueOnce( { statusAddressBar: { @@ -74,7 +83,12 @@ describe('rectangles', () => { y: 10, }); - expect(await determineElementRectangles(MOCKED_EXECUTOR, IMAGE_STRING, options, 'element')).toMatchSnapshot(); + expect(await determineElementRectangles({ + executor: MOCKED_EXECUTOR, + base64Image: IMAGE_STRING, + options, + element: 'element', + })).toMatchSnapshot(); }); it('should determine them for Android ChromeDriver', async () => { @@ -86,7 +100,7 @@ describe('rectangles', () => { isIos: false, }; const MOCKED_EXECUTOR = jest.fn() - // getElementPositionAndroid for: getElementPositionTopWindow + // getElementPositionAndroid for: getElementPositionTopWindow .mockResolvedValueOnce( { height: 20, @@ -95,7 +109,12 @@ describe('rectangles', () => { y: 0, }); - expect(await determineElementRectangles(MOCKED_EXECUTOR, IMAGE_STRING, options, 'element')).toMatchSnapshot(); + expect(await determineElementRectangles({ + executor: MOCKED_EXECUTOR, + base64Image: IMAGE_STRING, + options, + element: 'element', + })).toMatchSnapshot(); }); it('should determine them for a desktop browser', async () => { @@ -107,7 +126,7 @@ describe('rectangles', () => { isIos: false, }; const MOCKED_EXECUTOR = jest.fn() - // getElementPositionDesktop for: getElementPositionTopWindow + // getElementPositionDesktop for: getElementPositionTopWindow .mockResolvedValueOnce( { height: 20, @@ -116,7 +135,12 @@ describe('rectangles', () => { y: 34, }); - expect(await determineElementRectangles(MOCKED_EXECUTOR, IMAGE_STRING, options, 'element')).toMatchSnapshot(); + expect(await determineElementRectangles({ + executor: MOCKED_EXECUTOR, + base64Image: IMAGE_STRING, + options, + element: 'element', + })).toMatchSnapshot(); }); }); @@ -173,22 +197,22 @@ describe('rectangles', () => { blockOutToolBar: true, }; const MOCKED_EXECUTOR = jest.fn() - // determineStatusAddressToolBarRectangles for: getIosStatusAddressToolBarHeight + // determineStatusAddressToolBarRectangles for: getIosStatusAddressToolBarHeight .mockResolvedValueOnce( { - statusAddressBar: { - height: 94, - width: 375, - x: 0, - y: 0, - }, - toolBar: { - height: 5, - width: 135, - x: 120, - y: 799, - }, - }); + statusAddressBar: { + height: 94, + width: 375, + x: 0, + y: 0, + }, + toolBar: { + height: 5, + width: 135, + x: 120, + y: 799, + }, + }); expect(await determineStatusAddressToolBarRectangles(MOCKED_EXECUTOR, options)).toMatchSnapshot(); }); @@ -204,29 +228,29 @@ describe('rectangles', () => { blockOutToolBar: false, }; const MOCKED_EXECUTOR = jest.fn() - // determineStatusAddressToolBarRectangles for: getIosStatusAddressToolBarHeight + // determineStatusAddressToolBarRectangles for: getIosStatusAddressToolBarHeight .mockResolvedValueOnce( { - statusAddressBar: { - height: 94, - width: 375, - x: 0, - y: 0, - }, - toolBar: { - height: 5, - width: 135, - x: 0, - y: 799, - }, - }); + statusAddressBar: { + height: 94, + width: 375, + x: 0, + y: 0, + }, + toolBar: { + height: 5, + width: 135, + x: 0, + y: 799, + }, + }); expect(await determineStatusAddressToolBarRectangles(MOCKED_EXECUTOR, options)).toMatchSnapshot(); }); it('should determine the rectangles for Android with a status and toolbar blockout', async () => { const options = { - isHybridApp:false, + isHybridApp: false, isMobile: true, isViewPortScreenshot: true, platformName: 'Android', @@ -235,22 +259,22 @@ describe('rectangles', () => { blockOutToolBar: true, }; const MOCKED_EXECUTOR = jest.fn() - // determineStatusAddressToolBarRectangles for: getAndroidStatusAddressToolBarHeight + // determineStatusAddressToolBarRectangles for: getAndroidStatusAddressToolBarHeight .mockResolvedValueOnce( { - statusAddressBar: { - height: 40, - width: 320, - x: 0, - y: 0, - }, - toolBar: { - height: 100, - width: 320, - x: 0, - y: 600, - }, - }); + statusAddressBar: { + height: 40, + width: 320, + x: 0, + y: 0, + }, + toolBar: { + height: 100, + width: 320, + x: 0, + y: 600, + }, + }); expect(await determineStatusAddressToolBarRectangles(MOCKED_EXECUTOR, options)).toMatchSnapshot(); }); @@ -266,22 +290,22 @@ describe('rectangles', () => { blockOutToolBar: false, }; const MOCKED_EXECUTOR = jest.fn() - // determineStatusAddressToolBarRectangles for: getAndroidStatusAddressToolBarHeight + // determineStatusAddressToolBarRectangles for: getAndroidStatusAddressToolBarHeight .mockResolvedValueOnce( { - statusAddressBar: { - height: 40, - width: 320, - x: 0, - y: 0, - }, - toolBar: { - height: 100, - width: 320, - x: 0, - y: 600, - }, - }); + statusAddressBar: { + height: 40, + width: 320, + x: 0, + y: 0, + }, + toolBar: { + height: 100, + width: 320, + x: 0, + y: 600, + }, + }); expect(await determineStatusAddressToolBarRectangles(MOCKED_EXECUTOR, options)).toMatchSnapshot(); }); diff --git a/lib/methods/rectangles.ts b/lib/methods/rectangles.ts index 0d6bca1..b445dc7 100644 --- a/lib/methods/rectangles.ts +++ b/lib/methods/rectangles.ts @@ -2,7 +2,7 @@ import {calculateDprData, checkAndroidNativeWebScreenshot, checkIsIos, getScreen import {getElementPositionAndroid, getElementPositionDesktop, getElementPositionIos} from './elementPosition'; import {OFFSETS} from '../helpers/constants'; import { - ElementRectanglesOptions, + ElementRectangles, RectanglesOutput, ScreenRectanglesOptions, StatusAddressToolBarRectangles, @@ -15,15 +15,15 @@ import getAndroidStatusAddressToolBarHeight from '../clientSideScripts/getAndroi /** * Determine the element rectangles on the page / screenshot */ -export async function determineElementRectangles( - executor: Executor, - screenshot: string, - options: ElementRectanglesOptions, - element: any, -): Promise { +export async function determineElementRectangles({ + executor, + base64Image, + options, + element, + }: ElementRectangles): Promise { // Determine screenshot data const {devicePixelRatio, innerHeight, isAndroid, isAndroidNativeWebScreenshot, isIos} = options; - const {height} = getScreenshotSize(screenshot, devicePixelRatio); + const {height} = getScreenshotSize(base64Image, devicePixelRatio); let elementPosition; // Determine the element position on the screenshot @@ -47,7 +47,7 @@ export async function determineElementRectangles( /** * Determine the rectangles of the screen for the screenshot */ -export function determineScreenRectangles(screenshot: string, options: ScreenRectanglesOptions): RectanglesOutput { +export function determineScreenRectangles(base64Image: string, options: ScreenRectanglesOptions): RectanglesOutput { // Determine screenshot data const { devicePixelRatio, @@ -57,7 +57,7 @@ export function determineScreenRectangles(screenshot: string, options: ScreenRec isAndroidChromeDriverScreenshot, isAndroidNativeWebScreenshot, } = options; - const {height, width} = getScreenshotSize(screenshot, devicePixelRatio); + const {height, width} = getScreenshotSize(base64Image, devicePixelRatio); // Determine the width const screenshotWidth = isAndroidChromeDriverScreenshot ? width : innerWidth;