Remove most waitForTimeout usage from the scripting integration tests

This commit replaces most `waitForTimeout` occurrences with the
appropriate `waitForFunction` calls. Note that the occurrences in the
"must check that focus/blur callbacks aren't called" integration test
remain until we find a good way, in a follow-up, to ensure that nothing
happened after the tab switches (because currently we can't be entirely
sure that nothing happens because there is nothing to await).

test/integration/scripting_spec.mjs

@@ -1713,11 +1713,9 @@ describe("Interaction", () => {
             await clearInput(page, getSelector("27R"));
             await page.type(getSelector("27R"), exportValue);
             await page.click("[data-annotation-id='28R']");
-            // eslint-disable-next-line no-restricted-syntax
-            await waitForTimeout(10);
-
-            value = await page.$eval(getSelector("24R"), el => el.value);
-            expect(value).withContext(`In ${browserName}`).toEqual(exportValue);
+            await page.waitForFunction(
+              `${getQuerySelector("24R")}.value === "${exportValue}"`
+            );
           }
         })
       );
@@ -1761,9 +1759,10 @@ describe("Interaction", () => {
           await page.waitForFunction(
             `${getQuerySelector("30R")}.value !== "abc"`
           );
-          // eslint-disable-next-line no-restricted-syntax
-          await waitForTimeout(100);
 
+          await page.waitForFunction(
+            `window.document.activeElement.getAttribute("data-element-id") !== "30R"`
+          );
           const focusedId = await page.evaluate(_ =>
             window.document.activeElement.getAttribute("data-element-id")
           );
@@ -1858,8 +1857,6 @@ describe("Interaction", () => {
           expect(text).withContext(`In ${browserName}`).toEqual("00000000123");
 
           await page.click(getSelector("26R"));
-          // eslint-disable-next-line no-restricted-syntax
-          await waitForTimeout(10);
 
           text = await page.$eval(getSelector("25R"), el => el.value);
           expect(text).withContext(`In ${browserName}`).toEqual("00000000123");
@@ -1893,15 +1890,14 @@ describe("Interaction", () => {
           expect(text).withContext(`In ${browserName}`).toEqual("5,25");
 
           await page.click(getSelector("22R"));
-          // eslint-disable-next-line no-restricted-syntax
-          await waitForTimeout(10);
 
           text = await page.$eval(getSelector("22R"), el => el.value);
           expect(text).withContext(`In ${browserName}`).toEqual("5,25");
 
           await page.click(getSelector("31R"));
-          // eslint-disable-next-line no-restricted-syntax
-          await waitForTimeout(10);
+          await page.waitForFunction(
+            `${getQuerySelector("31R")}.value !== "5,25"`
+          );
 
           text = await page.$eval(getSelector("31R"), el => el.value);
           expect(text).withContext(`In ${browserName}`).toEqual("5.25");
@@ -1993,18 +1989,9 @@ describe("Interaction", () => {
 
           await page.click(getSelector("26R"));
           await page.type(getSelector("26R"), "abcde", { delay: 10 });
-
           await page.click(getSelector("23R"));
-          // eslint-disable-next-line no-restricted-syntax
-          await waitForTimeout(10);
-          await page.click(getSelector("26R"));
-
-          await kbSelectAll(page);
-          await page.keyboard.press("Backspace");
-
+          await clearInput(page, getSelector("26R"));
           await page.click(getSelector("23R"));
-          // eslint-disable-next-line no-restricted-syntax
-          await waitForTimeout(10);
 
           text = await page.$eval(getSelector("26R"), el => el.value);
           expect(text).withContext(`In ${browserName}`).toEqual("");
@@ -2151,33 +2138,35 @@ describe("Interaction", () => {
           );
           expect(readonly).withContext(`In ${browserName}`).toEqual(true);
           await page.click(getSelector("334R"));
-          // eslint-disable-next-line no-restricted-syntax
-          await waitForTimeout(10);
 
           readonly = await page.$eval(getSelector("353R"), el => el.disabled);
           expect(readonly).withContext(`In ${browserName}`).toEqual(true);
           await page.click(getSelector("351R"));
-          // eslint-disable-next-line no-restricted-syntax
-          await waitForTimeout(10);
 
           readonly = await page.$eval(getSelector("353R"), el => el.disabled);
           expect(readonly).withContext(`In ${browserName}`).toEqual(true);
           await page.click(getSelector("352R"));
-          // eslint-disable-next-line no-restricted-syntax
-          await waitForTimeout(10);
+          await page.waitForFunction(
+            `${getQuerySelector("353R")}.disabled !== true`
+          );
 
           readonly = await page.$eval(getSelector("353R"), el => el.disabled);
           expect(readonly).withContext(`In ${browserName}`).toEqual(false);
 
           await page.click(getSelector("353R"));
-          // eslint-disable-next-line no-restricted-syntax
-          await waitForTimeout(10);
+          await page.waitForFunction(
+            `${getQuerySelector("353R")}.checked !== false`
+          );
 
           let checked = await page.$eval(getSelector("353R"), el => el.checked);
           expect(checked).withContext(`In ${browserName}`).toEqual(true);
           await page.click(getSelector("334R"));
-          // eslint-disable-next-line no-restricted-syntax
-          await waitForTimeout(10);
+          await page.waitForFunction(
+            `${getQuerySelector("353R")}.disabled !== false`
+          );
+          await page.waitForFunction(
+            `${getQuerySelector("353R")}.checked !== true`
+          );
 
           readonly = await page.$eval(getSelector("353R"), el => el.disabled);
           expect(readonly).withContext(`In ${browserName}`).toEqual(true);
@@ -2216,13 +2205,9 @@ describe("Interaction", () => {
           await page.click(getSelector("55R"));
           await page.type(getSelector("55R"), "Hello", { delay: 10 });
           await page.click(getSelector("56R"));
-          // eslint-disable-next-line no-restricted-syntax
-          await waitForTimeout(10);
 
           await page.click(getSelector("55R"));
           await page.type(getSelector("55R"), " World", { delay: 10 });
-          // eslint-disable-next-line no-restricted-syntax
-          await waitForTimeout(10);
 
           await otherPages[i].bringToFront();
           // eslint-disable-next-line no-restricted-syntax
@@ -2264,16 +2249,9 @@ describe("Interaction", () => {
           );
 
           await page.click(getSelector("25R"));
-          // eslint-disable-next-line no-restricted-syntax
-          await waitForTimeout(10);
           await page.click(getSelector("26R"));
 
-          await page.waitForFunction(
-            sel => document.querySelector(sel).value !== "",
-            {},
-            getSelector("26R")
-          );
-
+          await page.waitForFunction(`${getQuerySelector("26R")}.value !== ""`);
           const text = await page.$eval(getSelector("26R"), el => el.value);
           expect(text).withContext(`In ${browserName}`).toEqual("hello");
         })