Remove waitForTimeout usage from the scripting integration tests

This commit replaces all `waitForTimeout` occurrences with the
appropriate `waitForFunction` calls. Note that in some places we could
simply remove the `waitForTimeout` call altogether because the action
that is being performed is either an instant Puppeteer action (such as
switching tabs) or shouldn't lead to any noticeable change that can be
awaited (such as a text field that is expected to be unchanged upon a
focus change).

Author: timvandermeij

test/integration/scripting_spec.mjs

@@ -28,7 +28,6 @@ import {
   scrollIntoView,
   waitForEntryInStorage,
   waitForSandboxTrip,
-  waitForTimeout,
 } from "./test_utils.mjs";
 
 describe("Interaction", () => {
@@ -1713,8 +1712,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);
+            await page.waitForFunction(
+              `${getQuerySelector("24R")}.value === "${exportValue}"`
+            );
 
             value = await page.$eval(getSelector("24R"), el => el.value);
             expect(value).withContext(`In ${browserName}`).toEqual(exportValue);
@@ -1761,9 +1761,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 +1859,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 +1892,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 +1991,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 +2140,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,20 +2207,12 @@ 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
-          await waitForTimeout(100);
           await page.bringToFront();
-          // eslint-disable-next-line no-restricted-syntax
-          await waitForTimeout(100);
 
           const text = await page.$eval(getSelector("55R"), el => el.value);
           expect(text).withContext(`In ${browserName}`).toEqual("Hello World");
@@ -2264,16 +2247,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");
         })