From 7817c6c1a768a31963a135b5bf4a314d8f186ee4 Mon Sep 17 00:00:00 2001 From: Peter Rushforth Date: Tue, 12 Mar 2024 15:21:51 -0400 Subject: [PATCH] De-flake layerContextMenuKeyboard.test.js, ArrowKeyNavContextMenu, layerContextMenuKeyboard and popupTabNavigation, hopefully --- test/e2e/core/ArrowKeyNavContextMenu.test.js | 53 +++++++------- .../e2e/core/layerContextMenuKeyboard.test.js | 16 ++-- test/e2e/core/popupTabNavigation.test.js | 73 +++++-------------- 3 files changed, 49 insertions(+), 93 deletions(-) diff --git a/test/e2e/core/ArrowKeyNavContextMenu.test.js b/test/e2e/core/ArrowKeyNavContextMenu.test.js index 51f0ece5e..ae89d7c6e 100644 --- a/test/e2e/core/ArrowKeyNavContextMenu.test.js +++ b/test/e2e/core/ArrowKeyNavContextMenu.test.js @@ -16,8 +16,8 @@ test.describe('Using arrow keys to navigate context menu', () => { test('Testing layer contextmenu', async () => { await page.waitForTimeout(500); - await page.click('body > mapml-viewer'); - await page.waitForTimeout(500); + await page.locator('mapml-viewer').focus(); + await page.keyboard.press('Tab'); await page.keyboard.press('Tab'); await page.keyboard.press('Tab'); @@ -62,18 +62,17 @@ test.describe('Using arrow keys to navigate context menu', () => { ); expect(activeElement).toEqual('Copy Layer (L)'); - await page.click('body > mapml-viewer'); + await page.locator('mapml-viewer').click(); - let hide = await page.$eval( - 'body > mapml-viewer', - (viewer) => viewer._map.contextMenu._layerMenu.hidden - ); - expect(hide).toEqual(true); + let hidden = await page + .locator('mapml-viewer') + .evaluate((viewer) => viewer._map.contextMenu._layerMenu.hidden); + expect(hidden).toEqual(true); }); test('Testing Extent layer contextmenu', async () => { await page.waitForTimeout(500); - await page.click('body > mapml-viewer'); + await page.locator('mapml-viewer').click(); await page.waitForTimeout(500); await page.keyboard.press('Tab'); await page.keyboard.press('Tab'); @@ -112,20 +111,18 @@ test.describe('Using arrow keys to navigate context menu', () => { expect(activeElement).toEqual('Zoom To Sub-layer (Z)'); await page.keyboard.press('Escape'); - let hide = await page.$eval( - 'body > mapml-viewer', - (viewer) => viewer._map.contextMenu._extentLayerMenu.hidden - ); - expect(hide).toEqual(true); + let hidden = await page + .locator('mapml-viewer') + .evaluate((viewer) => viewer._map.contextMenu._extentLayerMenu.hidden); + expect(hidden).toEqual(true); await page.keyboard.press('Shift+F10'); - await page.click('body > mapml-viewer'); - hide = await page.$eval( - 'body > mapml-viewer', - (viewer) => viewer._map.contextMenu._extentLayerMenu.hidden - ); - expect(hide).toEqual(true); + await page.locator('mapml-viewer').click(); + hidden = await page + .locator('mapml-viewer') + .evaluate((viewer) => viewer._map.contextMenu._extentLayerMenu.hidden); + expect(hidden).toEqual(true); // Ensuring the extent is still being revealed after layercontrol was closed and reopened await page.keyboard.press('Tab'); @@ -143,6 +140,7 @@ test.describe('Using arrow keys to navigate context menu', () => { await page.keyboard.press('Tab'); await page.keyboard.press('Tab'); await page.keyboard.press('Shift+F10'); + await page.waitForTimeout(500); activeElement = await page.evaluate( () => document.activeElement.shadowRoot.activeElement.innerHTML ); @@ -150,7 +148,7 @@ test.describe('Using arrow keys to navigate context menu', () => { }); test('(partial) Up and Down Arrow keys to navigate the contextmenu', async () => { - await page.click('body > mapml-viewer', { button: 'right' }); + await page.locator('mapml-viewer').click({ button: 'right' }); await page.keyboard.press('ArrowDown'); let activeElement = await page.evaluate( @@ -192,7 +190,7 @@ test.describe('Using arrow keys to navigate context menu', () => { }); test('Right and Left Arrow keys to navigate the contextmenu', async () => { - await page.click('body > mapml-viewer'); + await page.locator('mapml-viewer').click(); await page.keyboard.press('Shift+F10'); await page.keyboard.press('ArrowDown'); @@ -262,16 +260,15 @@ test.describe('Using arrow keys to navigate context menu', () => { ); expect(activeElement).toEqual('Copy (C)'); - let hide = await page.$eval( - 'body > mapml-viewer', - (viewer) => viewer._map.contextMenu._copySubMenu.hidden - ); - expect(hide).toEqual(true); + let hidden = await page + .locator('mapml-viewer') + .evaluate((viewer) => viewer._map.contextMenu._copySubMenu.hidden); + expect(hidden).toEqual(true); }); test('(full) Up and Down Arrow keys to navigate the contextmenu', async () => { await page.waitForTimeout(500); - await page.click('body > mapml-viewer'); + await page.locator('mapml-viewer').click(); await page.keyboard.press('ArrowRight'); await page.waitForTimeout(500); await page.keyboard.press('ArrowRight'); diff --git a/test/e2e/core/layerContextMenuKeyboard.test.js b/test/e2e/core/layerContextMenuKeyboard.test.js index 20cfa1719..6995b4919 100644 --- a/test/e2e/core/layerContextMenuKeyboard.test.js +++ b/test/e2e/core/layerContextMenuKeyboard.test.js @@ -32,9 +32,10 @@ test.describe('Playwright Layer Context Menu Tests', () => { await expect(zoom).toBe(0); await page.locator('mapml-viewer').press('Tab'); - await page.locator('[aria-label="Zoom in"]').press('Tab'); - await page.locator('[aria-label="Zoom out"]').press('Tab'); - await page.locator('[aria-label="Reload"]').press('Tab'); + await page.getByLabel('Zoom in').press('Tab'); + await page.getByLabel('Zoom out').press('Tab'); + await page.getByLabel('Reload').press('Tab'); + await page.getByRole('button', { name: 'View Fullscreen' }).press('Tab'); // layer control is next tab stop, opened by hover or Enter key await page.locator('a[role="button"]').nth(3).press('Enter'); @@ -70,8 +71,7 @@ test.describe('Playwright Layer Context Menu Tests', () => { await page.locator('[aria-label="Zoom out"]').press('Tab'); await page.locator('[aria-label="Reload"]').press('Tab'); - // tab past features, focus on layer control - await page.locator('a[role="button"]').nth(2).press('Tab'); + await page.getByRole('button', { name: 'View Fullscreen' }).press('Tab'); // Press Enter on layer control await page.locator('a[role="button"]').nth(3).press('Enter'); // Press Shift+F10 to bring up layer context menu on first layer @@ -104,8 +104,7 @@ test.describe('Playwright Layer Context Menu Tests', () => { await page.locator('[aria-label="Zoom in"]').press('Tab'); await page.locator('[aria-label="Zoom out"]').press('Tab'); await page.locator('[aria-label="Reload"]').press('Tab'); - // tab past features, focus on layer control - await page.locator('a[role="button"]').nth(2).press('Tab'); + await page.getByRole('button', { name: 'View Fullscreen' }).press('Tab'); // Press Enter on layer control await page.locator('a[role="button"]').nth(3).press('Enter'); // Press Shift+F10 to bring up layer context menu on first layer @@ -143,8 +142,7 @@ test.describe('Playwright Layer Context Menu Tests', () => { await page.locator('[aria-label="Zoom in"]').press('Tab'); await page.locator('[aria-label="Zoom out"]').press('Tab'); await page.locator('[aria-label="Reload"]').press('Tab'); - // tab past features, focus on layer control - await page.locator('a[role="button"]').nth(2).press('Tab'); + await page.getByRole('button', { name: 'View Fullscreen' }).press('Tab'); // Press Enter on layer control await page.locator('a[role="button"]').nth(3).press('Enter'); // Press Shift+F10 to bring up layer context menu on first layer diff --git a/test/e2e/core/popupTabNavigation.test.js b/test/e2e/core/popupTabNavigation.test.js index 077216315..57f5e552d 100644 --- a/test/e2e/core/popupTabNavigation.test.js +++ b/test/e2e/core/popupTabNavigation.test.js @@ -29,91 +29,52 @@ test.describe('Playwright Keyboard Navigation + Query Layer Tests', () => { await page.keyboard.press('Tab'); // focus feature await page.keyboard.press('Enter'); // display popup with link in it - const h = await page.evaluateHandle(() => - document.querySelector('mapml-viewer') + const viewer = page.locator('mapml-viewer'); + let f = await viewer.evaluate( + (viewer) => viewer.shadowRoot.activeElement.className ); - const nh = await page.evaluateHandle((doc) => doc.shadowRoot, h); - const rh = await page.evaluateHandle((root) => root.activeElement, nh); - const f = await ( - await page.evaluateHandle((elem) => elem.className, rh) - ).jsonValue(); expect(f).toEqual('mapml-popup-content'); await page.keyboard.press('Tab'); // focus link - const h2 = await page.evaluateHandle(() => - document.querySelector('mapml-viewer') + let f2 = await viewer.evaluate( + (viewer) => viewer.shadowRoot.activeElement.tagName ); - const nh2 = await page.evaluateHandle((doc) => doc.shadowRoot, h2); - const rh2 = await page.evaluateHandle((root) => root.activeElement, nh2); - const f2 = await ( - await page.evaluateHandle((elem) => elem.tagName, rh2) - ).jsonValue(); expect(f2.toUpperCase()).toEqual('A'); await page.keyboard.press('Tab'); // focus on "zoom to here" link - const h3 = await page.evaluateHandle(() => - document.querySelector('mapml-viewer') + let f3 = await viewer.evaluate( + (viewer) => viewer.shadowRoot.activeElement.tagName ); - const nh3 = await page.evaluateHandle((doc) => doc.shadowRoot, h3); - const rh3 = await page.evaluateHandle((root) => root.activeElement, nh3); - const f3 = await ( - await page.evaluateHandle((elem) => elem.tagName, rh3) - ).jsonValue(); expect(f3.toUpperCase()).toEqual('A'); await page.keyboard.press('Tab'); // focus on |< affordance - const h4 = await page.evaluateHandle(() => - document.querySelector('mapml-viewer') + let f4 = await viewer.evaluate( + (viewer) => viewer.shadowRoot.activeElement.title ); - const nh4 = await page.evaluateHandle((doc) => doc.shadowRoot, h4); - const rh4 = await page.evaluateHandle((root) => root.activeElement, nh4); - const f4 = await ( - await page.evaluateHandle((elem) => elem.title, rh4) - ).jsonValue(); expect(f4).toEqual('Focus Map'); await page.keyboard.press('Tab'); // focus on < affordance - const h5 = await page.evaluateHandle(() => - document.querySelector('mapml-viewer') + let f5 = await viewer.evaluate( + (viewer) => viewer.shadowRoot.activeElement.title ); - const nh5 = await page.evaluateHandle((doc) => doc.shadowRoot, h5); - const rh5 = await page.evaluateHandle((root) => root.activeElement, nh5); - const f5 = await ( - await page.evaluateHandle((elem) => elem.title, rh5) - ).jsonValue(); expect(f5).toEqual('Previous Feature'); await page.keyboard.press('Tab'); // focus on > affordance - const h6 = await page.evaluateHandle(() => - document.querySelector('mapml-viewer') + let f6 = await viewer.evaluate( + (viewer) => viewer.shadowRoot.activeElement.title ); - const nh6 = await page.evaluateHandle((doc) => doc.shadowRoot, h6); - const rh6 = await page.evaluateHandle((root) => root.activeElement, nh6); - const f6 = await ( - await page.evaluateHandle((elem) => elem.title, rh6) - ).jsonValue(); expect(f6).toEqual('Next Feature'); await page.keyboard.press('Tab'); // focus on >| affordance - const h7 = await page.evaluateHandle(() => - document.querySelector('mapml-viewer') + let f7 = await viewer.evaluate( + (viewer) => viewer.shadowRoot.activeElement.title ); - const nh7 = await page.evaluateHandle((doc) => doc.shadowRoot, h7); - const rh7 = await page.evaluateHandle((root) => root.activeElement, nh7); - const f7 = await ( - await page.evaluateHandle((elem) => elem.title, rh7) - ).jsonValue(); expect(f7).toEqual('Focus Controls'); await page.keyboard.press('Tab'); // focus on X dismiss popup affordance - const h8 = await page.evaluateHandle(() => - document.querySelector('mapml-viewer') + let f8 = await viewer.evaluate( + (viewer) => viewer.shadowRoot.activeElement.className ); - const nh8 = await page.evaluateHandle((doc) => doc.shadowRoot, h8); - const rh8 = await page.evaluateHandle((root) => root.activeElement, nh8); - const f8 = await ( - await page.evaluateHandle((elem) => elem.className, rh8) - ).jsonValue(); expect(f8).toEqual('leaflet-popup-close-button'); });