Skip to content

Commit 287fc3b

Browse files
prushforthAliyanH
prushforth
authored and
AliyanH
committed
De-flake layerContextMenu.test.js, hopefully
1 parent b6ad08e commit 287fc3b

File tree

2 files changed

+52
-82
lines changed

2 files changed

+52
-82
lines changed

‎test/e2e/core/layerContextMenu.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
<layer- src="data/query/DouglasFir" label="Natural Resources Canada - Douglas Fir (Genus Pseudotsuga) 250m resolution"></layer->
6262
</mapml-viewer>
6363
<textarea id="messageExtent" name="messageExtent" rows="10" cols="100"></textarea>
64-
<textarea id="messageLayer" name="messageLayer" rows="10" cols="100"></textarea>
64+
<textarea data-testid="messageLayer" id="messageLayer" name="messageLayer" rows="10" cols="100"></textarea>
6565
</body>
6666

6767
</html>

‎test/e2e/core/layerContextMenu.test.js

Lines changed: 51 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -10,26 +10,20 @@ test.describe('Playwright Layer Context Menu Tests', () => {
1010
context.pages().find((page) => page.url() === 'about:blank') ||
1111
(await context.newPage());
1212
await page.goto('layerContextMenu.html');
13+
await page.waitForTimeout(250);
1314
});
1415

1516
test.afterAll(async function () {
1617
await context.close();
1718
});
1819

