Skip to content

Commit 24e125f

Browse files
author
Peter Rushforth
committed
Replace page screenshots with viewer screenshots
1 parent be38cb4 commit 24e125f

File tree

8 files changed

+26
-19
lines changed

8 files changed

+26
-19
lines changed

‎test/e2e/layers/mixedLayer-zindex-rendering.test.js‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,11 @@ test.describe('Mixed Layer Z-Index Rendering Tests', () => {
1414

1515
test('baseline rendering - red map-extent over green inline tiles and features', async () => {
1616
await page.waitForTimeout(500);
17-
// Take baseline screenshot showing red tiles on top with blue feature visible
18-
const screenshot = await page.screenshot({ fullPage: false });
19-
expect(screenshot).toMatchSnapshot('mixedLayer-baseline.png');
17+
const viewer = page.getByTestId('viewer');
18+
19+
await expect(viewer).toHaveScreenshot('mixedLayer-baseline.png', {
20+
maxDiffPixels: 50
21+
});
2022

2123
// Verify that the red map-extent is checked and rendering
2224
const redExtent = await page.evaluate(() => {
@@ -40,10 +42,11 @@ test.describe('Mixed Layer Z-Index Rendering Tests', () => {
4042
}
4143
});
4244
await page.waitForTimeout(500);
45+
const viewer = page.getByTestId('viewer');
4346

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');
47+
await expect(viewer).toHaveScreenshot('mixedLayer-red-unchecked.png', {
48+
maxDiffPixels: 50
49+
});
4750

4851
// Verify the red extent is now unchecked
4952
const redExtentChecked = await page.evaluate(() => {
@@ -64,9 +67,10 @@ test.describe('Mixed Layer Z-Index Rendering Tests', () => {
6467
});
6568
await page.waitForTimeout(500);
6669

67-
// Take screenshot showing blue extent covering everything
68-
const screenshot = await page.screenshot({ fullPage: false });
69-
expect(screenshot).toMatchSnapshot('mixedLayer-blue-checked.png');
70+
const viewer = page.getByTestId('viewer');
71+
await expect(viewer).toHaveScreenshot('mixedLayer-blue-checked.png', {
72+
maxDiffPixels: 50
73+
});
7074

7175
// Verify the blue extent is checked
7276
const blueExtent = await page.evaluate(() => {
@@ -106,9 +110,10 @@ test.describe('Mixed Layer Z-Index Rendering Tests', () => {
106110
}
107111
});
108112
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');
113+
const viewer = page.getByTestId('viewer');
114+
await expect(viewer).toHaveScreenshot('mixedLayer-dom-reordered.png', {
115+
maxDiffPixels: 50
116+
});
112117
});
113118

114119
test('feature data maintains correct z-index order when layer is checked', async () => {
@@ -128,9 +133,10 @@ test.describe('Mixed Layer Z-Index Rendering Tests', () => {
128133

129134
await page.waitForTimeout(500);
130135

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');
136+
const viewer = page.getByTestId('viewer');
137+
await expect(viewer).toHaveScreenshot('mixedLayer-features-baseline.png', {
138+
maxDiffPixels: 50
139+
});
134140
});
135141

136142
test('z-index values follow correct hierarchy', async () => {
@@ -157,9 +163,10 @@ test.describe('Mixed Layer Z-Index Rendering Tests', () => {
157163
expect(elementCounts.checkedExtents).toBeGreaterThan(0);
158164

159165
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');
166+
const viewer = page.getByTestId('viewer');
167+
await expect(viewer).toHaveScreenshot('mixedLayer-hierarchy-validation.png', {
168+
maxDiffPixels: 50
169+
});
163170
});
164171

165172
test.afterAll(async () => {

‎test/e2e/layers/mixedLayer-zindex-rendering.test.js-snapshots/mixedLayer-baseline-linux.png‎

-3.94 KB
Loading

‎test/e2e/layers/mixedLayer-zindex-rendering.test.js-snapshots/mixedLayer-blue-checked-linux.png‎

-7.54 KB
Loading

‎test/e2e/layers/mixedLayer-zindex-rendering.test.js-snapshots/mixedLayer-dom-reordered-linux.png‎

-4.02 KB
Loading

‎test/e2e/layers/mixedLayer-zindex-rendering.test.js-snapshots/mixedLayer-features-baseline-linux.png‎

-3.94 KB
Loading

‎test/e2e/layers/mixedLayer-zindex-rendering.test.js-snapshots/mixedLayer-hierarchy-validation-linux.png‎

-3.94 KB
Loading

‎test/e2e/layers/mixedLayer-zindex-rendering.test.js-snapshots/mixedLayer-red-unchecked-linux.png‎

-3.99 KB
Loading

‎test/e2e/layers/mixedLayer.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
</head>
1515

1616
<body>
17-
<mapml-viewer width="500" height="500" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344" controls>
17+
<mapml-viewer data-testid="viewer" width="500" height="500" projection="CBMTILE" zoom="2" lat="45.5052040" lon="-75.2202344" controls>
1818

1919
<map-layer label="Static inline content" checked>
2020
<map-meta name="zoom" content="min=0,max=10"></map-meta>

0 commit comments

Comments
 (0)