Skip to content

Commit 7817c6c

Browse files
prushforthAliyanH
prushforth
authored and
AliyanH
committed
De-flake layerContextMenuKeyboard.test.js, ArrowKeyNavContextMenu,
layerContextMenuKeyboard and popupTabNavigation, hopefully
1 parent 287fc3b commit 7817c6c

File tree

3 files changed

+49
-93
lines changed

3 files changed

+49
-93
lines changed

‎test/e2e/core/ArrowKeyNavContextMenu.test.js‎

Lines changed: 25 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ test.describe('Using arrow keys to navigate context menu', () => {
1616

1717
test('Testing layer contextmenu', async () => {
1818
await page.waitForTimeout(500);
19-
await page.click('body > mapml-viewer');
20-
await page.waitForTimeout(500);
19+
await page.locator('mapml-viewer').focus();
20+
await page.keyboard.press('Tab');
2121
await page.keyboard.press('Tab');
2222

2323
await page.keyboard.press('Tab');
@@ -62,18 +62,17 @@ test.describe('Using arrow keys to navigate context menu', () => {
6262
);
6363
expect(activeElement).toEqual('Copy Layer (<kbd>L</kbd>)');
6464

65-
await page.click('body > mapml-viewer');
65+
await page.locator('mapml-viewer').click();
6666

67-
let hide = await page.$eval(
68-
'body > mapml-viewer',
69-
(viewer) => viewer._map.contextMenu._layerMenu.hidden
70-
);
71-
expect(hide).toEqual(true);
67+
let hidden = await page
68+
.locator('mapml-viewer')
69+
.evaluate((viewer) => viewer._map.contextMenu._layerMenu.hidden);
70+
expect(hidden).toEqual(true);
7271
});
7372

7473
test('Testing Extent layer contextmenu', async () => {
7574
await page.waitForTimeout(500);
76-
await page.click('body > mapml-viewer');
75+
await page.locator('mapml-viewer').click();
7776
await page.waitForTimeout(500);
7877
await page.keyboard.press('Tab');
7978
await page.keyboard.press('Tab');
@@ -112,20 +111,18 @@ test.describe('Using arrow keys to navigate context menu', () => {
112111
expect(activeElement).toEqual('Zoom To Sub-layer (<kbd>Z</kbd>)');
113112

114113
await page.keyboard.press('Escape');
115-
let hide = await page.$eval(
116-
'body > mapml-viewer',
117-
(viewer) => viewer._map.contextMenu._extentLayerMenu.hidden
118-
);
119-
expect(hide).toEqual(true);
114+
let hidden = await page
115+
.locator('mapml-viewer')
116+
.evaluate((viewer) => viewer._map.contextMenu._extentLayerMenu.hidden);
117+
expect(hidden).toEqual(true);
120118

121119
await page.keyboard.press('Shift+F10');
122120

123-
await page.click('body > mapml-viewer');
124-
hide = await page.$eval(
125-
'body > mapml-viewer',
126-
(viewer) => viewer._map.contextMenu._extentLayerMenu.hidden
127-
);
128-
expect(hide).toEqual(true);
121+
await page.locator('mapml-viewer').click();
122+
hidden = await page
123+
.locator('mapml-viewer')
124+
.evaluate((viewer) => viewer._map.contextMenu._extentLayerMenu.hidden);
125+
expect(hidden).toEqual(true);
129126

130127
// Ensuring the extent is still being revealed after layercontrol was closed and reopened
131128
await page.keyboard.press('Tab');
@@ -143,14 +140,15 @@ test.describe('Using arrow keys to navigate context menu', () => {
143140
await page.keyboard.press('Tab');
144141
await page.keyboard.press('Tab');
145142
await page.keyboard.press('Shift+F10');
143+
await page.waitForTimeout(500);
146144
activeElement = await page.evaluate(
147145
() => document.activeElement.shadowRoot.activeElement.innerHTML
148146
);
149147
expect(activeElement).toEqual('Zoom To Sub-layer (<kbd>Z</kbd>)');
150148
});
151149

152150
test('(partial) Up and Down Arrow keys to navigate the contextmenu', async () => {
153-
await page.click('body > mapml-viewer', { button: 'right' });
151+
await page.locator('mapml-viewer').click({ button: 'right' });
154152
await page.keyboard.press('ArrowDown');
155153

156154
let activeElement = await page.evaluate(
@@ -192,7 +190,7 @@ test.describe('Using arrow keys to navigate context menu', () => {
192190
});
193191

194192
test('Right and Left Arrow keys to navigate the contextmenu', async () => {
195-
await page.click('body > mapml-viewer');
193+
await page.locator('mapml-viewer').click();
196194
await page.keyboard.press('Shift+F10');
197195
await page.keyboard.press('ArrowDown');
198196

@@ -262,16 +260,15 @@ test.describe('Using arrow keys to navigate context menu', () => {
262260
);
263261
expect(activeElement).toEqual('Copy (<kbd>C</kbd>)<span></span>');
264262

265-
let hide = await page.$eval(
266-
'body > mapml-viewer',
267-
(viewer) => viewer._map.contextMenu._copySubMenu.hidden
268-
);
269-
expect(hide).toEqual(true);
263+
let hidden = await page
264+
.locator('mapml-viewer')
265+
.evaluate((viewer) => viewer._map.contextMenu._copySubMenu.hidden);
266+
expect(hidden).toEqual(true);
270267
});
271268

272269
test('(full) Up and Down Arrow keys to navigate the contextmenu', async () => {
273270
await page.waitForTimeout(500);
274-
await page.click('body > mapml-viewer');
271+
await page.locator('mapml-viewer').click();
275272
await page.keyboard.press('ArrowRight');
276273
await page.waitForTimeout(500);
277274
await page.keyboard.press('ArrowRight');

‎test/e2e/core/layerContextMenuKeyboard.test.js‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,10 @@ test.describe('Playwright Layer Context Menu Tests', () => {
3232
await expect(zoom).toBe(0);
3333

3434
await page.locator('mapml-viewer').press('Tab');
35-
await page.locator('[aria-label="Zoom in"]').press('Tab');
36-
await page.locator('[aria-label="Zoom out"]').press('Tab');
37-
await page.locator('[aria-label="Reload"]').press('Tab');
35+
await page.getByLabel('Zoom in').press('Tab');
36+
await page.getByLabel('Zoom out').press('Tab');
37+
await page.getByLabel('Reload').press('Tab');
38+
await page.getByRole('button', { name: 'View Fullscreen' }).press('Tab');
3839

3940
// layer control is next tab stop, opened by hover or Enter key
4041
await page.locator('a[role="button"]').nth(3).press('Enter');
@@ -70,8 +71,7 @@ test.describe('Playwright Layer Context Menu Tests', () => {
7071
await page.locator('[aria-label="Zoom out"]').press('Tab');
7172

7273
await page.locator('[aria-label="Reload"]').press('Tab');
73-
// tab past features, focus on layer control
74-
await page.locator('a[role="button"]').nth(2).press('Tab');
74+
await page.getByRole('button', { name: 'View Fullscreen' }).press('Tab');
7575
// Press Enter on layer control
7676
await page.locator('a[role="button"]').nth(3).press('Enter');
7777
// Press Shift+F10 to bring up layer context menu on first layer
@@ -104,8 +104,7 @@ test.describe('Playwright Layer Context Menu Tests', () => {
104104
await page.locator('[aria-label="Zoom in"]').press('Tab');
105105
await page.locator('[aria-label="Zoom out"]').press('Tab');
106106
await page.locator('[aria-label="Reload"]').press('Tab');
107-
// tab past features, focus on layer control
108-
await page.locator('a[role="button"]').nth(2).press('Tab');
107+
await page.getByRole('button', { name: 'View Fullscreen' }).press('Tab');
109108
// Press Enter on layer control
110109
await page.locator('a[role="button"]').nth(3).press('Enter');
111110
// Press Shift+F10 to bring up layer context menu on first layer
@@ -143,8 +142,7 @@ test.describe('Playwright Layer Context Menu Tests', () => {
143142
await page.locator('[aria-label="Zoom in"]').press('Tab');
144143
await page.locator('[aria-label="Zoom out"]').press('Tab');
145144
await page.locator('[aria-label="Reload"]').press('Tab');
146-
// tab past features, focus on layer control
147-
await page.locator('a[role="button"]').nth(2).press('Tab');
145+
await page.getByRole('button', { name: 'View Fullscreen' }).press('Tab');
148146
// Press Enter on layer control
149147
await page.locator('a[role="button"]').nth(3).press('Enter');
150148
// Press Shift+F10 to bring up layer context menu on first layer

‎test/e2e/core/popupTabNavigation.test.js‎

Lines changed: 17 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -29,91 +29,52 @@ test.describe('Playwright Keyboard Navigation + Query Layer Tests', () => {
2929

3030
await page.keyboard.press('Tab'); // focus feature
3131
await page.keyboard.press('Enter'); // display popup with link in it
32-
const h = await page.evaluateHandle(() =>
33-
document.querySelector('mapml-viewer')
32+
const viewer = page.locator('mapml-viewer');
33+
let f = await viewer.evaluate(
34+
(viewer) => viewer.shadowRoot.activeElement.className
3435
);
35-
const nh = await page.evaluateHandle((doc) => doc.shadowRoot, h);
36-
const rh = await page.evaluateHandle((root) => root.activeElement, nh);
37-
const f = await (
38-
await page.evaluateHandle((elem) => elem.className, rh)
39-
).jsonValue();
4036
expect(f).toEqual('mapml-popup-content');
4137

4238
await page.keyboard.press('Tab'); // focus link
43-
const h2 = await page.evaluateHandle(() =>
44-
document.querySelector('mapml-viewer')
39+
let f2 = await viewer.evaluate(
40+
(viewer) => viewer.shadowRoot.activeElement.tagName
4541
);
46-
const nh2 = await page.evaluateHandle((doc) => doc.shadowRoot, h2);
47-
const rh2 = await page.evaluateHandle((root) => root.activeElement, nh2);
48-
const f2 = await (
49-
await page.evaluateHandle((elem) => elem.tagName, rh2)
50-
).jsonValue();
5142
expect(f2.toUpperCase()).toEqual('A');
5243

5344
await page.keyboard.press('Tab'); // focus on "zoom to here" link
54-
const h3 = await page.evaluateHandle(() =>
55-
document.querySelector('mapml-viewer')
45+
let f3 = await viewer.evaluate(
46+
(viewer) => viewer.shadowRoot.activeElement.tagName
5647
);
57-
const nh3 = await page.evaluateHandle((doc) => doc.shadowRoot, h3);
58-
const rh3 = await page.evaluateHandle((root) => root.activeElement, nh3);
59-
const f3 = await (
60-
await page.evaluateHandle((elem) => elem.tagName, rh3)
61-
).jsonValue();
6248
expect(f3.toUpperCase()).toEqual('A');
6349

6450
await page.keyboard.press('Tab'); // focus on |< affordance
65-
const h4 = await page.evaluateHandle(() =>
66-
document.querySelector('mapml-viewer')
51+
let f4 = await viewer.evaluate(
52+
(viewer) => viewer.shadowRoot.activeElement.title
6753
);
68-
const nh4 = await page.evaluateHandle((doc) => doc.shadowRoot, h4);
69-
const rh4 = await page.evaluateHandle((root) => root.activeElement, nh4);
70-
const f4 = await (
71-
await page.evaluateHandle((elem) => elem.title, rh4)
72-
).jsonValue();
7354
expect(f4).toEqual('Focus Map');
7455

7556
await page.keyboard.press('Tab'); // focus on < affordance
76-
const h5 = await page.evaluateHandle(() =>
77-
document.querySelector('mapml-viewer')
57+
let f5 = await viewer.evaluate(
58+
(viewer) => viewer.shadowRoot.activeElement.title
7859
);
79-
const nh5 = await page.evaluateHandle((doc) => doc.shadowRoot, h5);
80-
const rh5 = await page.evaluateHandle((root) => root.activeElement, nh5);
81-
const f5 = await (
82-
await page.evaluateHandle((elem) => elem.title, rh5)
83-
).jsonValue();
8460
expect(f5).toEqual('Previous Feature');
8561

8662
await page.keyboard.press('Tab'); // focus on > affordance
87-
const h6 = await page.evaluateHandle(() =>
88-
document.querySelector('mapml-viewer')
63+
let f6 = await viewer.evaluate(
64+
(viewer) => viewer.shadowRoot.activeElement.title
8965
);
90-
const nh6 = await page.evaluateHandle((doc) => doc.shadowRoot, h6);
91-
const rh6 = await page.evaluateHandle((root) => root.activeElement, nh6);
92-
const f6 = await (
93-
await page.evaluateHandle((elem) => elem.title, rh6)
94-
).jsonValue();
9566
expect(f6).toEqual('Next Feature');
9667

9768
await page.keyboard.press('Tab'); // focus on >| affordance
98-
const h7 = await page.evaluateHandle(() =>
99-
document.querySelector('mapml-viewer')
69+
let f7 = await viewer.evaluate(
70+
(viewer) => viewer.shadowRoot.activeElement.title
10071
);
101-
const nh7 = await page.evaluateHandle((doc) => doc.shadowRoot, h7);
102-
const rh7 = await page.evaluateHandle((root) => root.activeElement, nh7);
103-
const f7 = await (
104-
await page.evaluateHandle((elem) => elem.title, rh7)
105-
).jsonValue();
10672
expect(f7).toEqual('Focus Controls');
10773

10874
await page.keyboard.press('Tab'); // focus on X dismiss popup affordance
109-
const h8 = await page.evaluateHandle(() =>
110-
document.querySelector('mapml-viewer')
75+
let f8 = await viewer.evaluate(
76+
(viewer) => viewer.shadowRoot.activeElement.className
11177
);
112-
const nh8 = await page.evaluateHandle((doc) => doc.shadowRoot, h8);
113-
const rh8 = await page.evaluateHandle((root) => root.activeElement, nh8);
114-
const f8 = await (
115-
await page.evaluateHandle((elem) => elem.className, rh8)
116-
).jsonValue();
11778
expect(f8).toEqual('leaflet-popup-close-button');
11879
});
11980

0 commit comments

Comments
 (0)