Add timeouts to mitigate flakiness

Author: Peter Rushforth

test/e2e/elements/layer-/layer-dash-src.test.js

@@ -37,7 +37,8 @@ test.describe('layer- local/inline vs remote content/src tests', () => {
 
     await layer.evaluate((layer) => layer.removeAttribute('src'));
     await page.waitForTimeout(500);
-    expect(layer).toHaveAttribute('disabled');
+    // Wait for the disabled attribute to be set asynchronously
+    await expect(layer).toHaveAttribute('disabled', '', { timeout: 2000 });
 
     // append the template map-extent to the local / inline content
     await page.evaluate(() => {

test/e2e/elements/map-layer/layer-src.test.js

@@ -35,7 +35,8 @@ test.describe('map-layer local/inline vs remote content/src tests', () => {
     // remove the src attribute
 
     await layer.evaluate((layer) => layer.removeAttribute('src'));
-    expect(layer).toHaveAttribute('disabled');
+    // Wait for the disabled attribute to be set asynchronously
+    await expect(layer).toHaveAttribute('disabled', '', { timeout: 2000 });
 
     // append the template map-extent to the local / inline content
     await page.evaluate(() => {

test/e2e/elements/map-layer/map-layer-media.test.js

@@ -85,7 +85,7 @@ enabled and added to the layer control when mq removed`, async () => {
   test(`An invalid media query is the same as a non-matching media query`, async () => {
     const noInitialQueryLayer = page.getByTestId('no-initial-mq');
     await noInitialQueryLayer.evaluate((l) => l.setAttribute('media', '(foo '));
-    await page.waitForTimeout(500);
-    await expect(noInitialQueryLayer).toHaveAttribute('disabled', '');
+    // Wait for the invalid media query to trigger the disabled attribute
+    await expect(noInitialQueryLayer).toHaveAttribute('disabled', '', { timeout: 2000 });
   });
 });

test/e2e/elements/map/map-in-shadow-root.test.js

@@ -29,7 +29,8 @@ test.describe('Playwright map[is=web-map] fullscreen tests', () => {
     // the first mapml-viewer should be returned by document.fullscreen
     expect(fullscreenElement).toEqual('map1');
     await fullscreenButton.click();
-    await page.waitForTimeout(500);
+    // Wait for fullscreen to exit properly
+    await page.waitForFunction(() => !document.fullscreenElement, { timeout: 2000 });
     fullscreenElement = await page.evaluate(`document.fullscreenElement`);
     expect(fullscreenElement).toBeFalsy();
 

test/e2e/layers/featureLayer.test.js

@@ -45,6 +45,16 @@ test.describe('Playwright featureLayer (Static Features) Layer Tests', () => {
 
     test('Loading in retrieved features', async () => {
       await page.waitForTimeout(350);
+      // Wait for the layer to be ready and SVG to be created
+      await page.waitForFunction(() => {
+        const layer = document.querySelector('map-layer#US');
+        return layer && 
+               layer._layer && 
+               layer._layer._container && 
+               layer._layer._container.querySelector('svg') &&
+               layer._layer._container.querySelector('svg').firstChild;
+      }, { timeout: 5000 });
+      
       const features = await page.$eval(
         'map-layer#US',
         (layer) =>