- Fix chronically flaky scale tests using locators.

Author: prushforth

test/e2e/mapml-viewer/mapml-viewerScale.test.js

@@ -16,46 +16,46 @@ test.describe('Announce movement test', () => {
   });
 
   test('Output values are correct during zoom in', async () => {
+    // focus the map
     await page.keyboard.press('Tab');
+    // focus the zoom in control
     await page.keyboard.press('Tab');
+    // activate zoom in -> zoom = 1
     await page.keyboard.press('Enter');
+    await page.waitForTimeout(1000);
+    // activate zoom in -> zoom = 2
     await page.keyboard.press('Enter');
     await page.waitForTimeout(1000);
 
-    const movedUp = await page.$eval(
-      'body > mapml-viewer div > output:nth-child(7)',
-      (output) => output.innerHTML
-    );
-    expect(movedUp).toEqual('2.6 centimeters to 2000 kilometers');
+    // screen reader output is slow...
+    const output = page.locator('.mapml-screen-reader-output-scale');
+    const movedUp = await output.evaluate((output) => output.innerHTML);
+    expect(movedUp).toEqual('2.1 centimeters to 1000 kilometers');
 
+    // go to zoom = 3
     await page.keyboard.press('Enter');
     await page.waitForTimeout(1000);
 
-    const movedUpAgain = await page.$eval(
-      'body > mapml-viewer div > output:nth-child(7)',
-      (output) => output.innerHTML
-    );
-    expect(movedUpAgain).toEqual('2.1 centimeters to 1000 kilometers');
+    const movedUpAgain = await output.evaluate((output) => output.innerHTML);
+    // zoom = 3
+    expect(movedUpAgain).toEqual('1.7 centimeters to 500 kilometers');
   });
 
   test('Output values are correct during zoom out', async () => {
     await page.keyboard.press('Tab');
     await page.keyboard.press('Enter');
     await page.waitForTimeout(1000);
 
-    const movedUp = await page.$eval(
-      'body > mapml-viewer div > output:nth-child(7)',
-      (output) => output.innerHTML
-    );
-    expect(movedUp).toEqual('2.6 centimeters to 2000 kilometers');
+    // screen reader output is slow...
+    const output = page.locator('.mapml-screen-reader-output-scale');
+    const movedUp = await output.evaluate((output) => output.innerHTML);
+    expect(movedUp).toEqual('2.1 centimeters to 1000 kilometers');
 
     await page.keyboard.press('Enter');
     await page.waitForTimeout(1000);
 
-    const movedUpAgain = await page.$eval(
-      'body > mapml-viewer div > output:nth-child(7)',
-      (output) => output.innerHTML
-    );
-    expect(movedUpAgain).toEqual('1.8 centimeters to 2000 kilometers');
+    const movedUpAgain = await output.evaluate((output) => output.innerHTML);
+    // zoom is now = 0
+    expect(movedUpAgain).toEqual('2.6 centimeters to 2000 kilometers');
   });
 });

test/e2e/web-map/mapScale.test.js

@@ -16,46 +16,51 @@ test.describe('Announce movement test', () => {
   });
 
   test('Output values are correct during zoom in', async () => {
+    // focus the map
     await page.keyboard.press('Tab');
+    // focus the zoom in control
     await page.keyboard.press('Tab');
+    // activate zoom in -> zoom = 3
     await page.keyboard.press('Enter');
+    await page.waitForTimeout(1000);
+    // activate zoom in -> zoom = 4
     await page.keyboard.press('Enter');
     await page.waitForTimeout(1000);
 
-    const movedUp = await page.$eval(
-      'body > map div > output:nth-child(7)',
-      (output) => output.innerHTML
-    );
-    expect(movedUp).toEqual('1.7 centimeters to 500 kilometers');
+    // screen reader output is slow...
+    const output = page.locator('.mapml-screen-reader-output-scale');
+    const movedUp = await output.evaluate((output) => output.innerHTML);
+    // zoom = 4 here (different start conditions that mapml-viewer.html)
+    expect(movedUp).toEqual('1.7 centimeters to 300 kilometers');
 
+    // nothing happens here because the zoom in is disabled...
     await page.keyboard.press('Enter');
     await page.waitForTimeout(1000);
 
-    const movedUpAgain = await page.$eval(
-      'body > map div > output:nth-child(7)',
-      (output) => output.innerHTML
-    );
+    const movedUpAgain = await output.evaluate((output) => output.innerHTML);
+    // zoom = 4 still
     expect(movedUpAgain).toEqual('1.7 centimeters to 300 kilometers');
   });
 
   test('Output values are correct during zoom out', async () => {
+    await page.pause();
+    // focus the zoom out control
     await page.keyboard.press('Tab');
+    // go back to zoom = 3
     await page.keyboard.press('Enter');
     await page.waitForTimeout(1000);
 
-    const movedUp = await page.$eval(
-      'body > map div > output:nth-child(7)',
-      (output) => output.innerHTML
-    );
+    // screen reader output is slow...
+    const output = page.locator('.mapml-screen-reader-output-scale');
+    const movedUp = await output.evaluate((output) => output.innerHTML);
     expect(movedUp).toEqual('1.7 centimeters to 500 kilometers');
 
+    // go to zoom = 2
     await page.keyboard.press('Enter');
     await page.waitForTimeout(1000);
 
-    const movedUpAgain = await page.$eval(
-      'body > map div > output:nth-child(7)',
-      (output) => output.innerHTML
-    );
+    const movedUpAgain = await output.evaluate((output) => output.innerHTML);
+    // zoom is now = 2
     expect(movedUpAgain).toEqual('2 centimeters to 1000 kilometers');
   });
 });