Add await whenReady to fix some tests. Change locator to use

page.getByTestId('firstmap') which is less flaky according to recent playwright docs (than selectors).
Maps4HTML · Aug 10, 2023 · 99022c7 · 99022c7
1 parent a16c9d7
commit 99022c7
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/test/e2e/core/mapContextMenu.test.js b/test/e2e/core/mapContextMenu.test.js
@@ -328,7 +328,8 @@ test.describe('Playwright Map Context Menu Tests', () => {
 
   test('Submenu, copy map (MapML)', async () => {
     await page.reload();
-    await page.waitForTimeout(3000);
+    const map = await page.getByTestId('firstmap');
+    await map.evaluate((map)=>map.whenLayersReady());
     await page.click('body > map');
     await page.keyboard.press('Shift+F10');
     await page.keyboard.press('Tab');
@@ -341,9 +342,9 @@ test.describe('Playwright Map Context Menu Tests', () => {
       'body > textarea#coord',
       (text) => text.value
     );
-    const expected = `<map style="height: 600px;width:500px;" is="web-map" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls="" role="application">
+    const expected = `<map data-testid="firstmap" style="height: 600px;width:500px;" is="web-map" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls="" role="application">
     <layer- label="CBMT - INLINE" checked="">
-      <map-extent units="CBMTILE" hidden="">
+      <map-extent units="CBMTILE" hidden="" checked="">
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
         <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
         <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>

diff --git a/test/e2e/core/mapContextMenuKeyboard.test.js b/test/e2e/core/mapContextMenuKeyboard.test.js
@@ -70,7 +70,9 @@ test.describe('Playwright Map Context Menu Keyboard Tests', () => {
       errorLogs.push(err.message);
     });
     await page.goto('mapContextMenu.html');
-    await page.locator('mapml-viewer').press('Tab');
+    const viewer = await page.locator('mapml-viewer');
+    await viewer.evaluate((viewer)=>viewer.whenLayersReady());
+    await viewer.press('Tab');
     await page
       .locator('[aria-label="The Man With Two Hats"]')
       .press('Shift+F10');

diff --git a/test/e2e/core/mapElement.html b/test/e2e/core/mapElement.html
@@ -23,7 +23,7 @@
 </head>
 
 <body>
-  <map style="height: 600px;width:500px;" is="web-map" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
+  <map data-testid="firstmap" style="height: 600px;width:500px;" is="web-map" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
     <layer- label="CBMT - INLINE" checked>
       <map-extent units="CBMTILE">
         <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
@@ -34,7 +34,7 @@
     </layer->
   </map>
 
-  <map style="height: 600px;width:500px;" is="web-map" id="default-projection" zoom="0" lat="47" lon="-92" controls>
+  <map data-testid="secondmap" style="height: 600px;width:500px;" is="web-map" id="default-projection" zoom="0" lat="47" lon="-92" controls>
   </map>
 
   <textarea name="message" id="coord" rows="10" cols="100"></textarea>

diff --git a/test/e2e/layers/layerOpacityAttribute.test.js b/test/e2e/layers/layerOpacityAttribute.test.js
@@ -9,6 +9,8 @@ test.describe('Adding Opacity Attribute to the Layer- Element', () => {
       context.pages().find((page) => page.url() === 'about:blank') ||
       (await context.newPage());
     await page.goto('layerOpacityAttribute.html');
+    const l = await page.locator('layer-');
+    await l.evaluate(l=>l.whenReady());
   });
   test.afterAll(async function () {
     await context.close();