feat: add more formatImageName options

docs/OPTIONS.md

@@ -68,13 +68,16 @@ The name of the saved images can be customized by passing the parameter `formatI
 The following variables can be passed to format the string and will automatically been read from the instance capabilities. 
 If they can't be determined the defaults will be used.
 
-- `browserName`: The name of the device from the capabilities (default: 'no-provided-browserName-in-caps')
-- `deviceName`: The orientation from capabilities (default: 'no-provided-deviceName-in-caps')
+- `browserName`: The name of the browser in the provided capabilities
+- `browserVersion`: The version of the browser provided in the capabilities
+- `deviceName`: The device name from the capabilities
 - `dpr`: The device pixel ratio
 - `height`: The height of the screen
 - `logName`: The logName from capabilities
 - `mobile`: This will add _app, of browserName after the deviceName to distinguish app screenshots from browser screenshots
 - `name`: The name from capabilities
+- `platformName`: The name of the platform in the provided capabilities
+- `platformVersion`: The version of the platform provided in the capabilities
 - `tag`: The tag that is provided in the methods that is being called
 - `width`: The width of the screen
 

lib/commands/saveElement.ts

@@ -81,6 +81,7 @@ export default async function saveElement(
     },
     fileName: {
       browserName: enrichedInstanceData.browserName,
+      browserVersion: enrichedInstanceData.browserVersion,
       deviceName: enrichedInstanceData.deviceName,
       devicePixelRatio: enrichedInstanceData.dimensions.window.devicePixelRatio,
       formatImageName,
@@ -90,6 +91,8 @@ export default async function saveElement(
       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,
       tag,

lib/commands/saveFullPageScreen.ts

@@ -87,6 +87,7 @@ export default async function saveFullPageScreen(
     },
     fileName: {
       browserName: enrichedInstanceData.browserName,
+      browserVersion: enrichedInstanceData.browserVersion,
       deviceName: enrichedInstanceData.deviceName,
       devicePixelRatio: enrichedInstanceData.dimensions.window.devicePixelRatio,
       formatImageName,
@@ -96,6 +97,8 @@ export default async function saveFullPageScreen(
       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,
       tag,

lib/commands/saveScreen.ts

@@ -78,6 +78,7 @@ export default async function saveScreen(
     },
     fileName: {
       browserName: enrichedInstanceData.browserName,
+      browserVersion: enrichedInstanceData.browserVersion,
       deviceName: enrichedInstanceData.deviceName,
       devicePixelRatio: enrichedInstanceData.dimensions.window.devicePixelRatio,
       formatImageName,
@@ -87,6 +88,8 @@ export default async function saveScreen(
       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,
       tag,

lib/helpers/__snapshots__/beforeScreenshot.spec.ts.snap

@@ -4,6 +4,7 @@ exports[`beforeScreenshot should be able to return the enriched instance data wi
 Object {
   "addressBarShadowPadding": 0,
   "browserName": "browserName",
+  "browserVersion": "browserVersion",
   "deviceName": "deviceName",
   "isAndroid": false,
   "isAndroidChromeDriverScreenshot": false,
@@ -16,6 +17,7 @@ Object {
   "name": "name",
   "nativeWebScreenshot": false,
   "platformName": "platformName",
+  "platformVersion": "platformVersion",
   "toolBarShadowPadding": 0,
 }
 `;
@@ -24,6 +26,7 @@ exports[`beforeScreenshot should be able to return the enriched instance data wi
 Object {
   "addressBarShadowPadding": 0,
   "browserName": "browserName",
+  "browserVersion": "browserVersion",
   "deviceName": "deviceName",
   "isAndroid": false,
   "isAndroidChromeDriverScreenshot": false,
@@ -36,6 +39,7 @@ Object {
   "name": "name",
   "nativeWebScreenshot": false,
   "platformName": "platformName",
+  "platformVersion": "platformVersion",
   "toolBarShadowPadding": 0,
 }
 `;

lib/helpers/__snapshots__/utils.spec.ts.snap

@@ -61,7 +61,7 @@ exports[`utils formatFileName should format a string for mobile app 1`] = `"theT
 
 exports[`utils formatFileName should format a string for mobile browser 1`] = `"theTag-chrome-2-1400x900.png"`;
 
-exports[`utils formatFileName should format a string with all options provided 1`] = `"chrome-2-768-chrome-latest-chrome-name-theTag-1366.png"`;
+exports[`utils formatFileName should format a string with all options provided 1`] = `"browser.chrome-74-platform.osx-12-dpr.2-768-chrome-latest-chrome-name-theTag-1366.png"`;
 
 exports[`utils getAddressBarShadowPadding should return 0 when this is a check for Android with a native screenshot but without adding a shadow padding 1`] = `0`;
 

lib/helpers/afterScreenshot.interfaces.ts

@@ -38,6 +38,8 @@ export interface ScreenshotFilePathOptions {
 export interface ScreenshotFileNameOptions {
   // The browser name
   browserName: string;
+  // The browser version
+  browserVersion: string;
   // The device name
   deviceName: string;
   // The device pixel ratio
@@ -56,6 +58,10 @@ export interface ScreenshotFileNameOptions {
   outerHeight: number;
   // The outer width of the screen
   outerWidth: number;
+  // The platform name
+  platformName: string;
+  // The platform version
+  platformVersion: string;
   // The height of the screen
   screenHeight: number;
   // The width of the screen

lib/helpers/afterScreenshot.spec.ts

@@ -21,6 +21,7 @@ describe('afterScreenshot', () => {
       },
       fileName: {
         browserName: 'browserName',
+        browserVersion: 'browserVersion',
         deviceName: 'deviceName',
         devicePixelRatio: 2,
         formatImageName: '{tag}-{browserName}-{width}x{height}-dpr-{dpr}',
@@ -30,6 +31,8 @@ describe('afterScreenshot', () => {
         name: 'name',
         outerHeight: 850,
         outerWidth: 1400,
+        platformName: 'platformName',
+        platformVersion: 'platformVersion',
         screenHeight: 900,
         screenWidth: 1440,
         tag: 'tag',

lib/helpers/beforeScreenshot.spec.ts

@@ -7,11 +7,13 @@ describe('beforeScreenshot', () => {
     const options = {
       instanceData: {
         browserName: 'browserName',
+        browserVersion: 'browserVersion',
         deviceName: 'deviceName',
         logName: 'logName',
         name: 'name',
         nativeWebScreenshot: false,
         platformName: 'platformName',
+        platformVersion: 'platformVersion',
       },
       addressBarShadowPadding: 6,
       disableCSSAnimation: true,
@@ -30,11 +32,13 @@ describe('beforeScreenshot', () => {
     const options = {
       instanceData: {
         browserName: 'browserName',
+        browserVersion: 'browserVersion',
         deviceName: 'deviceName',
         logName: 'logName',
         name: 'name',
         nativeWebScreenshot: false,
         platformName: 'platformName',
+        platformVersion: 'platformVersion',
       },
       addressBarShadowPadding: 6,
       disableCSSAnimation: true,

lib/helpers/utils.interfaces.ts

@@ -12,6 +12,8 @@ export interface GetAndCreatePathOptions {
 export interface FormatFileNameOptions {
   // The browser name
   browserName: string;
+  // The browser version
+  browserVersion: string;
   // The device name
   deviceName: string;
   // The device pixel ratio
@@ -30,6 +32,10 @@ export interface FormatFileNameOptions {
   outerHeight: number;
   // The outer width of the screen
   outerWidth: number;
+  // The platform name
+  platformName: string;
+  // The platform version
+  platformVersion: string;
   // The height of the screen
   screenHeight: number;
   // The width of the screen
@@ -41,6 +47,8 @@ export interface FormatFileNameOptions {
 export interface FormatFileDefaults {
   // The browser name
   browserName: string;
+  // The browser version
+  browserVersion: string;
   // The device name
   deviceName: string;
   // The device pixel ratio
@@ -53,6 +61,10 @@ export interface FormatFileDefaults {
   mobile: string;
   // The the name of the instance
   name: string;
+  // The platform name
+  platformName: string;
+  // The platform version
+  platformVersion: string;
   // The tag of the image
   tag: string;
   // The width of the screen

lib/helpers/utils.spec.ts

@@ -71,6 +71,7 @@ describe('utils', () => {
   describe('formatFileName', () => {
     const formatFileOptions: FormatFileNameOptions = {
       browserName: '',
+      browserVersion: '',
       deviceName: '',
       devicePixelRatio: 2,
       formatImageName: '',
@@ -80,16 +81,21 @@ describe('utils', () => {
       name: '',
       outerHeight: 768,
       outerWidth: 1366,
+      platformName: '',
+      platformVersion: '',
       screenHeight: 900,
       screenWidth: 1400,
       tag: 'theTag',
     };
 
     it('should format a string with all options provided', () => {
-      formatFileOptions.formatImageName = '{browserName}-{dpr}-{height}-{logName}-{name}-{tag}-{width}';
+      formatFileOptions.formatImageName = 'browser.{browserName}-{browserVersion}-platform.{platformName}-{platformVersion}-dpr.{dpr}-{height}-{logName}-{name}-{tag}-{width}';
       formatFileOptions.browserName = 'chrome';
+      formatFileOptions.browserVersion = '74';
       formatFileOptions.logName = 'chrome-latest';
       formatFileOptions.name = 'chrome-name';
+      formatFileOptions.platformName = 'osx';
+      formatFileOptions.platformVersion = '12';
 
       expect(formatFileName(formatFileOptions)).toMatchSnapshot();
     });

lib/helpers/utils.ts

@@ -29,12 +29,15 @@ export function getAndCreatePath(folder: string, options: GetAndCreatePathOption
 export function formatFileName(options: FormatFileNameOptions): string {
   let defaults: FormatFileDefaults = {
     browserName: options.browserName,
+    browserVersion: options.browserVersion,
     deviceName: options.deviceName,
     dpr: options.devicePixelRatio,
     height: options.isMobile ? options.screenHeight : options.outerHeight,
     logName: options.logName,
     mobile: (options.isMobile && options.isTestInBrowser) ? options.browserName : options.isMobile ? 'app' : '',
     name: options.name,
+    platformName: options.platformName,
+    platformVersion: options.platformVersion,
     tag: options.tag,
     width: options.isMobile ? options.screenWidth : options.outerWidth
   };

lib/methods/__snapshots__/instanceData.spec.ts.snap

@@ -8,6 +8,7 @@ Object {
     "scrollHeight": 0,
   },
   "browserName": "browserName",
+  "browserVersion": "browserVersion",
   "deviceName": "deviceName",
   "html": Object {
     "clientHeight": 0,
@@ -27,6 +28,7 @@ Object {
   "name": "name",
   "nativeWebScreenshot": false,
   "platformName": "Android",
+  "platformVersion": "8.0",
   "toolBarShadowPadding": 0,
   "window": Object {
     "devicePixelRatio": 1,
@@ -48,6 +50,7 @@ Object {
     "scrollHeight": 0,
   },
   "browserName": "browserName",
+  "browserVersion": "browserVersion",
   "deviceName": "deviceName",
   "html": Object {
     "clientHeight": 0,
@@ -67,6 +70,7 @@ Object {
   "name": "name",
   "nativeWebScreenshot": true,
   "platformName": "Android",
+  "platformVersion": "8.0",
   "toolBarShadowPadding": 0,
   "window": Object {
     "devicePixelRatio": 1,
@@ -88,6 +92,7 @@ Object {
     "scrollHeight": 0,
   },
   "browserName": "browserName",
+  "browserVersion": "browserVersion",
   "deviceName": "deviceName",
   "html": Object {
     "clientHeight": 0,
@@ -107,6 +112,7 @@ Object {
   "name": "name",
   "nativeWebScreenshot": false,
   "platformName": "platformName",
+  "platformVersion": "platformVersion",
   "toolBarShadowPadding": 0,
   "window": Object {
     "devicePixelRatio": 1,
@@ -128,6 +134,7 @@ Object {
     "scrollHeight": 0,
   },
   "browserName": "browserName",
+  "browserVersion": "browserVersion",
   "deviceName": "deviceName",
   "html": Object {
     "clientHeight": 0,
@@ -147,6 +154,7 @@ Object {
   "name": "name",
   "nativeWebScreenshot": false,
   "platformName": "iOS",
+  "platformVersion": "12.4",
   "toolBarShadowPadding": 6,
   "window": Object {
     "devicePixelRatio": 1,

lib/methods/instanceData.interfaces.ts

@@ -3,6 +3,8 @@ import {ScreenDimensions} from '../clientSideScripts/screenDimensions.interfaces
 export interface InstanceData {
   // The browser name of the instance
   browserName: string;
+  // The browser version of the instance
+  browserVersion: string;
   // The device name of the instance
   deviceName: string;
   // The log name of the instance
@@ -11,8 +13,10 @@ export interface InstanceData {
   name: string;
   // If the instance creates native webscreenshots
   nativeWebScreenshot: boolean;
-  // The platformname of the instance
+  // The platform name of the instance
   platformName: string;
+  // The platform version of the instance
+  platformVersion: string;
 }
 
 export interface InstanceOptions {
@@ -22,6 +26,8 @@ export interface InstanceOptions {
   toolBarShadowPadding: number;
   // The browser name of the instance
   browserName: string;
+  // The browser version of the instance
+  browserVersion: string;
   // The device name of the instance
   deviceName: string;
   // The log name of the instance
@@ -30,8 +36,9 @@ export interface InstanceOptions {
   name: string;
   // If the instance creates native webscreenshots
   nativeWebScreenshot: boolean;
-  // The platformname of the instance
   platformName: string;
+  // The platform version of the instance
+  platformVersion: string;
 }
 
 export interface EnrichedInstanceData extends ScreenDimensions, InstanceOptions {