feat: initial add hide/remove elements to all methods

lib/clientSideScripts/hideRemoveElements.ts

@@ -0,0 +1,7 @@
+/**
+ * Hide or remove elements on the page
+ */
+export default function hideRemoveElements(hideRemoveElements: { hide: HTMLElement[], remove: HTMLElement[] }, hideRemove: boolean): void {
+  hideRemoveElements.hide.forEach(element => element.style.visibility = hideRemove ? 'hidden' : '');
+  hideRemoveElements.remove.forEach(element => element.style.display = hideRemove ? 'none' : '');
+}

lib/commands/checkElement.ts

@@ -27,6 +27,8 @@ export default async function checkElement(
       ...('disableCSSAnimation' in checkElementOptions.method ? {disableCSSAnimation: checkElementOptions.method.disableCSSAnimation} : {}),
       ...('hideScrollBars' in checkElementOptions.method ? {hideScrollBars: checkElementOptions.method.hideScrollBars} : {}),
       ...('resizeDimensions' in checkElementOptions.method ? {resizeDimensions: checkElementOptions.method.resizeDimensions} : {}),
+      ...{hideElements: checkElementOptions.method.hideElements || []},
+      ...{removeElements: checkElementOptions.method.removeElements || []},
     }
   };
   const {devicePixelRatio, fileName} = await saveElement(methods, instanceData, folders, element, tag, saveElementOptions);

lib/commands/checkFullPageScreen.ts

@@ -34,6 +34,8 @@ export default async function checkFullPageScreen(
           : {}
       ),
       ...('hideScrollBars' in checkFullPageOptions.method ? {hideScrollBars: checkFullPageOptions.method.hideScrollBars} : {}),
+      ...{hideElements: checkFullPageOptions.method.hideElements || []},
+      ...{removeElements: checkFullPageOptions.method.removeElements || []},
     }
   };
   const {devicePixelRatio, fileName} = await saveFullPageScreen(methods, instanceData, folders, tag, saveFullPageOptions);

lib/commands/checkScreen.ts

@@ -25,6 +25,8 @@ export default async function checkScreen(
     method: {
       ...('disableCSSAnimation' in checkScreenOptions.method ? {disableCSSAnimation: checkScreenOptions.method.disableCSSAnimation} : {}),
       ...('hideScrollBars' in checkScreenOptions.method ? {hideScrollBars: checkScreenOptions.method.hideScrollBars} : {}),
+      ...{hideElements: checkScreenOptions.method.hideElements || []},
+      ...{removeElements: checkScreenOptions.method.removeElements || []},
     }
   };
   const {devicePixelRatio, fileName} = await saveScreen(methods, instanceData, folders, tag, saveScreenOptions);

lib/commands/element.interfaces.ts