19-
test.beforeEach(async () => {
20-
await page.waitForTimeout(250);
21-
});
2220
test('Layer context menu shows when layer is clicked', async () => {
23-
await page.hover(
24-
'div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div'
25-
);
26-
await page.click(
27-
'div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div \n\
28-
> section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > \n\
29-
div:nth-child(1) > label > span',
30-
{ button: 'right' }
31-
);
21+
const layerControl = page.locator('.leaflet-control-layers');
22+
await layerControl.hover();
23+
const cbmtLayer = await page.getByText('CBMT - INLINE');
24+
cbmtLayer.click({ button: 'right' });
3225

26+
await page.waitForTimeout(200);
3327
const aHandle = await page.evaluateHandle(() =>
3428
document.querySelector('mapml-viewer')
3529
);
@@ -54,39 +48,34 @@ test.describe('Playwright Layer Context Menu Tests', () => {
5448
});
5549

5650
test('Layer context menu copy layer', async () => {
57-
await page.hover(
58-
'div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div'
59-
);
60-
await page.click(
61-
'div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div \n\
62-
> section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > \n\
63-
div:nth-child(1) > label > span',
64-
{ button: 'right' }
65-
);
66-
51+
const layerControl = page.locator('.leaflet-control-layers');
52+
await layerControl.hover();
53+
const cbmtLayer = await page.getByText('CBMT - INLINE');
54+
await cbmtLayer.click({ button: 'right' });
6755
await page.keyboard.press('l');
68-
await page.click('body > textarea#messageLayer');
56+
const mesageLayerArea = page.getByTestId('messageLayer');
57+
await mesageLayerArea.focus();
6958
await page.keyboard.press('Control+v');
70-
const copyLayer = await page.$eval(
71-
'body > textarea#messageLayer',
72-
(text) => text.value
73-
);
74-
59+
const copyLayer = await mesageLayerArea.evaluate((text) => text.value);
7560
expect(copyLayer).toEqual(
76-
'<layer- label="CBMT - INLINE" checked="">\n <map-link rel="license" title="Testing Inc."></map-link>\n <map-extent units="CBMTILE" checked="">\n <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>\n <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>\n <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>\n <map-link rel="tile" tref="http://localhost:30001/data/cbmt/{zoomLevel}/c{col}_r{row}.png"></map-link>\n </map-extent>\n </layer->'
61+
`<layer- label="CBMT - INLINE" checked="">
62+
<map-link rel="license" title="Testing Inc."></map-link>
63+
<map-extent units="CBMTILE" checked="">
64+
<map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
65+
<map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
66+
<map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>
67+
<map-link rel="tile" tref="http://localhost:30001/data/cbmt/{zoomLevel}/c{col}_r{row}.png"></map-link>
68+
</map-extent>
69+
</layer->`
7770
);
7871
});
7972

8073
test('Map zooms in to layer 2', async () => {
81-
await page.hover(
82-
'div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div'
83-
);
84-
await page.click(
85-
'div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div \n\
86-
> section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > \n\
87-
div:nth-child(1) > label > span',
88-
{ button: 'right', force: true }
89-
);
74+
const layerControl = page.locator('.leaflet-control-layers');
75+
await layerControl.hover();
76+
const layer2 = page.getByText('Layer 2');
77+
await layer2.click({ button: 'right', force: true });
78+
9079
await page.keyboard.press('z');
9180
await page.waitForTimeout(1000);
9281
const mapZoom = await page
@@ -103,15 +92,11 @@ test.describe('Playwright Layer Context Menu Tests', () => {
10392
});
10493

10594
test('Map zooms out to layer 3', async () => {
106-
await page.hover(
107-
'div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div'
108-
);
109-
await page.click(
110-
'div > div.leaflet-control-container > div.leaflet-top.leaflet-right > \n\
111-
div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(3) \n\
112-
> div:nth-child(1) > label > span',
113-
{ button: 'right', force: true }
114-
);
95+
const layerControl = page.locator('.leaflet-control-layers');
96+
await layerControl.hover();
97+
const layer3 = page.getByText('Layer 3');
98+
await layer3.click({ button: 'right', force: true });
99+
115100
await page.keyboard.press('z');
116101
await page.waitForTimeout(3000);
117102
const mapLocation = await page.$eval('body > mapml-viewer', (text) =>
@@ -130,15 +115,11 @@ test.describe('Playwright Layer Context Menu Tests', () => {
130115
});
131116

132117
test('Map zooms out to layer 4', async () => {
133-
await page.hover(
134-
'div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div'
135-
);
136-
await page.click(
137-
'div > div.leaflet-control-container > div.leaflet-top.leaflet-right > \n\
138-
div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(4) \n\
139-
> div:nth-child(1) > label > span',
140-
{ button: 'right', force: true }
141-
);
118+
const layerControl = page.locator('.leaflet-control-layers');
119+
await layerControl.hover();
120+
const layer4 = page.getByText('Layer 4');
121+
await layer4.click({ button: 'right', force: true });
122+
142123
await page.keyboard.press('z');
143124
await page.waitForTimeout(3000);
144125
const mapLocation = await page.$eval('body > mapml-viewer', (text) =>
@@ -157,38 +138,30 @@ test.describe('Playwright Layer Context Menu Tests', () => {
157138

158139
test('Copy layer with relative src attribute', async () => {
159140
await page.reload();
160-
await page.hover(
161-
'div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div'
162-
);
163-
await page.click(
164-
'div > div.leaflet-control-container > div.leaflet-top.leaflet-right > \n\
165-
div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(5) \n\
166-
> div:nth-child(1) > label > span',
167-
{ button: 'right' }
168-
);
141+
const layerControl = page.locator('.leaflet-control-layers');
142+
await layerControl.hover();
143+
const pseudotsuga = await layerControl.getByText('Genus Pseudotsuga');
144+
await pseudotsuga.click({ button: 'right' });
169145

170146
await page.keyboard.press('l');
171-
await page.click('body > textarea#messageLayer');
147+
const mesageLayerArea = page.getByTestId('messageLayer');
148+
await mesageLayerArea.focus();
172149
// reload is better than deleting text, because of cross-platform issue
173150
// with copy-pasting text on Windows/Linux
174151
// await page.keyboard.press('Control+a');
175152
// await page.keyboard.press('Backspace');
176153
await page.keyboard.press('Control+v');
177154
await page.waitForTimeout(1000);
178-
const copyLayer = await page.$eval(
179-
'body > textarea#messageLayer',
180-
(text) => text.value
181-
);
155+
const copyLayer = await mesageLayerArea.evaluate((text) => text.value);
182156

183157
expect(copyLayer).toEqual(
184158
'<layer- src="http://localhost:30001/data/query/DouglasFir" label="Natural Resources Canada - Douglas Fir (Genus Pseudotsuga) 250m resolution"></layer->'
185159
);
186160
});
187161

188162
test('Map Extent context menu shows when extent layer is right clicked', async () => {
189-
await page.hover(
190-
'div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div'
191-
);
163+
const layerControl = page.locator('.leaflet-control-layers');
164+
await layerControl.hover();
192165
await page
193166
.getByRole('group', { name: 'CBMT - INLINE' })
194167
.getByTitle('Layer Settings')
@@ -232,23 +205,20 @@ test.describe('Playwright Layer Context Menu Tests', () => {
232205
});
233206

234207
await page.keyboard.press('l');
235-
await page.click('body > textarea#messageLayer');
208+
const mesageLayerArea = page.getByTestId('messageLayer');
209+
await mesageLayerArea.focus();
236210
await page.keyboard.press('Control+a');
237211
await page.keyboard.press('Control+v');
238-
const copyLayer = await page.$eval(
239-
'body > textarea#messageLayer',
240-
(text) => text.value
241-
);
212+
const copyLayer = await mesageLayerArea.evaluate((text) => text.value);
242213

243214
expect(copyLayer).toEqual(
244215
'<map-extent units="CBMTILE" checked="">\n <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>\n <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>\n <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>\n <map-link rel="tile" tref="http://localhost:30001/data/cbmt/{zoomLevel}/c{col}_r{row}.png"></map-link>\n </map-extent>'
245216
);
246217
});
247218

248219
test('Map zooms to extent layer', async () => {
249-
await page.hover(
250-
'div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div'
251-
);
220+
const layerControl = page.locator('.leaflet-control-layers');
221+
await layerControl.hover();
252222
await page
253223
.getByRole('group', { name: 'Sub-layer' })
254224
.locator('label')

0 commit comments

Comments
 (0)