fix(e2e): reduce flakiness

Author: wmertens

package.json

@@ -230,23 +230,23 @@
     "start": "pnpm run --stream \"/.*\\.watch/\"",
     "test": "pnpm build.full && pnpm test.unit && pnpm test.e2e",
     "test.e2e": "pnpm test.e2e.chromium && pnpm test.e2e.webkit && test.e2e.integrations",
-    "test.e2e.chromium": "DEBUG=${DEBUG:-pw:webserver} playwright test starters --browser=chromium --config starters/playwright.config.ts",
-    "test.e2e.chromium.debug": "PWDEBUG=1 DEBUG=${DEBUG:-pw:webserver} playwright test starters --browser=chromium --config starters/playwright.config.ts",
+    "test.e2e.chromium": "playwright test starters --browser=chromium --config starters/playwright.config.ts",
+    "test.e2e.chromium.debug": "PWDEBUG=1 playwright test starters --browser=chromium --config starters/playwright.config.ts",
     "test.e2e.cli": "pnpm --filter qwik-cli-e2e e2e",
-    "test.e2e.firefox": "DEBUG=${DEBUG:-pw:webserver} playwright test starters --browser=firefox --config starters/playwright.config.ts",
-    "test.e2e.integrations.chromium": "DEBUG=${DEBUG:-pw:webserver} playwright test e2e/adapters-e2e/tests --project=chromium --config e2e/adapters-e2e/playwright.config.ts",
-    "test.e2e.integrations.webkit": "DEBUG=${DEBUG:-pw:webserver} playwright test e2e/adapters-e2e/tests --project=webkit --config e2e/adapters-e2e/playwright.config.ts",
-    "test.e2e.router": "DEBUG=${DEBUG:-pw:webserver} playwright test starters/e2e/qwikrouter --browser=chromium --config starters/playwright.config.ts",
+    "test.e2e.firefox": "playwright test starters --browser=firefox --config starters/playwright.config.ts",
+    "test.e2e.integrations.chromium": "playwright test e2e/adapters-e2e/tests --project=chromium --config e2e/adapters-e2e/playwright.config.ts",
+    "test.e2e.integrations.webkit": "playwright test e2e/adapters-e2e/tests --project=webkit --config e2e/adapters-e2e/playwright.config.ts",
+    "test.e2e.router": "playwright test starters/e2e/qwikrouter --browser=chromium --config starters/playwright.config.ts",
     "test.e2e.run": "tsm scripts/e2e-cli.ts",
-    "test.e2e.webkit": "DEBUG=${DEBUG:-pw:webserver} playwright test starters --browser=webkit --config starters/playwright.config.ts",
-    "test.e2e.qwik-react.chromium": "DEBUG=${DEBUG:-pw:webserver} playwright test e2e/qwik-react-e2e/tests --project=chromium --config e2e/qwik-react-e2e/playwright.config.ts",
-    "test.e2e.qwik-react.webkit": "DEBUG=${DEBUG:-pw:webserver} playwright test e2e/qwik-react-e2e/tests --project=webkit --config e2e/qwik-react-e2e/playwright.config.ts",
+    "test.e2e.webkit": "playwright test starters --browser=webkit --config starters/playwright.config.ts",
+    "test.e2e.qwik-react.chromium": "playwright test e2e/qwik-react-e2e/tests --project=chromium --config e2e/qwik-react-e2e/playwright.config.ts",
+    "test.e2e.qwik-react.webkit": "playwright test e2e/qwik-react-e2e/tests --project=webkit --config e2e/qwik-react-e2e/playwright.config.ts",
     "test.rust": "make test",
     "test.rust.bench": "make benchmark",
     "test.rust.update": "make test-update",
     "test.unit": "vitest packages",
     "test.unit.debug": "vitest --inspect-brk packages",
-    "test.vite": "DEBUG=${DEBUG:-pw:webserver} playwright test starters/e2e/qwikrouter --browser=chromium --config starters/playwright.config.ts",
+    "test.vite": "playwright test starters/e2e/qwikrouter --browser=chromium --config starters/playwright.config.ts",
     "tsc.check": "tsc --noEmit",
     "tsc.trace": "tsc -p tsconfig.json --traceResolution > tsc.log",
     "tsc.watch": "tsc --noEmit --watch --preserveWatchOutput",

starters/e2e/e2e.context.e2e.ts

@@ -55,9 +55,14 @@ test.describe("context", () => {
         "bar = 0",
         "bar = 0",
       ]);