@@ -18,6 +18,10 @@ export interface SaveElementMethodOptions {
   resizeDimensions?: ResizeDimensions | number;
   // The padding that needs to be added to the tool bar on iOS and Android
   toolBarShadowPadding?: number;
+  // Elements that need to be hidden (visibility: hidden) before saving a screenshot
+  hideElements?: HTMLElement[];
+  // Elements that need to be removed (display: none) before saving a screenshot
+  removeElements?: HTMLElement[];
 }
 
 interface CheckOptions extends SaveElementMethodOptions, CheckMethodOptions {

lib/commands/fullPage.interfaces.ts

@@ -20,6 +20,10 @@ interface SaveFullPageMethodOptions {
   resizeDimensions?: ResizeDimensions | number;
   // The padding that needs to be added to the tool bar on iOS and Android
   toolBarShadowPadding?: number;
+  // Elements that need to be hidden (visibility: hidden) before saving a screenshot
+  hideElements?: HTMLElement[];
+  // Elements that need to be removed (display: none) before saving a screenshot
+  removeElements?: HTMLElement[];
 }
 
 interface CheckOptions extends SaveFullPageMethodOptions, CheckMethodOptions {

lib/commands/saveElement.ts

@@ -11,6 +11,7 @@ import {SaveElementOptions} from './element.interfaces';
 import {ElementRectanglesOptions, RectanglesOutput} from '../methods/rectangles.interfaces';
 import {BeforeScreenshotOptions, BeforeScreenshotResult} from '../helpers/beforeScreenshot.interface';
 import {DEFAULT_RESIZE_DIMENSIONS} from '../helpers/constants';
+import {ResizeDimensions} from '../methods/images.interfaces';
 
 /**
  * Saves an image of an element
@@ -34,14 +35,18 @@ export default async function saveElement(
   const hideScrollBars: boolean = 'hideScrollBars' in saveElementOptions.method
     ? saveElementOptions.method.hideScrollBars
     : saveElementOptions.wic.hideScrollBars;
-  const resizeDimensions = saveElementOptions.method.resizeDimensions || DEFAULT_RESIZE_DIMENSIONS;
+  const resizeDimensions: ResizeDimensions | number = saveElementOptions.method.resizeDimensions || DEFAULT_RESIZE_DIMENSIONS;
+  const hideElements: HTMLElement[] = saveElementOptions.method.hideElements || [];
+  const removeElements: HTMLElement[] = saveElementOptions.method.removeElements || [];
 
   // 2.  Prepare the beforeScreenshot
   const beforeOptions: BeforeScreenshotOptions = {
     instanceData,
     addressBarShadowPadding,
     disableCSSAnimation,
+    hideElements,
     noScrollBars: hideScrollBars,
+    removeElements,
     toolBarShadowPadding,
   };
   const enrichedInstanceData: BeforeScreenshotResult = await beforeScreenshot(methods.executor, beforeOptions, true);

lib/commands/saveFullPageScreen.ts

@@ -34,13 +34,17 @@ export default async function saveFullPageScreen(
   const fullPageScrollTimeout: number = 'fullPageScrollTimeout' in saveFullPageOptions.method
     ? saveFullPageOptions.method.fullPageScrollTimeout
     : saveFullPageOptions.wic.fullPageScrollTimeout;
+  const hideElements: HTMLElement[] = saveFullPageOptions.method.hideElements || [];
+  const removeElements: HTMLElement[] = saveFullPageOptions.method.removeElements || [];
 
   // 2.  Prepare the beforeScreenshot
   const beforeOptions: BeforeScreenshotOptions = {
     instanceData,
     addressBarShadowPadding,
     disableCSSAnimation,
+    hideElements,
     noScrollBars: hideScrollBars,
+    removeElements,
     toolBarShadowPadding,
   };
   const enrichedInstanceData: BeforeScreenshotResult = await beforeScreenshot(methods.executor, beforeOptions, true);

lib/commands/saveScreen.ts

@@ -32,13 +32,17 @@ export default async function saveScreen(
   const hideScrollBars: boolean = 'hideScrollBars' in saveScreenOptions.method
     ? saveScreenOptions.method.hideScrollBars
     : saveScreenOptions.wic.hideScrollBars;
+  const hideElements: HTMLElement[] = saveScreenOptions.method.hideElements || [];
+  const removeElements: HTMLElement[] = saveScreenOptions.method.removeElements || [];
 
   // 2.  Prepare the beforeScreenshot
   const beforeOptions: BeforeScreenshotOptions = {
     instanceData,
     addressBarShadowPadding,
     disableCSSAnimation,
+    hideElements,
     noScrollBars: hideScrollBars,
+    removeElements,
     toolBarShadowPadding,
   };
   const enrichedInstanceData: BeforeScreenshotResult = await beforeScreenshot(methods.executor, beforeOptions);

lib/commands/screen.interfaces.ts

@@ -11,6 +11,10 @@ interface SaveScreenMethodOptions {
   disableCSSAnimation?: boolean;
   // Hide scrollbars, this is optional
   hideScrollBars?: boolean;
+  // Elements that need to be hidden (visibility: hidden) before saving a screenshot
+  hideElements?: HTMLElement[];
+  // Elements that need to be removed (display: none) before saving a screenshot
+  removeElements?: HTMLElement[];
 }
 
 interface CheckOptions extends SaveScreenMethodOptions, CheckMethodOptions {

lib/helpers/afterScreenshot.interfaces.ts

@@ -18,6 +18,10 @@ export interface AfterScreenshotOptions {
   filePath: ScreenshotFilePathOptions;
   // The file name options object
   fileName: ScreenshotFileNameOptions;
+  // Elements that need to be hidden (visibility: hidden) before saving a screenshot
+  hideElements?: HTMLElement[];
+  // Elements that need to be removed (display: none) before saving a screenshot
+  removeElements?: HTMLElement[];
 }
 
 export interface ScreenshotFilePathOptions {

lib/helpers/beforeScreenshot.interface.ts

@@ -11,6 +11,10 @@ export interface BeforeScreenshotOptions {
   noScrollBars: boolean;
   // The padding that needs to be added to the tool bar on iOS and Android
   toolBarShadowPadding: number;
+  // Elements that need to be hidden (visibility: hidden) before saving a screenshot
+  hideElements: HTMLElement[];
+  // Elements that need to be removed (display: none) before saving a screenshot
+  removeElements: HTMLElement[];
 }
 
 export interface BeforeScreenshotResult extends EnrichedInstanceData {}

lib/helpers/beforeScreenshot.spec.ts

@@ -17,6 +17,8 @@ describe('beforeScreenshot', () => {
       disableCSSAnimation: true,
       noScrollBars: true,
       toolBarShadowPadding: 6,
+      hideElements: [<HTMLElement><any>'<div></div>'],
+      removeElements: [<HTMLElement><any>'<div></div>'],
     };
 
     expect(await beforeScreenshot(MOCKED_EXECUTOR, options)).toMatchSnapshot();
@@ -38,6 +40,8 @@ describe('beforeScreenshot', () => {
       disableCSSAnimation: true,
       noScrollBars: true,
       toolBarShadowPadding: 6,
+      hideElements: [<HTMLElement><any>'<div></div>'],
+      removeElements: [<HTMLElement><any>'<div></div>'],
     };
 
     expect(await beforeScreenshot(MOCKED_EXECUTOR, options, true)).toMatchSnapshot();

lib/helpers/beforeScreenshot.ts

@@ -5,6 +5,7 @@ import {getAddressBarShadowPadding, getToolBarShadowPadding} from './utils';
 import getEnrichedInstanceData from '../methods/instanceData';
 import {BeforeScreenshotOptions, BeforeScreenshotResult} from './beforeScreenshot.interface';
 import {Executor} from '../methods/methods.interface';
+import hideRemoveElements from '../clientSideScripts/hideRemoveElements';
 
 /**
  * Methods that need to be executed before a screenshot will be taken
@@ -16,7 +17,14 @@ export default async function beforeScreenshot(
 ): Promise<BeforeScreenshotResult> {
 
   const {browserName, nativeWebScreenshot, platformName} = options.instanceData;
-  const {addressBarShadowPadding, disableCSSAnimation, noScrollBars, toolBarShadowPadding} = options;
+  const {
+    addressBarShadowPadding,
+    disableCSSAnimation,
+    hideElements,
+    noScrollBars,
+    removeElements,
+    toolBarShadowPadding,
+  } = options;
   const addressBarPadding = getAddressBarShadowPadding({
     platformName,
     browserName,
@@ -29,6 +37,11 @@ export default async function beforeScreenshot(
   // Hide the scrollbars
   await executor(hideScrollBars, noScrollBars);
 
+  // Hide and or Remove elements
+  if (hideElements.length > 0 || removeElements.length > 0) {
+    await executor(hideRemoveElements, {hide: hideElements, remove: removeElements}, true);
+  }
+
   // Set some custom css
   await executor(setCustomCss, {addressBarPadding, disableCSSAnimation, id: CUSTOM_CSS_ID, toolBarPadding});
 

lib/mocks/mocks.ts

@@ -13,6 +13,8 @@ export const BEFORE_SCREENSHOT_OPTIONS: BeforeScreenshotOptions = {
   disableCSSAnimation: true,
   noScrollBars: true,
   toolBarShadowPadding: 6,
+  hideElements: [<HTMLElement><any>'<div></div>'],
+  removeElements: [<HTMLElement><any>'<div></div>'],
 };
 export const NAVIGATOR_APP_VERSIONS = {
   ANDROID: {