From fc38910b04159b0216e42eae8f38a168bfddbd66 Mon Sep 17 00:00:00 2001 From: wswebcreation Date: Fri, 18 Oct 2024 06:52:48 +0200 Subject: [PATCH 1/5] fix: don't use device os blockouts for element screenshots --- .../src/commands/checkAppElement.ts | 8 +++++++- .../src/commands/checkWebElement.ts | 10 +++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/webdriver-image-comparison/src/commands/checkAppElement.ts b/packages/webdriver-image-comparison/src/commands/checkAppElement.ts index 68334bab..a3841afb 100644 --- a/packages/webdriver-image-comparison/src/commands/checkAppElement.ts +++ b/packages/webdriver-image-comparison/src/commands/checkAppElement.ts @@ -42,7 +42,13 @@ export default async function checkAppElement( const executeCompareOptions = { devicePixelRatio, compareOptions: { - wic: checkElementOptions.wic.compareOptions, + wic: { + ...checkElementOptions.wic.compareOptions, + // No need to block out anything on the app for element screenshots + blockOutSideBar: false, + blockOutStatusBar: false, + blockOutToolBar: false, + }, method: compareOptions, }, fileName, diff --git a/packages/webdriver-image-comparison/src/commands/checkWebElement.ts b/packages/webdriver-image-comparison/src/commands/checkWebElement.ts index e385d859..3e156b24 100644 --- a/packages/webdriver-image-comparison/src/commands/checkWebElement.ts +++ b/packages/webdriver-image-comparison/src/commands/checkWebElement.ts @@ -48,7 +48,13 @@ export default async function checkWebElement( const executeCompareOptions = { devicePixelRatio, compareOptions: { - wic: checkElementOptions.wic.compareOptions, + wic: { + ...checkElementOptions.wic.compareOptions, + // No need to block out anything on the app for element screenshots + blockOutSideBar: false, + blockOutStatusBar: false, + blockOutToolBar: false, + }, method: compareOptions, }, fileName, @@ -68,6 +74,8 @@ export default async function checkWebElement( platformName: instanceData.platformName, } + console.log('executeCompareOptions = ', JSON.stringify(executeCompareOptions, null, 2)) + // 2b Now execute the compare and return the data return executeImageCompare({ executor: methods.executor, From 42f7a6167ff399b7ee3f3997e69c48a161b2ebb8 Mon Sep 17 00:00:00 2001 From: wswebcreation Date: Fri, 18 Oct 2024 06:53:55 +0200 Subject: [PATCH 2/5] chore: remove log --- .../webdriver-image-comparison/src/commands/checkWebElement.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/webdriver-image-comparison/src/commands/checkWebElement.ts b/packages/webdriver-image-comparison/src/commands/checkWebElement.ts index 3e156b24..2b63e126 100644 --- a/packages/webdriver-image-comparison/src/commands/checkWebElement.ts +++ b/packages/webdriver-image-comparison/src/commands/checkWebElement.ts @@ -74,8 +74,6 @@ export default async function checkWebElement( platformName: instanceData.platformName, } - console.log('executeCompareOptions = ', JSON.stringify(executeCompareOptions, null, 2)) - // 2b Now execute the compare and return the data return executeImageCompare({ executor: methods.executor, From df9163ab13c698ca1f80238a9c09681715426b6c Mon Sep 17 00:00:00 2001 From: wswebcreation Date: Fri, 18 Oct 2024 11:25:36 +0200 Subject: [PATCH 3/5] feat: add iPhone 16 series --- .../src/helpers/constants.ts | 34 +++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/packages/webdriver-image-comparison/src/helpers/constants.ts b/packages/webdriver-image-comparison/src/helpers/constants.ts index 48c42480..216e19f4 100644 --- a/packages/webdriver-image-comparison/src/helpers/constants.ts +++ b/packages/webdriver-image-comparison/src/helpers/constants.ts @@ -166,7 +166,7 @@ export const IOS_OFFSETS: IosOffsets = { HOME_BAR: { x: 124, y: 829, height: 9, width: 143 }, }, }, - // 14Pro|15 (dynamic island) + // 14Pro|15|16 (dynamic island) 852: { LANDSCAPE: { SAFE_AREA: 59, @@ -181,6 +181,21 @@ export const IOS_OFFSETS: IosOffsets = { HOME_BAR: { x: 125, y: 837, height: 9, width: 143 }, }, }, + // 16 Pro (dynamic island) + 874: { + LANDSCAPE: { + SAFE_AREA: 50, + STATUS_BAR: 0, + ADDRESS_BAR: 50, + HOME_BAR: { x: 324, y: 389, height: 9, width: 226 }, + }, + PORTRAIT: { + SAFE_AREA: 62, + STATUS_BAR: 62, + ADDRESS_BAR: 50, + HOME_BAR: { x: 129, y: 861, height: 9, width: 152 }, + }, + }, // XSMax|XR|11|11ProMax (notch) 896: { LANDSCAPE: { @@ -211,7 +226,7 @@ export const IOS_OFFSETS: IosOffsets = { HOME_BAR: { x: 136, y: 911, height: 9, width: 156 }, }, }, - // 14ProMax (notch) + // 14ProMax|16 Plus (notch) 932: { LANDSCAPE: { SAFE_AREA: 59, @@ -226,6 +241,21 @@ export const IOS_OFFSETS: IosOffsets = { HOME_BAR: { x: 137, y: 917, height: 9, width: 158 }, }, }, + // 16 Pro Max (dynamic island) + 956: { + LANDSCAPE: { + SAFE_AREA: 50, + STATUS_BAR: 0, + ADDRESS_BAR: 50, + HOME_BAR: { x: 355, y: 427, height: 9, width: 246 }, + }, + PORTRAIT: { + SAFE_AREA: 62, + STATUS_BAR: 62, + ADDRESS_BAR: 50, + HOME_BAR: { x: 142, y: 943, height: 9, width: 158 }, + }, + }, }, IPAD: { // 9.7|Air 1/2|Mini 1/2/3/4/2019|Pro 9.7 From 1074a2e40b45e7537bb35107f4b00e4f956f524b Mon Sep 17 00:00:00 2001 From: wswebcreation Date: Sun, 20 Oct 2024 08:43:07 +0200 Subject: [PATCH 4/5] fix: prevent full blockout with rectangles all on 0 --- packages/webdriver-image-comparison/src/methods/images.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/webdriver-image-comparison/src/methods/images.ts b/packages/webdriver-image-comparison/src/methods/images.ts index 3e7d8743..14a2aff9 100644 --- a/packages/webdriver-image-comparison/src/methods/images.ts +++ b/packages/webdriver-image-comparison/src/methods/images.ts @@ -25,6 +25,7 @@ import type { } from './images.interfaces.js' import type { FullPageScreenshotsData } from './screenshots.interfaces.js' import type { GetElementRect, TakeScreenShot } from './methods.interfaces.js' +import type { RectanglesOutput } from './rectangles.interfaces.js' import type { CompareData, ComparisonIgnoreOption, ComparisonOptions } from '../resemble/compare.interfaces.js' import type { WicElement } from '../commands/element.interfaces.js' import { processDiffPixels } from './processDiffPixels.js' @@ -368,7 +369,7 @@ export async function executeImageCompare( // 4b. Determine the ignore rectangles for the block outs const blockOut = 'blockOut' in imageCompareOptions ? imageCompareOptions.blockOut || [] : [] - const webStatusAddressToolBarOptions = [] + let webStatusAddressToolBarOptions: RectanglesOutput[] = [] if (isMobile && !isNativeContext){ const statusAddressToolBarOptions = { @@ -383,6 +384,11 @@ export async function executeImageCompare( platformName, } webStatusAddressToolBarOptions.push(...(await determineStatusAddressToolBarRectangles(executor, statusAddressToolBarOptions)) || []) + if (webStatusAddressToolBarOptions.length > 0) { + // There's an issue with the resemble lib when all the rectangles are 0,0,0,0, it will see this as a full + // blockout of the image and the comparison will succeed with 0 % difference + webStatusAddressToolBarOptions = webStatusAddressToolBarOptions.filter((rectangle) => !(rectangle.x === 0 && rectangle.y === 0 && rectangle.width === 0 && rectangle.height === 0)) + } } const ignoredBoxes = [ // These come from the method From 857a6ea1dd68886cfbe96779823b0c88b8c0be06 Mon Sep 17 00:00:00 2001 From: wswebcreation Date: Sun, 20 Oct 2024 08:49:35 +0200 Subject: [PATCH 5/5] chore: create changeset --- .changeset/light-pants-applaud.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 .changeset/light-pants-applaud.md diff --git a/.changeset/light-pants-applaud.md b/.changeset/light-pants-applaud.md new file mode 100644 index 00000000..d93b15bb --- /dev/null +++ b/.changeset/light-pants-applaud.md @@ -0,0 +1,15 @@ +--- +"webdriver-image-comparison": patch +"@wdio/visual-service": patch +--- + +# Improve iPhone support + +## 💅 Polish @wdio/visual-reporter + +- Mobile: support iOS 18 and the iPhone 16 series for the blockouts + +## 🐛 Bugs fixed @wdio/visual-reporter + +- Mobile: don't use the device blockouts for element screenshot +- Mobile: when the blockouts had the value `{x: 0, y: 0, width: 0, height: 0}` then Resemble picked this up as a full blockout. This caused false positives for iOS