fix: fix Safari desktop dropshadow crop

wswebcreation · wswebcreation · commit 86572b03a742 · 2025-11-20T20:00:38.000+01:00
diff --git a/packages/image-comparison-core/src/methods/screenshots.ts b/packages/image-comparison-core/src/methods/screenshots.ts
@@ -1,4 +1,6 @@
 import logger from '@wdio/logger'
+import { join } from 'node:path'
+import { promises as fsPromises } from 'node:fs'
 import scrollToPosition from '../clientSideScripts/scrollToPosition.js'
 import getDocumentScrollHeight from '../clientSideScripts/getDocumentScrollHeight.js'
 import { calculateDprData, getBase64ScreenshotSize, waitFor } from '../helpers/utils.js'
@@ -13,6 +15,7 @@ import hideRemoveElements from '../clientSideScripts/hideRemoveElements.js'
 import hideScrollBars from '../clientSideScripts/hideScrollbars.js'
 import type { ElementRectanglesOptions, RectanglesOutput } from './rectangles.interfaces.js'
 import { determineElementRectangles } from './rectangles.js'
+import { cropAndConvertToDataURL, saveBase64Image } from './images.js'
 
 const log = logger('@wdio/visual-service:@wdio/image-comparison-core:screenshots')
 
@@ -277,14 +280,42 @@ export async function getDesktopFullPageScreenshotsData(browserInstance:Webdrive
     const { devicePixelRatio, fullPageScrollTimeout, hideAfterFirstScroll, innerHeight } = options
     let actualInnerHeight = innerHeight
 
+    // Detect Safari desktop for debug saving and drop shadow cropping
+    const { capabilities } = browserInstance
+    const browserName = (capabilities?.browserName || '').toLowerCase()
+    const isSafariDesktop = browserName.includes('safari') && !browserInstance.isMobile
+    const debugDir = isSafariDesktop ? join(process.cwd(), '.tmp', 'debug', 'safari-desktop-fullpage-screenshots') : null
+
+    // Safari desktop has a drop shadow at the top
+    // The drop shadow is always 1 device pixel, which translates to 1 * DPR CSS pixels
+    const safariTopDropShadowCssPixels = isSafariDesktop ? Math.round(1 * devicePixelRatio) : 0
+    // For Safari desktop, calculate effective scroll increment
+    // First image: scroll by 0, use full height (716px)
+    // Subsequent images: scroll by (actualInnerHeight - dropShadowOffset) = 715px, crop 1px from top
+    const effectiveScrollIncrement = isSafariDesktop
+        ? actualInnerHeight - safariTopDropShadowCssPixels
+        : actualInnerHeight
+
+    // Create debug directory if needed
+    if (debugDir) {
+        await fsPromises.mkdir(debugDir, { recursive: true })
+    }
+
     // Start with an empty array, during the scroll it will be filled because a page could also have a lazy loading
     const amountOfScrollsArray = []
     let scrollHeight: number | undefined
     let screenshotSize
 
     for (let i = 0; i <= amountOfScrollsArray.length; i++) {
         // Determine and start scrolling
-        const scrollY = actualInnerHeight * i
+        // For Safari desktop: first image scrolls to 0, subsequent images scroll by effectiveScrollIncrement (715px)
+        // Image 0: scrollY = 0
+        // Image 1: scrollY = 715 (effectiveScrollIncrement)
+        // Image 2: scrollY = 1430 (2 * effectiveScrollIncrement)
+        // etc.
+        const scrollY = isSafariDesktop
+            ? (i === 0 ? 0 : i * effectiveScrollIncrement)
+            : actualInnerHeight * i
         await browserInstance.execute(scrollToPosition, scrollY)
 
         // Simply wait the amount of time specified for lazy-loading
@@ -316,27 +347,164 @@ export async function getDesktopFullPageScreenshotsData(browserInstance:Webdrive
         // Determine scroll height and check if we need to scroll again
         scrollHeight = await browserInstance.execute(getDocumentScrollHeight)
 
-        if (scrollHeight && (scrollY + actualInnerHeight < scrollHeight) && screenshotSize.height === actualInnerHeight) {
+        // For Safari desktop, use effectiveScrollIncrement for the scroll check
+        const scrollCheckHeight = isSafariDesktop ? effectiveScrollIncrement : actualInnerHeight
+        if (scrollHeight && (scrollY + scrollCheckHeight < scrollHeight) && screenshotSize.height === actualInnerHeight) {
             amountOfScrollsArray.push(amountOfScrollsArray.length)
         }
         // There is no else, Lazy load and large screenshots,
         // like with older drivers such as FF <= 47 and IE11, will not work
 
         // The height of the image of the last 1 could be different
-        const imageHeight: number = scrollHeight && amountOfScrollsArray.length === i
-            ? scrollHeight - actualInnerHeight * viewportScreenshots.length
-            : screenshotSize.height
+        // For Safari desktop, account for first image being full height and subsequent images being cropped
+        const isFirstImage = i === 0
+        const isLastImage = amountOfScrollsArray.length === i
+        let imageHeight: number
+        if (scrollHeight && isLastImage) {
+            if (isSafariDesktop) {
+                // Calculate remaining content: scrollHeight - (firstImageHeight + (numberOfPreviousImages - 1) * effectiveScrollIncrement)
+                const numberOfPreviousImages = viewportScreenshots.length
+                const totalPreviousHeight = numberOfPreviousImages === 0
+                    ? 0
+                    : actualInnerHeight + (numberOfPreviousImages - 1) * effectiveScrollIncrement
+                const remainingContent = scrollHeight - totalPreviousHeight
+
+                // For the last image, we need to be smart:
+                // - If remainingContent >= actualInnerHeight: it's a full screenshot, treat it like a regular non-first image
+                //   (crop 1px from top, visible height = 715px)
+                // - If remainingContent < actualInnerHeight: it's a partial screenshot
+                //   For partial screenshots, we're cropping from a position that doesn't include the drop shadow at pixel 0
+                //   So we don't need to add 1px - just use remainingContent directly
+                imageHeight = remainingContent >= actualInnerHeight
+                    ? effectiveScrollIncrement // Full screenshot: treat like regular non-first image
+                    : remainingContent // Partial screenshot: use remainingContent directly (no drop shadow in cropped region)
+            } else {
+                imageHeight = scrollHeight - actualInnerHeight * viewportScreenshots.length
+            }
+        } else {
+            // Non-last images: use full height for first, effectiveScrollIncrement for subsequent
+            imageHeight = isSafariDesktop && !isFirstImage
+                ? effectiveScrollIncrement
+                : screenshotSize.height
+        }
+
         // The starting position for cropping could be different for the last image (0 means no cropping)
-        const imageYPosition = amountOfScrollsArray.length === i && amountOfScrollsArray.length !== 0
-            ? actualInnerHeight - imageHeight
-            : 0
+        // For Safari desktop, crop 1px from top for all images except first
+        let imageYPosition: number
+        if (isSafariDesktop) {
+            if (isLastImage && !isFirstImage) {
+                // Last image: need to handle two cases
+                const numberOfPreviousImages = viewportScreenshots.length
+                const totalPreviousHeight = numberOfPreviousImages === 0
+                    ? 0
+                    : actualInnerHeight + (numberOfPreviousImages - 1) * effectiveScrollIncrement
+                const remainingContent = scrollHeight ? scrollHeight - totalPreviousHeight : 0
+
+                // Full screenshot: treat like regular non-first image (crop 1px from top)
+                // Partial screenshot: we want to show the last remainingContent pixels
+                // imageHeight = remainingContent, so we start at: 716 - remainingContent
+                // For partial screenshots, the drop shadow is at pixel 0, but we're cropping from a different position
+                // so we don't need to crop the drop shadow - just position to get the last remainingContent pixels
+                imageYPosition = remainingContent >= actualInnerHeight
+                    ? safariTopDropShadowCssPixels
+                    : actualInnerHeight - remainingContent
+            } else if (!isFirstImage) {
+                // Non-last, non-first images: crop 1px from top
+                imageYPosition = safariTopDropShadowCssPixels
+            } else {
+                // First image: no crop
+                imageYPosition = 0
+            }
+        } else {
+            // Non-Safari: standard calculation
+            imageYPosition = isLastImage && !isFirstImage
+                ? actualInnerHeight - imageHeight
+                : 0
+        }
+
+        // Debug logging for Safari desktop to see what's being cropped
+        if (isSafariDesktop) {
+            // For non-first images, imageHeight already accounts for the crop, so visible = imageHeight
+            // For first image, visible = imageHeight (no crop)
+            const visibleHeightAfterCrop = imageHeight
+            console.log(`Safari desktop screenshot ${i} cropping details:`, {
+                isFirstImage,
+                isLastImage,
+                scrollY,
+                screenshotSize: {
+                    width: screenshotSize.width,
+                    height: screenshotSize.height,
+                },
+                imageHeight,
+                imageYPosition,
+                visibleHeightAfterCrop,
+                actualInnerHeight,
+                effectiveScrollIncrement,
+                remainingContent: isLastImage && scrollHeight
+                    ? (() => {
+                        const numberOfPreviousImages = viewportScreenshots.length
+                        const totalPreviousHeight = numberOfPreviousImages === 0
+                            ? 0
+                            : actualInnerHeight + (numberOfPreviousImages - 1) * effectiveScrollIncrement
+                        return scrollHeight - totalPreviousHeight
+                    })()
+                    : undefined,
+                cropFromOriginal: {
+                    startY: imageYPosition,
+                    height: imageHeight,
+                    endY: imageYPosition + imageHeight,
+                },
+            })
+        }
+
+        // Calculate canvasYPosition for stitching
+        // For Safari desktop: first image at 0, subsequent images start where previous image ends
+        let canvasYPosition: number
+        if (isSafariDesktop && !isFirstImage) {
+            // Calculate based on where the previous image ends
+            // Previous image's canvasYPosition + previous image's height
+            const previousImage = viewportScreenshots[viewportScreenshots.length - 1]
+            canvasYPosition = previousImage
+                ? previousImage.canvasYPosition + previousImage.imageHeight
+                : actualInnerHeight + (i - 1) * effectiveScrollIncrement // Fallback (shouldn't happen)
+        } else {
+            canvasYPosition = isSafariDesktop ? 0 : scrollY
+        }
+
+        // Calculate crop dimensions in device pixels for debug saving
+        const imageXPositionDevicePixels = 0
+        const imageYPositionDevicePixels = Math.round(imageYPosition * devicePixelRatio)
+        const imageWidthDevicePixels = Math.round(screenshotSize.width * devicePixelRatio)
+        const imageHeightDevicePixels = Math.round(imageHeight * devicePixelRatio)
+
+        // Save cropped screenshot to debug folder for Safari desktop
+        if (isSafariDesktop && debugDir) {
+            try {
+                const croppedBase64 = await cropAndConvertToDataURL({
+                    addIOSBezelCorners: false,
+                    base64Image: screenshot,
+                    deviceName: '',
+                    devicePixelRatio: 1, // Already in device pixels
+                    height: imageHeightDevicePixels,
+                    isIOS: false,
+                    isLandscape: false,
+                    sourceX: imageXPositionDevicePixels,
+                    sourceY: imageYPositionDevicePixels,
+                    width: imageWidthDevicePixels,
+                })
+                const debugFilePath = join(debugDir, `step-${i}-scrollY-${scrollY}-height-${imageHeight}-yPos-${imageYPosition}.png`)
+                await saveBase64Image(croppedBase64, debugFilePath)
+            } catch (error) {
+                log.warn(`Failed to save debug screenshot for step ${i}:`, error)
+            }
+        }
 
         // Store all the screenshot data in the screenshot object
         viewportScreenshots.push({
             ...calculateDprData(
                 {
                     canvasWidth: screenshotSize.width,
-                    canvasYPosition: scrollY,
+                    canvasYPosition: canvasYPosition,
                     imageHeight: imageHeight,
                     imageWidth: screenshotSize.width,
                     imageXPosition: 0,
