diff --git a/visual-js/.changeset/spotty-pumpkins-hide.md b/visual-js/.changeset/spotty-pumpkins-hide.md new file mode 100644 index 00000000..626968bd --- /dev/null +++ b/visual-js/.changeset/spotty-pumpkins-hide.md @@ -0,0 +1,5 @@ +--- +"@saucelabs/visual-playwright": patch +--- + +Correct clipping and ignore regions when page is pre-scrolled diff --git a/visual-js/visual-playwright/src/api.ts b/visual-js/visual-playwright/src/api.ts index ccae7dbf..28948851 100644 --- a/visual-js/visual-playwright/src/api.ts +++ b/visual-js/visual-playwright/src/api.ts @@ -193,6 +193,12 @@ ${e instanceof Error ? e.message : JSON.stringify(e)} const clientDims = clipElement.getBoundingClientRect(); let { x, y, height, width } = clientDims; + // Add scroll offset to coordinates in case page is scrolled prior to capture + ({ x, y } = { + x: x + window.scrollX, + y: y + window.scrollY, + }); + // corrected coordinates const cX = x < 0 ? Math.abs(x) : 0; const cY = y < 0 ? Math.abs(y) : 0; @@ -243,8 +249,8 @@ ${e instanceof Error ? e.message : JSON.stringify(e)} selectorRegions.push({ name: selector, - x: Math.round(rect.x), - y: Math.round(rect.y), + x: Math.round(rect.x + window.scrollX), + y: Math.round(rect.y + window.scrollY), height: Math.round(rect.height), width: Math.round(rect.width), });