+      // Add 2 level3 components to the first level2
       await btnLevel2Increment.click();
       await btnLevel2Increment.click();
+      // Add 1 level3 component to the second level2
       await btnLevel2Increment2.click();
+      // Wait for all level3 to be visible
+      const level3s = page.locator(".level3-state2");
+      await expect(level3s).toHaveCount(3);
 
       const level3State1 = page.locator(".level3-state1");
       const level3State2 = page.locator(".level3-state2");

starters/e2e/e2e.signals.e2e.ts

@@ -319,11 +319,11 @@ test.describe("signals", () => {
       const result = page.locator("#issue-3415-result");
       const button = page.locator("#issue-3415-button");
       await expect(result).toHaveText("foo");
-      await expect(await result.innerHTML()).toEqual("<b>foo</b>");
+      expect(await result.innerHTML()).toEqual("<b>foo</b>");
 
       await button.click();
       await expect(result).toHaveText("bar");
-      await expect(await result.innerHTML()).toEqual("<i>bar</i>");
+      expect(await result.innerHTML()).toEqual("<i>bar</i>");
     });
 
     test("bind value", async ({ page }) => {
@@ -348,8 +348,8 @@ test.describe("signals", () => {
 
       await input.clear();
       await textarea.fill("from2");
-      await expect(input).toHaveValue("from2");
       await expect(textarea).toHaveValue("from2");
+      await expect(input).toHaveValue("from2");
       await expect(text1).toHaveText("Value: from2");
       await expect(text2).toHaveText("Value: from2");
 

starters/e2e/e2e.streaming.e2e.ts

@@ -52,7 +52,7 @@ test.describe("streaming", () => {
     await expect(count).toHaveText("Rerender: 1");
 
     await rerender.click();
-    expect(rerender).toHaveText("Client rerender: 1");
+    await expect(rerender).toHaveText("Client rerender: 1");
     await expect(count).toHaveText("Rerender: 0");
     await count.click();
 

starters/e2e/qwikrouter/actions.e2e.ts

@@ -148,11 +148,13 @@ test.describe("actions", () => {
         await page.locator("#issue2644-submit").click();
 
         await expect(page.locator("#issue2644-list > li")).toHaveText(["AAA"]);
-        expect(page).toHaveURL("/qwikrouter-test/issue2644/other/");
+        await expect(page).toHaveURL("/qwikrouter-test/issue2644/other/");
 
         await page.locator("#issue2644-input").fill("BBB");
         await page.locator("#issue2644-submit").click();
-        expect(page).toHaveURL(new RegExp("/qwikrouter-test/issue2644/other/"));
+        await expect(page).toHaveURL(
+          new RegExp("/qwikrouter-test/issue2644/other/"),
+        );
 
         await expect(page.locator("#issue2644-list > li")).toHaveText([
           "AAA",

starters/e2e/qwikrouter/error.spec.ts

@@ -4,7 +4,7 @@ test.describe("Qwik Router Error boundary", () => {
   test("should catch error", async ({ page }) => {
     await page.goto("/qwikrouter-test/error");
 
-    page.getByRole("button", { name: "Throw error" }).click();
+    await page.getByRole("button", { name: "Throw error" }).click();
 
     await page.waitForSelector('div:has-text("Caught error: Boom!")');
   });

starters/e2e/qwikrouter/location.e2e.ts

@@ -2,7 +2,7 @@ import { expect, test } from "@playwright/test";
 
 test.describe("Qwik Router API: useLocation", () => {
   test("should take x-forwarded headers into account", async ({ page }) => {
-    page.setExtraHTTPHeaders({
+    await page.setExtraHTTPHeaders({
       "X-Forwarded-Host": "override-server",
       "X-Forwarded-Proto": "http",
     });
@@ -17,7 +17,7 @@ test.describe("Qwik Router API: useLocation", () => {
   test("should take x-forwarded headers into account with port", async ({
     page,
   }) => {
-    page.setExtraHTTPHeaders({
+    await page.setExtraHTTPHeaders({
       "X-Forwarded-Host": "override-server:9999",
       "X-Forwarded-Proto": "https",
     });

starters/e2e/qwikrouter/nav.e2e.ts

@@ -32,7 +32,7 @@ test.describe("nav", () => {
       await increment.click();
       await expect(increment).toHaveText("Click me 1");
       await link.click();
-      await expect(new URL(page.url()).hash).toBe("#navigate");
+      expect(new URL(page.url()).hash).toBe("#navigate");
       await expect(increment).toHaveText("Click me 1");
     });
 
@@ -44,25 +44,31 @@ test.describe("nav", () => {
         const link = page.locator("#to-page-short");
         await link.click();
 
+        await expect(page).toHaveURL(
+          "/qwikrouter-test/scroll-restoration/page-short/",
+        );
         await expect(page.locator("h1")).toHaveText("Page Short");
 
         await page.reload();
         await expect(page.locator("h1")).toHaveText("Page Short");
 
         await page.goBack();
 
+        await expect(page).toHaveURL(
+          "/qwikrouter-test/scroll-restoration/page-long/",
+        );
         await expect(page.locator("h1")).toHaveText("Page Long");
       });
       test("should scroll on hash change", async ({ page }) => {
         await page.goto("/qwikrouter-test/scroll-restoration/hash/");
-        expect(page).toHaveURL("/qwikrouter-test/scroll-restoration/hash/");
+        await expect(page).toHaveURL(
+          "/qwikrouter-test/scroll-restoration/hash/",
+        );
 
         const link = page.locator("#hash-1");
         await link.click();
-        // Without this, sometimes the URL is #hash-1
-        await page.waitForTimeout(100);
 
-        expect(page).toHaveURL(
+        await expect(page).toHaveURL(
           "/qwikrouter-test/scroll-restoration/hash/#hash-2",
         );
         let scrollY1;
@@ -77,7 +83,7 @@ test.describe("nav", () => {
         await scrollTo(page, 0, 1000);
         await link2.click();
 
-        expect(page).toHaveURL(
+        await expect(page).toHaveURL(
           "/qwikrouter-test/scroll-restoration/hash/#hash-1",
         );
         await page.waitForTimeout(50);
@@ -89,7 +95,9 @@ test.describe("nav", () => {
         await scrollTo(page, 0, 2000);
         await link3.click();
 
-        expect(page).toHaveURL("/qwikrouter-test/scroll-restoration/hash/");
+        await expect(page).toHaveURL(
+          "/qwikrouter-test/scroll-restoration/hash/",
+        );
         await page.waitForTimeout(50);
         expect(await getWindowScrollXY(page)).toStrictEqual([0, 0]);
       });
@@ -270,7 +278,7 @@ test.describe("nav", () => {
         await expect(page.locator("#issue2829-context")).toHaveText(
           "context: __CONTEXT_VALUE__",
         );
-        await expect(new URL(page.url()).pathname).toBe(
+        expect(new URL(page.url()).pathname).toBe(
           "/qwikrouter-test/issue2829/b/",
         );
       });
@@ -422,7 +430,7 @@ test.describe("nav", () => {
 
     test("issue4956", async ({ page }) => {
       await page.goto("/qwikrouter-test/issue4956?id=1");
-      const textContent = await page.locator("#routeId");
+      const textContent = page.locator("#routeId");
 
       await expect(textContent).toHaveText("1");
     });
@@ -442,13 +450,13 @@ test.describe("nav", () => {
 
     test("issue7182", async ({ page, javaScriptEnabled }) => {
       await page.goto("/qwikrouter-test/issue7182");
-      const input1 = await page.locator("#input1");
+      const input1 = page.locator("#input1");
       await input1.fill("4");
       await input1.dispatchEvent("change");
-      const input2 = await page.locator("#input2");
+      const input2 = page.locator("#input2");
       await input2.fill("4");
       await input2.dispatchEvent("change");
-      const result = await page.locator("#result");
+      const result = page.locator("#result");
       if (javaScriptEnabled) {
         await expect(result).toHaveText("8");
       } else {
@@ -579,8 +587,3 @@ test.describe("nav", () => {
     });
   }
 });
-
-function toPath(href: string) {
-  const url = new URL(href);
-  return url.pathname + url.search + url.hash;
-}

starters/e2e/todo-old.e2e.ts

@@ -74,7 +74,7 @@ test.describe("Todo", () => {
     await assertItemCount(page, 2);
     await page.waitForTimeout(100);
 
-    page.locator(".todo-list>li:last-child input").click();
+    await page.locator(".todo-list>li:last-child input").click();
     await assertItemCount(page, 1, 2);
   });
 

starters/e2e/todo.e2e.ts

@@ -73,7 +73,7 @@ test.describe("Todo", () => {
     await assertItemCount(page, 2);
     await page.waitForTimeout(100);
 
-    page.locator(".todo-list>li:last-child input").click();
+    await page.locator(".todo-list>li:last-child input").click();
     await assertItemCount(page, 1, 2);
   });