Merge pull request #28 from wswebcreation/fix/reduce-css-calls

fix: limit amount of custom css calls
wswebcreation · Jul 26, 2019 · 60e91fb · 60e91fb
2 parents 30d5a41 + e339bbd
commit 60e91fb
Show file tree

Hide file tree

Showing 9 changed files with 223 additions and 191 deletions.
diff --git a/lib/commands/saveElement.ts b/lib/commands/saveElement.ts
@@ -71,6 +71,7 @@ export default async function saveElement(
   const afterOptions: AfterScreenshotOptions = {
     actualFolder: folders.actualFolder,
     base64Image: croppedBase64Image,
+    disableCSSAnimation,
     hideElements,
     hideScrollBars,
     filePath: {
@@ -94,6 +95,7 @@ export default async function saveElement(
       screenWidth: enrichedInstanceData.dimensions.window.screenWidth,
       tag,
     },
+    platformName: instanceData.platformName,
     removeElements,
   };
 

diff --git a/lib/commands/saveFullPageScreen.ts b/lib/commands/saveFullPageScreen.ts
@@ -76,6 +76,7 @@ export default async function saveFullPageScreen(
   const afterOptions = {
     actualFolder: folders.actualFolder,
     base64Image: fullPageBase64Image,
+    disableCSSAnimation,
     hideElements,
     hideScrollBars,
     filePath: {
@@ -100,6 +101,7 @@ export default async function saveFullPageScreen(
       screenWidth: enrichedInstanceData.dimensions.window.screenWidth,
       tag,
     },
+    platformName: instanceData.platformName,
     removeElements,
   };
 

diff --git a/lib/commands/saveScreen.ts b/lib/commands/saveScreen.ts
@@ -68,6 +68,7 @@ export default async function saveScreen(
   const afterOptions: AfterScreenshotOptions = {
     actualFolder: folders.actualFolder,
     base64Image: croppedBase64Image,
+    disableCSSAnimation,
     hideElements,
     hideScrollBars,
     filePath: {
@@ -91,6 +92,7 @@ export default async function saveScreen(
       screenWidth: enrichedInstanceData.dimensions.window.screenWidth,
       tag,
     },
+    platformName: instanceData.platformName,
     removeElements,
   };
 

diff --git a/lib/helpers/afterScreenshot.interfaces.ts b/lib/helpers/afterScreenshot.interfaces.ts
@@ -12,6 +12,8 @@ export interface AfterScreenshotOptions {
   actualFolder: string;
   // The image
   base64Image: string;
+  // Disable all css animations
+  disableCSSAnimation: boolean;
   // If scrollbars need to be hidden
   hideScrollBars: boolean;
   // The file path options
@@ -20,6 +22,8 @@ export interface AfterScreenshotOptions {
   fileName: ScreenshotFileNameOptions;
   // Elements that need to be hidden (visibility: hidden) before saving a screenshot
   hideElements: HTMLElement[];
+  // The platform name of the instance
+  platformName: string;
   // Elements that need to be removed (display: none) before saving a screenshot
   removeElements: HTMLElement[];
 }

diff --git a/lib/helpers/afterScreenshot.spec.ts b/lib/helpers/afterScreenshot.spec.ts
@@ -12,6 +12,7 @@ describe('afterScreenshot', () => {
     const options = {
       actualFolder: folder,
       base64Image: 'string',
+      disableCSSAnimation: false,
       hideScrollBars: true,
       filePath: {
         browserName: 'browserName',
@@ -35,6 +36,7 @@ describe('afterScreenshot', () => {
         tag: 'tag',
       },
       hideElements: [<HTMLElement><any>'<div></div>'],
+      platformName: '',
       removeElements: [<HTMLElement><any>'<div></div>'],
     };
 

diff --git a/lib/helpers/afterScreenshot.ts b/lib/helpers/afterScreenshot.ts
@@ -1,7 +1,7 @@
 import hideScrollBars from '../clientSideScripts/hideScrollbars';
 import removeCustomCss from '../clientSideScripts/removeCustomCss';
 import {CUSTOM_CSS_ID} from './constants';
-import {formatFileName, getAndCreatePath} from './utils';
+import {checkIsMobile, formatFileName, getAndCreatePath} from './utils';
 import {saveBase64Image} from '../methods/images';
 import {join} from 'path';
 import {Executor} from '../methods/methods.interface';
@@ -16,10 +16,12 @@ export default async function afterScreenshot(executor: Executor, options: After
   const {
     actualFolder,
     base64Image,
+    disableCSSAnimation,
     fileName: fileNameOptions,
     filePath,
     hideElements,
     hideScrollBars: noScrollBars,
+    platformName,
     removeElements,
   } = options;
 
@@ -33,15 +35,22 @@ export default async function afterScreenshot(executor: Executor, options: After
   await saveBase64Image(base64Image, join(path, fileName));
 
   // Show the scrollbars again
-  await executor(hideScrollBars, !noScrollBars);
+  /* istanbul ignore else */
+  if (noScrollBars) {
+    await executor(hideScrollBars, !noScrollBars);
+  }
 
   // Show elements again
+  /* istanbul ignore else */
   if (hideElements.length > 0 || removeElements.length > 0) {
     await executor(hideRemoveElements, {hide: hideElements, remove: removeElements}, false);
   }
 
   // Remove the custom set css
-  await executor(removeCustomCss, CUSTOM_CSS_ID);
+  /* istanbul ignore else */
+  if (disableCSSAnimation || checkIsMobile(platformName)) {
+    await executor(removeCustomCss, CUSTOM_CSS_ID);
+  }
 
   // Return the needed data
   return {

diff --git a/lib/helpers/beforeScreenshot.ts b/lib/helpers/beforeScreenshot.ts
@@ -1,7 +1,7 @@
 import hideScrollBars from '../clientSideScripts/hideScrollbars';
 import setCustomCss from '../clientSideScripts/setCustomCss';
 import {CUSTOM_CSS_ID} from './constants';
-import {getAddressBarShadowPadding, getToolBarShadowPadding} from './utils';
+import {checkIsMobile, getAddressBarShadowPadding, getToolBarShadowPadding} from './utils';
 import getEnrichedInstanceData from '../methods/instanceData';
 import {BeforeScreenshotOptions, BeforeScreenshotResult} from './beforeScreenshot.interface';
 import {Executor} from '../methods/methods.interface';
@@ -35,15 +35,19 @@ export default async function beforeScreenshot(
   const toolBarPadding = getToolBarShadowPadding({platformName, browserName, toolBarShadowPadding, addShadowPadding});
 
   // Hide the scrollbars
-  await executor(hideScrollBars, noScrollBars);
+  if(noScrollBars) {
+    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});
+  if (disableCSSAnimation || checkIsMobile(platformName)) {
+    await executor(setCustomCss, {addressBarPadding, disableCSSAnimation, id: CUSTOM_CSS_ID, toolBarPadding});
+  }
 
   // Get all the needed instance data
   const instanceOptions = {