From b232528a7964cf45ecbffc05a799ef2e88e8c559 Mon Sep 17 00:00:00 2001 From: Wim Selles Date: Fri, 26 Jul 2019 14:26:12 +0200 Subject: [PATCH 1/2] feat: add more formatImageName options - update save commands - update before/after and utils including tests - update interfaces and mocks - update docs --- docs/OPTIONS.md | 7 +++++-- lib/commands/saveElement.ts | 3 +++ lib/commands/saveFullPageScreen.ts | 3 +++ lib/commands/saveScreen.ts | 3 +++ .../__snapshots__/beforeScreenshot.spec.ts.snap | 4 ++++ lib/helpers/__snapshots__/utils.spec.ts.snap | 2 +- lib/helpers/afterScreenshot.interfaces.ts | 6 ++++++ lib/helpers/afterScreenshot.spec.ts | 3 +++ lib/helpers/beforeScreenshot.spec.ts | 4 ++++ lib/helpers/utils.interfaces.ts | 12 ++++++++++++ lib/helpers/utils.spec.ts | 8 +++++++- lib/helpers/utils.ts | 3 +++ lib/methods/__snapshots__/instanceData.spec.ts.snap | 8 ++++++++ lib/methods/instanceData.interfaces.ts | 11 +++++++++-- lib/methods/instanceData.spec.ts | 8 ++++++++ lib/mocks/mocks.ts | 2 ++ 16 files changed, 81 insertions(+), 6 deletions(-) diff --git a/docs/OPTIONS.md b/docs/OPTIONS.md index 4254e90..0965bc3 100644 --- a/docs/OPTIONS.md +++ b/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 orientation from 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 diff --git a/lib/commands/saveElement.ts b/lib/commands/saveElement.ts index ea542ca..74696f2 100644 --- a/lib/commands/saveElement.ts +++ b/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, diff --git a/lib/commands/saveFullPageScreen.ts b/lib/commands/saveFullPageScreen.ts index 5fb5714..e520b54 100644 --- a/lib/commands/saveFullPageScreen.ts +++ b/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, diff --git a/lib/commands/saveScreen.ts b/lib/commands/saveScreen.ts index 2172cb7..ee56c5b 100644 --- a/lib/commands/saveScreen.ts +++ b/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, diff --git a/lib/helpers/__snapshots__/beforeScreenshot.spec.ts.snap b/lib/helpers/__snapshots__/beforeScreenshot.spec.ts.snap index 94abe7d..926ddb4 100644 --- a/lib/helpers/__snapshots__/beforeScreenshot.spec.ts.snap +++ b/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, } `; diff --git a/lib/helpers/__snapshots__/utils.spec.ts.snap b/lib/helpers/__snapshots__/utils.spec.ts.snap index af4ab93..f67918f 100644 --- a/lib/helpers/__snapshots__/utils.spec.ts.snap +++ b/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`; diff --git a/lib/helpers/afterScreenshot.interfaces.ts b/lib/helpers/afterScreenshot.interfaces.ts index dbf1e0a..0355f2b 100644 --- a/lib/helpers/afterScreenshot.interfaces.ts +++ b/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 diff --git a/lib/helpers/afterScreenshot.spec.ts b/lib/helpers/afterScreenshot.spec.ts index 3c2593e..ad33627 100644 --- a/lib/helpers/afterScreenshot.spec.ts +++ b/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', diff --git a/lib/helpers/beforeScreenshot.spec.ts b/lib/helpers/beforeScreenshot.spec.ts index 4d7f383..4a77a4d 100644 --- a/lib/helpers/beforeScreenshot.spec.ts +++ b/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, diff --git a/lib/helpers/utils.interfaces.ts b/lib/helpers/utils.interfaces.ts index 57d1081..fbf97bc 100644 --- a/lib/helpers/utils.interfaces.ts +++ b/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 diff --git a/lib/helpers/utils.spec.ts b/lib/helpers/utils.spec.ts index 3f80fa0..52e36e4 100644 --- a/lib/helpers/utils.spec.ts +++ b/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(); }); diff --git a/lib/helpers/utils.ts b/lib/helpers/utils.ts index f192f23..747dd3d 100644 --- a/lib/helpers/utils.ts +++ b/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 }; diff --git a/lib/methods/__snapshots__/instanceData.spec.ts.snap b/lib/methods/__snapshots__/instanceData.spec.ts.snap index 068dd72..ec0de95 100644 --- a/lib/methods/__snapshots__/instanceData.spec.ts.snap +++ b/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, diff --git a/lib/methods/instanceData.interfaces.ts b/lib/methods/instanceData.interfaces.ts index 71d5158..8f7095b 100644 --- a/lib/methods/instanceData.interfaces.ts +++ b/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 { diff --git a/lib/methods/instanceData.spec.ts b/lib/methods/instanceData.spec.ts index 8a5601e..009fdea 100644 --- a/lib/methods/instanceData.spec.ts +++ b/lib/methods/instanceData.spec.ts @@ -6,11 +6,13 @@ describe('getEnrichedInstanceData', () => { addressBarShadowPadding: 6, toolBarShadowPadding: 6, browserName: 'browserName', + browserVersion: 'browserVersion', deviceName: 'deviceName', logName: 'logName', name: 'name', nativeWebScreenshot: false, platformName: 'platformName', + platformVersion: 'platformVersion', }; const MOCKED_EXECUTOR = jest.fn() // getEnrichedInstanceData for: getScreenDimensions @@ -47,11 +49,13 @@ describe('getEnrichedInstanceData', () => { addressBarShadowPadding: 6, toolBarShadowPadding: 6, browserName: 'browserName', + browserVersion: 'browserVersion', deviceName: 'deviceName', logName: 'logName', name: 'name', nativeWebScreenshot: false, platformName: 'Android', + platformVersion: '8.0', }; const MOCKED_EXECUTOR = jest.fn() // getEnrichedInstanceData for: getScreenDimensions @@ -88,11 +92,13 @@ describe('getEnrichedInstanceData', () => { addressBarShadowPadding: 6, toolBarShadowPadding: 6, browserName: 'browserName', + browserVersion: 'browserVersion', deviceName: 'deviceName', logName: 'logName', name: 'name', nativeWebScreenshot: true, platformName: 'Android', + platformVersion: '8.0', }; const MOCKED_EXECUTOR = jest.fn() // getEnrichedInstanceData for: getScreenDimensions @@ -129,11 +135,13 @@ describe('getEnrichedInstanceData', () => { addressBarShadowPadding: 6, toolBarShadowPadding: 6, browserName: 'browserName', + browserVersion: 'browserVersion', deviceName: 'deviceName', logName: 'logName', name: 'name', nativeWebScreenshot: false, platformName: 'iOS', + platformVersion: '12.4', }; const MOCKED_EXECUTOR = jest.fn() // getEnrichedInstanceData for: getScreenDimensions diff --git a/lib/mocks/mocks.ts b/lib/mocks/mocks.ts index 0f63f95..933baa5 100644 --- a/lib/mocks/mocks.ts +++ b/lib/mocks/mocks.ts @@ -3,11 +3,13 @@ import {BeforeScreenshotOptions} from '../helpers/beforeScreenshot.interface'; export const BEFORE_SCREENSHOT_OPTIONS: BeforeScreenshotOptions = { instanceData: { browserName: 'chrome', + browserVersion: '75.0.1', deviceName: '', logName: 'chrome-latest', name: 'chrome-name', nativeWebScreenshot: true, platformName: 'Windows 10', + platformVersion: '1234', }, addressBarShadowPadding: 6, disableCSSAnimation: true, From fc7c11e68daa03d1e6b64f8a4090cd65cb534f6e Mon Sep 17 00:00:00 2001 From: Wim Selles Date: Fri, 26 Jul 2019 21:40:54 +0200 Subject: [PATCH 2/2] Update OPTIONS.md --- docs/OPTIONS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/OPTIONS.md b/docs/OPTIONS.md index 0965bc3..e392e1e 100644 --- a/docs/OPTIONS.md +++ b/docs/OPTIONS.md @@ -70,7 +70,7 @@ If they can't be determined the defaults will be used. - `browserName`: The name of the browser in the provided capabilities - `browserVersion`: The version of the browser provided in the capabilities -- `deviceName`: The orientation from capabilities +- `deviceName`: The device name from the capabilities - `dpr`: The device pixel ratio - `height`: The height of the screen - `logName`: The logName from capabilities