@@ -40,10 +40,11 @@ test.describe('Mixed Layer Z-Index Rendering Tests', () => {
4040 }
4141 } ) ;
4242 await page . waitForTimeout ( 500 ) ;
43+ const viewer = page . getByTestId ( 'viewer' ) ;
4344
44- // Take screenshot showing green tiles are now visible
45- const screenshot = await page . screenshot ( { fullPage : false } ) ;
46- expect ( screenshot ) . toMatchSnapshot ( 'mixedLayer-red-unchecked.png' ) ;
45+ await expect ( viewer ) . toHaveScreenshot ( 'mixedLayer-red-unchecked.png' , {
46+ maxDiffPixels : 50
47+ } ) ;
4748
4849 // Verify the red extent is now unchecked
4950 const redExtentChecked = await page . evaluate ( ( ) => {
@@ -64,9 +65,10 @@ test.describe('Mixed Layer Z-Index Rendering Tests', () => {
6465 } ) ;
6566 await page . waitForTimeout ( 500 ) ;
6667
67- // Take screenshot showing blue extent covering everything
68- const screenshot = await page . screenshot ( { fullPage : false } ) ;
69- expect ( screenshot ) . toMatchSnapshot ( 'mixedLayer-blue-checked.png' ) ;
68+ const viewer = page . getByTestId ( 'viewer' ) ;
69+ await expect ( viewer ) . toHaveScreenshot ( 'mixedLayer-blue-checked.png' , {
70+ maxDiffPixels : 50
71+ } ) ;
7072
7173 // Verify the blue extent is checked
7274 const blueExtent = await page . evaluate ( ( ) => {
@@ -106,9 +108,10 @@ test.describe('Mixed Layer Z-Index Rendering Tests', () => {
106108 }
107109 } ) ;
108110 await page . waitForTimeout ( 500 ) ;
109- // Take screenshot to validate the DOM order change effect
110- const screenshot = await page . screenshot ( { fullPage : false } ) ;
111- expect ( screenshot ) . toMatchSnapshot ( 'mixedLayer-dom-reordered.png' ) ;
111+ const viewer = page . getByTestId ( 'viewer' ) ;
112+ await expect ( viewer ) . toHaveScreenshot ( 'mixedLayer-dom-reordered.png' , {
113+ maxDiffPixels : 50
114+ } ) ;
112115 } ) ;
113116
114117 test ( 'feature data maintains correct z-index order when layer is checked' , async ( ) => {
@@ -128,9 +131,10 @@ test.describe('Mixed Layer Z-Index Rendering Tests', () => {
128131
129132 await page . waitForTimeout ( 500 ) ;
130133
131- // Take screenshot to validate feature visibility and positioning
132- const screenshot = await page . screenshot ( { fullPage : false } ) ;
133- expect ( screenshot ) . toMatchSnapshot ( 'mixedLayer-features-baseline.png' ) ;
134+ const viewer = page . getByTestId ( 'viewer' ) ;
135+ await expect ( viewer ) . toHaveScreenshot ( 'mixedLayer-features-baseline.png' , {
136+ maxDiffPixels : 50
137+ } ) ;
134138 } ) ;
135139
136140 test ( 'z-index values follow correct hierarchy' , async ( ) => {
@@ -157,9 +161,10 @@ test.describe('Mixed Layer Z-Index Rendering Tests', () => {
157161 expect ( elementCounts . checkedExtents ) . toBeGreaterThan ( 0 ) ;
158162
159163 await page . waitForTimeout ( 500 ) ;
160- // Take a screenshot to validate the final hierarchy
161- const screenshot = await page . screenshot ( { fullPage : false } ) ;
162- expect ( screenshot ) . toMatchSnapshot ( 'mixedLayer-hierarchy-validation.png' ) ;
164+ const viewer = page . getByTestId ( 'viewer' ) ;
165+ await expect ( viewer ) . toHaveScreenshot ( 'mixedLayer-hierarchy-validation.png' , {
166+ maxDiffPixels : 50
167+ } ) ;
163168 } ) ;
164169
165170 test . afterAll ( async ( ) => {
0 commit comments