From cf0cef0d89ad4461e9f6b9074d2a29b85050dc97 Mon Sep 17 00:00:00 2001
From: Wout Mertens <Wout.Mertens@gmail.com>
Date: Fri, 6 Oct 2023 22:55:22 +0200
Subject: [PATCH] refactor(e2e): Make tests more robust (#5279)

Use async matchers instead of waiting.
---
 .../src/components/attributes/attributes.tsx  | 13 ++++--
 .../apps/e2e/src/components/render/render.tsx | 11 +++--
 .../apps/e2e/src/components/slot/slot.tsx     |  1 +
 .../src/components/streaming/streaming.tsx    |  4 +-
 .../apps/e2e/src/components/styles/styles.tsx |  7 +--
 starters/apps/e2e/tsconfig.json               |  1 +
 starters/apps/qwikcity-test/tsconfig.json     |  1 +
 starters/e2e/e2e.attributes.spec.ts           | 25 +++++-----
 starters/e2e/e2e.context.spec.ts              |  6 +--
 starters/e2e/e2e.effect-client.spec.ts        |  7 ---
 starters/e2e/e2e.events.spec.ts               | 46 +++++++------------
 starters/e2e/e2e.lexical-scope.spec.ts        |  6 +--
 starters/e2e/e2e.render.spec.ts               |  8 ++--
 starters/e2e/e2e.resource.spec.ts             |  8 +---
 starters/e2e/e2e.signals.spec.ts              |  7 ---
 starters/e2e/e2e.slot.spec.ts                 | 21 ++-------
 starters/e2e/e2e.streaming.spec.ts            | 12 ++---
 starters/e2e/e2e.style.spec.ts                | 22 ++++-----
 starters/e2e/e2e.watch.spec.ts                |  9 ++--
 starters/e2e/qwikcity/actions.spec.ts         | 12 ++---
 starters/e2e/qwikcity/loaders.spec.ts         |  5 --
 starters/e2e/qwikcity/nav.spec.ts             | 36 ++++++---------
 starters/e2e/qwikcity/server.spec.ts          |  5 --
 starters/e2e/starter-partytown.spec.ts        |  3 --
 starters/e2e/todo.spec.ts                     |  1 -
 25 files changed, 108 insertions(+), 169 deletions(-)
 create mode 100644 starters/apps/e2e/tsconfig.json
 create mode 100644 starters/apps/qwikcity-test/tsconfig.json

diff --git a/starters/apps/e2e/src/components/attributes/attributes.tsx b/starters/apps/e2e/src/components/attributes/attributes.tsx
index 6e43627d047..547d8479b4e 100644
--- a/starters/apps/e2e/src/components/attributes/attributes.tsx
+++ b/starters/apps/e2e/src/components/attributes/attributes.tsx
@@ -5,15 +5,19 @@ export const Attributes = component$(() => {
   return (
     <>
       <h1>Most of the changes happen in the input attributes</h1>
-      <button id="force-rerender" onClick$={() => render.value++}>
+      <button
+        id="force-rerender"
+        data-v={render.value}
+        onClick$={() => render.value++}
+      >
         Rerender
       </button>
-      <AttributesChild key={render.value} />
+      <AttributesChild v={render.value} key={render.value} />
     </>
   );
 });
 
-export const AttributesChild = component$(() => {
+export const AttributesChild = component$<{ v: number }>(({ v }) => {
   const renders = useStore(
     {
       count: 0,
@@ -157,6 +161,7 @@ export const AttributesChild = component$(() => {
       <Issue3622 />
       <Issue4718Null />
       <Issue4718Undefined />
+      <div id="renderCount">Render {v}</div>
     </>
   );
 });
@@ -181,6 +186,7 @@ export const Issue4718Undefined = component$(() => {
       data-works={signal.value}
       aria-label={signal.value}
       title={signal.value}
+      class={!signal.value && "moop"}
       onClick$={() => {
         signal.value = undefined;
       }}
@@ -199,6 +205,7 @@ export const Issue4718Null = component$(() => {
       data-works={signal.value as any}
       aria-label={signal.value as any}
       title={signal.value as any}
+      class={!signal.value && "moop"}
       onClick$={() => {
         signal.value = null;
       }}
diff --git a/starters/apps/e2e/src/components/render/render.tsx b/starters/apps/e2e/src/components/render/render.tsx
index 7880f51c83a..2e162873033 100644
--- a/starters/apps/e2e/src/components/render/render.tsx
+++ b/starters/apps/e2e/src/components/render/render.tsx
@@ -22,14 +22,18 @@ export const Render = component$(() => {
   const rerender = useSignal(0);
   return (
     <>
-      <button id="rerender" onClick$={() => rerender.value++}>
+      <button
+        id="rerender"
+        data-v={rerender.value}
+        onClick$={() => rerender.value++}
+      >
         Rerender
       </button>
-      <RenderChildren key={rerender.value} />
+      <RenderChildren v={rerender.value} key={rerender.value} />
     </>
   );
 });
-export const RenderChildren = component$(() => {
+export const RenderChildren = component$<{ v: number }>(({ v }) => {
   const parent = {
     counter: {
       count: 0,
@@ -42,6 +46,7 @@ export const RenderChildren = component$(() => {
   const state = useStore(parent, { deep: true });
   return (
     <>
+      <div id="rerenderCount">Render {v}</div>
       <button
         id="increment"
         onClick$={() => {
diff --git a/starters/apps/e2e/src/components/slot/slot.tsx b/starters/apps/e2e/src/components/slot/slot.tsx
index 8c0955a84ff..1701133f7a7 100644
--- a/starters/apps/e2e/src/components/slot/slot.tsx
+++ b/starters/apps/e2e/src/components/slot/slot.tsx
@@ -25,6 +25,7 @@ export const SlotParent = component$(() => {
     <section class="todoapp">
       {state.render && (
         <>
+          <div id="isRendered">Hi</div>
           <Issue1630>
             <Child id="slot-child" q:slot="slot-content">
               Component Slot Content
diff --git a/starters/apps/e2e/src/components/streaming/streaming.tsx b/starters/apps/e2e/src/components/streaming/streaming.tsx
index 8dea00f4db9..e82a5a79345 100644
--- a/starters/apps/e2e/src/components/streaming/streaming.tsx
+++ b/starters/apps/e2e/src/components/streaming/streaming.tsx
@@ -21,7 +21,7 @@ export const StreamingRoot = component$(() => {
   return (
     <>
       <button id="client-render" onClick$={() => store.count++}>
-        Client rerender
+        Client rerender: {store.count}
       </button>
       <Streaming key={store.count} />
     </>
@@ -35,7 +35,7 @@ export const Streaming = component$(() => {
   return (
     <div>
       <button id="count" onClick$={() => store.count++}>
-        Rerender {store.count}
+        Rerender: {store.count}
       </button>
 
       <ul>
diff --git a/starters/apps/e2e/src/components/styles/styles.tsx b/starters/apps/e2e/src/components/styles/styles.tsx
index 0530b4f1558..5c64ece4608 100644
--- a/starters/apps/e2e/src/components/styles/styles.tsx
+++ b/starters/apps/e2e/src/components/styles/styles.tsx
@@ -16,15 +16,15 @@ export const Styles = component$(() => {
   const reload = useSignal(0);
   return (
     <>
-      <button id="reload" onClick$={() => reload.value++}>
+      <button id="reload" data-v={reload.value} onClick$={() => reload.value++}>
         Reload
       </button>
-      <StylesChildren key={reload.value} />
+      <StylesChildren v={reload.value} key={reload.value} />
     </>
   );
 });
 
-export const StylesChildren = component$(() => {
+export const StylesChildren = component$<{ v: number }>(({ v }) => {
   useStylesScoped$(parent);
   useStylesScoped$(parent2);
 
@@ -33,6 +33,7 @@ export const StylesChildren = component$(() => {
   });
   return (
     <div class="parent-container">
+      <div id="renderCount">Render {v}</div>
       <div class={["parent", `count-${store.count}`]}>
         Parent
         <button id="add-child" type="button" onClick$={() => store.count++}>
diff --git a/starters/apps/e2e/tsconfig.json b/starters/apps/e2e/tsconfig.json
new file mode 100644
index 00000000000..0967ef424bc
--- /dev/null
+++ b/starters/apps/e2e/tsconfig.json
@@ -0,0 +1 @@
+{}
diff --git a/starters/apps/qwikcity-test/tsconfig.json b/starters/apps/qwikcity-test/tsconfig.json
new file mode 100644
index 00000000000..0967ef424bc
--- /dev/null
+++ b/starters/apps/qwikcity-test/tsconfig.json
@@ -0,0 +1 @@
+{}
diff --git a/starters/e2e/e2e.attributes.spec.ts b/starters/e2e/e2e.attributes.spec.ts
index 57462f98880..51e7c64d19f 100644
--- a/starters/e2e/e2e.attributes.spec.ts
+++ b/starters/e2e/e2e.attributes.spec.ts
@@ -52,7 +52,9 @@ test.describe("attributes", () => {
       const stuffBtn = page.locator("#stuff");
       const renders = page.locator("#renders");
 
+      await expect(inputCopy).toHaveJSProperty("value", "");
       await input.type("Hello");
+      await expect(input).toHaveJSProperty("value", "Hello");
       await expect(inputCopy).toHaveJSProperty("value", "Hello");
       await expect(inputValue).toHaveText("Hello");
       await expect(renders).toHaveText("1");
@@ -106,7 +108,7 @@ test.describe("attributes", () => {
       await expect(renders).toHaveText("1");
 
       await countBtn.click();
-      await page.waitForTimeout(100);
+      await expect(input).not.toHaveAttribute("title", "some title");
       await expect(input).not.hasAttribute("title");
       await expect(label).not.hasAttribute("title");
       await expect(renders).toHaveText("1");
@@ -135,7 +137,6 @@ test.describe("attributes", () => {
       const renders = page.locator("#renders");
       const countBtn = page.locator("#required");
       await countBtn.click();
-      await page.waitForTimeout(100);
 
       await expect(input).toHaveAttribute("aria-hidden", "true");
       await expect(input).toHaveAttribute("aria-label", "even");
@@ -156,8 +157,7 @@ test.describe("attributes", () => {
 
       const countBtn = page.locator("#hide");
       await countBtn.click();
-
-      await page.waitForTimeout(100);
+      await expect(input).not.toHaveAttribute("aria-hidden", "true");
 
       await expect(input).not.hasAttribute("aria-hidden");
       await expect(input).not.hasAttribute("aria-label");
@@ -178,7 +178,7 @@ test.describe("attributes", () => {
       const countBtn = page.locator("#hide");
 
       await countBtn.click();
-      await page.waitForTimeout(100);
+      await expect(input).not.toHaveAttribute("aria-hidden", "true");
 
       await expect(input).not.hasAttribute("aria-hidden");
       await expect(input).not.hasAttribute("aria-label");
@@ -198,7 +198,7 @@ test.describe("attributes", () => {
       await expect(renders).toHaveText("2");
 
       await countBtn.click();
-      await page.waitForTimeout(100);
+
       await expect(input).toHaveAttribute("aria-hidden", "true");
       await expect(input).toHaveAttribute("aria-label", "even");
       await expect(input).toHaveAttribute("tabindex", "-1");
@@ -221,7 +221,7 @@ test.describe("attributes", () => {
       await expect(renders).toHaveText("3");
 
       await countBtn.click();
-      await page.waitForTimeout(100);
+      await expect(svg).not.toHaveAttribute("aria-hidden", "true");
       await expect(input).not.hasAttribute("aria-hidden");
       await expect(input).not.hasAttribute("aria-label");
       await expect(input).not.hasAttribute("tabindex");
@@ -239,7 +239,7 @@ test.describe("attributes", () => {
       await expect(renders).toHaveText("4");
 
       await countBtn.click();
-      await page.waitForTimeout(100);
+
       await expect(input).toHaveAttribute("aria-hidden", "true");
       await expect(input).toHaveAttribute("aria-label", "even");
       await expect(input).toHaveAttribute("tabindex", "-1");
@@ -274,8 +274,8 @@ test.describe("attributes", () => {
       await expect(button).toHaveAttribute("title", "some value");
 
       await button.click();
-      await page.waitForTimeout(100);
 
+      await expect(button).toHaveClass("moop");
       await expect(button).not.hasAttribute("data-works");
       await expect(button).not.hasAttribute("aria-label");
       await expect(button).not.hasAttribute("title");
@@ -289,8 +289,8 @@ test.describe("attributes", () => {
       await expect(button).toHaveAttribute("title", "some value");
 
       await button.click();
-      await page.waitForTimeout(100);
 
+      await expect(button).toHaveClass("moop");
       await expect(button).not.hasAttribute("data-works");
       await expect(button).not.hasAttribute("aria-label");
       await expect(button).not.hasAttribute("title");
@@ -302,8 +302,11 @@ test.describe("attributes", () => {
   test.describe("client rerender", () => {
     test.beforeEach(async ({ page }) => {
       const toggleRender = page.locator("#force-rerender");
+      const v = Number(await toggleRender.getAttribute("data-v"));
       await toggleRender.click();
-      await page.waitForTimeout(100);
+      await expect(page.locator("#renderCount")).toHaveText(`Render ${v}`);
+      // Without this the tests still fail?
+      await page.waitForTimeout(50);
     });
     tests();
   });
diff --git a/starters/e2e/e2e.context.spec.ts b/starters/e2e/e2e.context.spec.ts
index 1d3b93dce9c..d4c0fcea36e 100644
--- a/starters/e2e/e2e.context.spec.ts
+++ b/starters/e2e/e2e.context.spec.ts
@@ -26,7 +26,7 @@ test.describe("context", () => {
       ]);
 
       await btnRootIncrement1.click();
-      await page.waitForTimeout(100);
+      await expect(level2State1.first()).toHaveText("ROOT / state1 = 1");
 
       expect(await level2State1.allTextContents()).toEqual([
         "ROOT / state1 = 1",
@@ -41,7 +41,7 @@ test.describe("context", () => {
         "bar = 0",
       ]);
       await btnRootIncrement2.click();
-      await page.waitForTimeout(100);
+      await expect(level2State2.first()).toHaveText("ROOT / state2 = 1");
 
       expect(await level2State1.allTextContents()).toEqual([
         "ROOT / state1 = 1",
@@ -58,13 +58,13 @@ test.describe("context", () => {
       await btnLevel2Increment.click();
       await btnLevel2Increment.click();
       await btnLevel2Increment2.click();
-      await page.waitForTimeout(100);
 
       const level3State1 = page.locator(".level3-state1");
       const level3State2 = page.locator(".level3-state2");
       const level3State3 = page.locator(".level3-state3");
       const level3Slot = page.locator(".level3-slot");
 
+      await expect(level3State1.first()).toHaveText("Level2 / state1 = 0");
       expect(await level2State1.allTextContents()).toEqual([
         "ROOT / state1 = 1",
         "ROOT / state1 = 1",
diff --git a/starters/e2e/e2e.effect-client.spec.ts b/starters/e2e/e2e.effect-client.spec.ts
index dc6de45b1b2..8addef302cd 100644
--- a/starters/e2e/e2e.effect-client.spec.ts
+++ b/starters/e2e/e2e.effect-client.spec.ts
@@ -29,13 +29,11 @@ test.describe("effect-client", () => {
     await expect(msgClientSide3).toHaveText("run");
 
     await counter.scrollIntoViewIfNeeded();
-    await page.waitForTimeout(100);
 
     await expect(container).toHaveAttribute("data-effect", "true");
     await expect(counter).toHaveText("10");
     await expect(msg).toHaveText("run");
 
-    await page.waitForTimeout(500);
     await expect(container).toHaveAttribute("data-effect", "true");
     await expect(counter).toHaveText("11");
     await expect(msg).toHaveText("run");
@@ -52,7 +50,6 @@ test.describe("effect-client", () => {
 
   test("issue 2015", async ({ page }) => {
     const order = page.locator("#issue-2015-order");
-    await page.waitForTimeout(300);
     await expect(order).toHaveText(
       "Order: start 1 start 2 start 3 finish 1 finish 2 finish 3",
     );
@@ -60,14 +57,12 @@ test.describe("effect-client", () => {
 
   test("issue 1955", async ({ page }) => {
     const results = page.locator("#issue-1955-results");
-    await page.waitForTimeout(300);
     await expect(results).toHaveText("run");
   });
 
   test("cleanup", async ({ page }) => {
     const counter = page.locator("#cleanup-effects-button");
     const nuCleanups = page.locator("#cleanup-effects-count");
-    await page.waitForTimeout(200);
     await expect(nuCleanups).toHaveText("0");
     await counter.click();
     await expect(nuCleanups).toHaveText("1");
@@ -78,10 +73,8 @@ test.describe("effect-client", () => {
   test("issue 4432", async ({ page }) => {
     const button = page.locator("#issue-4432-button");
     const logs = page.locator("#issue-4432-logs");
-    await page.waitForTimeout(500);
     await expect(logs).toHaveText("VisibleTask ChildA /\n");
     await button.click();
-    await page.waitForTimeout(500);
     await expect(logs).toHaveText(
       "VisibleTask ChildA /\nCleanup ChildA /other\n",
     );
diff --git a/starters/e2e/e2e.events.spec.ts b/starters/e2e/e2e.events.spec.ts
index de8839e9617..670fef74ffc 100644
--- a/starters/e2e/e2e.events.spec.ts
+++ b/starters/e2e/e2e.events.spec.ts
@@ -5,6 +5,7 @@ test.describe("events", () => {
     await page.goto("/e2e/events");
     page.on("pageerror", (err) => expect(err).toEqual(undefined));
     page.on("console", (msg) => {
+      // console.log(msg.type(), msg.text());
       if (msg.type() === "error") {
         expect(msg.text()).toEqual(undefined);
       }
@@ -14,51 +15,36 @@ test.describe("events", () => {
   test("should rerender correctly", async ({ page }) => {
     const btnWrapped = page.locator("#btn-wrapped");
     const btnTransparent = page.locator("#btn-transparent");
-
     const contentTransparent = page.locator("#count-transparent");
     const countWrapped = page.locator("#count-wrapped");
 
-    expect(await contentTransparent.textContent()).toEqual(
-      "countTransparent: 0",
-    );
-    expect(await countWrapped.textContent()).toEqual("countWrapped: 0");
-    expect(await btnWrapped.textContent()).toEqual("Wrapped 0");
+    await expect(contentTransparent).toHaveText("countTransparent: 0");
+    await expect(countWrapped).toHaveText("countWrapped: 0");
+    await expect(btnWrapped).toHaveText("Wrapped 0");
 
     // Click wrapped
     await btnWrapped.click();
-    await page.waitForTimeout(100);
-    expect(await contentTransparent.textContent()).toEqual(
-      "countTransparent: 0",
-    );
-    expect(await countWrapped.textContent()).toEqual("countWrapped: 1");
-    expect(await btnWrapped.textContent()).toEqual("Wrapped 1");
+    await expect(countWrapped).toHaveText("countWrapped: 1");
+    await expect(btnWrapped).toHaveText("Wrapped 1");
+    await expect(contentTransparent).toHaveText("countTransparent: 0");
 
     // Click wrapped
     await btnWrapped.click();
-    await page.waitForTimeout(100);
-    expect(await contentTransparent.textContent()).toEqual(
-      "countTransparent: 0",
-    );
-    expect(await countWrapped.textContent()).toEqual("countWrapped: 2");
-    expect(await btnWrapped.textContent()).toEqual("Wrapped 2");
+    await expect(countWrapped).toHaveText("countWrapped: 2");
+    await expect(btnWrapped).toHaveText("Wrapped 2");
+    await expect(contentTransparent).toHaveText("countTransparent: 0");
 
     // Click transparent
     await btnTransparent.click();
-    await page.waitForTimeout(100);
-    expect(await contentTransparent.textContent()).toEqual(
-      "countTransparent: 1",
-    );
-    expect(await countWrapped.textContent()).toEqual("countWrapped: 2");
-    expect(await btnWrapped.textContent()).toEqual("Wrapped 2");
+    await expect(contentTransparent).toHaveText("countTransparent: 1");
+    await expect(countWrapped).toHaveText("countWrapped: 2");
+    await expect(btnWrapped).toHaveText("Wrapped 2");
 
     // Click transparent
     await btnTransparent.click();
-    await page.waitForTimeout(100);
-    expect(await contentTransparent.textContent()).toEqual(
-      "countTransparent: 2",
-    );
-    expect(await countWrapped.textContent()).toEqual("countWrapped: 2");
-    expect(await btnWrapped.textContent()).toEqual("Wrapped 2");
+    await expect(contentTransparent).toHaveText("countTransparent: 2");
+    await expect(countWrapped).toHaveText("countWrapped: 2");
+    await expect(btnWrapped).toHaveText("Wrapped 2");
   });
 
   test("should prevent defaults and bubbling", async ({ page }) => {
diff --git a/starters/e2e/e2e.lexical-scope.spec.ts b/starters/e2e/e2e.lexical-scope.spec.ts
index 4cce8e933d3..3b91b4d97ad 100644
--- a/starters/e2e/e2e.lexical-scope.spec.ts
+++ b/starters/e2e/e2e.lexical-scope.spec.ts
@@ -29,18 +29,16 @@ test.describe("lexical-scope", () => {
 
     // Click button
     await btn.click();
-    await page.waitForTimeout(100);
 
-    expect(normalizeSnapshot(await content.innerHTML())).toEqual(SNAPSHOT);
     await expect(btn).toHaveText("Rerender 1");
+    expect(normalizeSnapshot(await content.innerHTML())).toEqual(SNAPSHOT);
     await expect(result).toHaveText(RESULT);
 
     // Click button
     await btn.click();
-    await page.waitForTimeout(100);
 
-    expect(normalizeSnapshot(await content.innerHTML())).toEqual(SNAPSHOT);
     await expect(btn).toHaveText("Rerender 2");
+    expect(normalizeSnapshot(await content.innerHTML())).toEqual(SNAPSHOT);
     await expect(result).toHaveText(RESULT);
   });
 });
diff --git a/starters/e2e/e2e.render.spec.ts b/starters/e2e/e2e.render.spec.ts
index 15e790d72bc..0acedf6b429 100644
--- a/starters/e2e/e2e.render.spec.ts
+++ b/starters/e2e/e2e.render.spec.ts
@@ -61,7 +61,6 @@ test.describe("render", () => {
       const result = page.locator("#issue-1475-result");
 
       await button.click();
-      await page.waitForTimeout(100);
       await expect(result).toHaveText(
         "1. Before\n2. Some text\nMiddle\n3 After\n\nStuff",
         {
@@ -146,10 +145,8 @@ test.describe("render", () => {
       await input.fill("some text");
       await expect(input).toHaveValue("some text");
       await toggle.click();
-      await page.waitForTimeout(100);
       await expect(input).toHaveValue("some text");
       await toggle.click();
-      await page.waitForTimeout(100);
       await expect(input).toHaveValue("some text");
     });
 
@@ -499,8 +496,11 @@ test.describe("render", () => {
   test.describe("client rerender", () => {
     test.beforeEach(async ({ page }) => {
       const toggleRender = page.locator("#rerender");
+      const v = await toggleRender.getAttribute("data-v");
       await toggleRender.click();
-      await page.waitForTimeout(100);
+      await expect(page.locator("#rerenderCount")).toHaveText(
+        `Render ${Number(v) + 1}`,
+      );
     });
     tests();
   });
diff --git a/starters/e2e/e2e.resource.spec.ts b/starters/e2e/e2e.resource.spec.ts
index 3bf0bde0906..000765f8f4c 100644
--- a/starters/e2e/e2e.resource.spec.ts
+++ b/starters/e2e/e2e.resource.spec.ts
@@ -23,19 +23,15 @@ test.describe("resource", () => {
 
     // Increment
     await increment.click();
-    await page.waitForTimeout(400);
 
+    await expect(resource1).toHaveText("loading resource 1...");
     logsContent +=
       "[RESOURCE] 1 after\n\n[WATCH] 1 before\n[WATCH] 1 after\n[WATCH] 2 before\n[WATCH] 2 after\n[RESOURCE] 1 before\n[RENDER] <Results>\n\n\n";
-    await expect(resource1).toHaveText("loading resource 1...");
     // await expect(resource2).toHaveText('loading resource 2...');
     await expect(logs).toHaveText(logsContent);
 
-    // Wait until finish loading
-    await page.waitForTimeout(1000);
-
-    logsContent += "[RESOURCE] 1 after\n[RENDER] <Results>\n\n\n";
     await expect(resource1).toHaveText("resource 1 is 88");
+    logsContent += "[RESOURCE] 1 after\n[RENDER] <Results>\n\n\n";
     // await expect(resource2).toHaveText('resource 2 is 176');
     await expect(logs).toHaveText(logsContent);
   });
diff --git a/starters/e2e/e2e.signals.spec.ts b/starters/e2e/e2e.signals.spec.ts
index 15f5827fa53..5e9e9fbc3eb 100644
--- a/starters/e2e/e2e.signals.spec.ts
+++ b/starters/e2e/e2e.signals.spec.ts
@@ -27,8 +27,6 @@ test.describe("signals", () => {
       const stuff = page.locator("#stuff");
       const body = page.locator("body");
 
-      await page.waitForTimeout(100);
-
       await expect(parentRender).toHaveText("Parent renders: 1");
       await expect(childRender).toHaveText("Child renders: 1");
       await expect(text).toHaveText("Text: Message");
@@ -209,7 +207,6 @@ test.describe("signals", () => {
     test("issue 2245-b", async ({ page }) => {
       const btn = page.locator("#issue-2245-b-btn");
       const results = page.locator(".issue-2245-b-results p");
-      await page.waitForTimeout(200);
       await expect(results).toHaveCSS("color", "rgb(0, 0, 0)");
 
       await btn.click();
@@ -248,7 +245,6 @@ test.describe("signals", () => {
       ]);
 
       await btn.click();
-      await page.waitForTimeout(200);
 
       await expect(results).toHaveText([
         "This text should not change",
@@ -283,7 +279,6 @@ test.describe("signals", () => {
       ]);
       await page.waitForTimeout(100);
       await input.fill("test");
-      await page.waitForTimeout(200);
       await expect(results).toHaveText([
         '{"controls":{"ctrl":{"value":"test"}}}',
         '{"ctrl":{"value":"test"}}',
@@ -464,8 +459,6 @@ test.describe("signals", () => {
       const resultC = page.locator("#issue-4228-result-c");
       const resultTotal = page.locator("#issue-4228-result-total");
 
-      await page.waitForTimeout(100);
-
       await expect(resultA).toHaveText("0:0");
       await expect(resultB).toHaveText("0:0");
       await expect(resultC).toHaveText("0:0");
diff --git a/starters/e2e/e2e.slot.spec.ts b/starters/e2e/e2e.slot.spec.ts
index 37d43d61ac0..635dcb2d463 100644
--- a/starters/e2e/e2e.slot.spec.ts
+++ b/starters/e2e/e2e.slot.spec.ts
@@ -14,14 +14,12 @@ test.describe("slot", () => {
 
       // Count
       await btnCount.click();
-      await page.waitForTimeout(100);
       await expect(content1).toHaveText("DEFAULT 1");
       await expect(content2).toHaveText("START 1");
       await expect(content3).toHaveText("INSIDE THING 1");
 
       // Count
       await btnCount.click();
-      await page.waitForTimeout(100);
       await expect(content1).toHaveText("DEFAULT 2");
       await expect(content2).toHaveText("START 2");
       await expect(content3).toHaveText("INSIDE THING 2");
@@ -35,16 +33,13 @@ test.describe("slot", () => {
       const btnToggleButtons = page.locator("#btn-toggle-buttons");
 
       // btnToggleButtons
-      await page.waitForTimeout(100);
       await btnToggleButtons.click();
-      await page.waitForTimeout(100);
       await expect(content1).toHaveText("", { useInnerText: true });
       await expect(content2).toHaveText("START 0", { useInnerText: true });
       await expect(content3).toHaveText("", { useInnerText: true });
 
       // btnToggleButtons
       await btnToggleButtons.click();
-      await page.waitForTimeout(100);
       await expect(content1).toHaveText("DEFAULT 0", { useInnerText: true });
       await expect(content2).toHaveText("START 0", { useInnerText: true });
       await expect(content3).toHaveText("INSIDE THING 0", {
@@ -62,21 +57,18 @@ test.describe("slot", () => {
 
       // btnToggleButtons
       await btnToggleButtons.click();
-      await page.waitForTimeout(100);
       await expect(content1).toHaveText("", { useInnerText: true });
       await expect(content2).toHaveText("START 0", { useInnerText: true });
       await expect(content3).toHaveText("", { useInnerText: true });
 
       // btnToggleButtons
       await btnCount.click();
-      await page.waitForTimeout(100);
       await expect(content1).toHaveText("", { useInnerText: true });
       await expect(content2).toHaveText("START 1", { useInnerText: true });
       await expect(content3).toHaveText("", { useInnerText: true });
 
       // btnToggleButtons
       await btnToggleButtons.click();
-      await page.waitForTimeout(100);
       await expect(content1).toHaveText("DEFAULT 1", { useInnerText: true });
       await expect(content2).toHaveText("START 1", { useInnerText: true });
       await expect(content3).toHaveText("INSIDE THING 1", {
@@ -85,14 +77,12 @@ test.describe("slot", () => {
 
       // btnToggleButtons
       await btnToggleButtons.click();
-      await page.waitForTimeout(100);
       await expect(content1).toHaveText("", { useInnerText: true });
       await expect(content2).toHaveText("START 1", { useInnerText: true });
       await expect(content3).toHaveText("", { useInnerText: true });
 
       // btnToggleButtons
       await btnToggleButtons.click();
-      await page.waitForTimeout(100);
       await expect(content1).toHaveText("DEFAULT 1", { useInnerText: true });
       await expect(content2).toHaveText("START 1", { useInnerText: true });
       await expect(content3).toHaveText("INSIDE THING 1", {
@@ -110,7 +100,6 @@ test.describe("slot", () => {
 
       // btnToggleButtons
       await btnToggleContent.click();
-      await page.waitForTimeout(100);
       await expect(content1).toHaveText("", { useInnerText: true });
       await expect(content2).toHaveText("", { useInnerText: true });
       await expect(content3).toHaveText("", { useInnerText: true });
@@ -118,7 +107,6 @@ test.describe("slot", () => {
       // btnToggleButtons
       await btnCount.click();
       await btnToggleContent.click();
-      await page.waitForTimeout(100);
       await expect(content1).toHaveText("DEFAULT 1", { useInnerText: true });
       await expect(content2).toHaveText("START 1", { useInnerText: true });
       await expect(content3).toHaveText("INSIDE THING 1", {
@@ -157,13 +145,11 @@ test.describe("slot", () => {
       // btnToggleButtons
       await btnToggleThing.click();
       await btnCount.click();
-      await page.waitForTimeout(100);
       await expect(content1).toHaveText("DEFAULT 1");
       await expect(content2).toHaveText("START 1");
       await expect(content3).toHaveText("");
 
       await btnToggleThing.click();
-      await page.waitForTimeout(100);
       await expect(content1).toHaveText("DEFAULT 1");
       await expect(content2).toHaveText("START 1");
       await expect(content3).toHaveText("INSIDE THING 1");
@@ -176,7 +162,6 @@ test.describe("slot", () => {
       const btnCount = page.locator("#btn-count");
 
       await btnCount.click();
-      await page.waitForTimeout(100);
       await expect(content3).toHaveText("INSIDE THING 1", {
         useInnerText: true,
       });
@@ -189,7 +174,6 @@ test.describe("slot", () => {
 
       // Click projected
       await projected.click();
-      await page.waitForTimeout(100);
 
       await expect(content3).toHaveText("INSIDE THING 0", {
         useInnerText: true,
@@ -360,10 +344,11 @@ test.describe("slot", () => {
   test.describe("client rerender", () => {
     test.beforeEach(async ({ page }) => {
       const toggleRender = page.locator("#btn-toggle-render");
+      const rendered = page.locator("#isRendered");
       await toggleRender.click();
-      await page.waitForTimeout(100);
+      await expect(rendered).toBeHidden();
       await toggleRender.click();
-      await page.waitForTimeout(100);
+      await expect(rendered).toBeVisible();
     });
     tests();
   });
diff --git a/starters/e2e/e2e.streaming.spec.ts b/starters/e2e/e2e.streaming.spec.ts
index cc245225820..8c1b2ead8d8 100644
--- a/starters/e2e/e2e.streaming.spec.ts
+++ b/starters/e2e/e2e.streaming.spec.ts
@@ -36,7 +36,7 @@ test.describe("streaming", () => {
     const count = page.locator("button#count");
     await count.click();
 
-    await expect(count).toHaveText("Rerender 1");
+    await expect(count).toHaveText("Rerender: 1");
     await expect(ul).toHaveCount(5);
     await expect(ol).toHaveCount(10);
     await expect(cmps).toHaveCount(5);
@@ -49,19 +49,19 @@ test.describe("streaming", () => {
     const count = page.locator("button#count");
     const rerender = page.locator("button#client-render");
     await count.click();
-    await expect(count).toHaveText("Rerender 1");
+    await expect(count).toHaveText("Rerender: 1");
 
     await rerender.click();
-    await page.waitForTimeout(500);
+    expect(rerender).toHaveText("Client rerender: 1");
+    await expect(count).toHaveText("Rerender: 0");
     await count.click();
-    await page.waitForTimeout(3000);
 
-    await expect(count).toHaveText("Rerender 0");
+    await expect(count).toHaveText("Rerender: 1");
     await expect(ul).toHaveCount(0);
     await expect(ol).toHaveCount(0);
     await expect(cmps).toHaveCount(5);
 
     await count.click();
-    await expect(count).toHaveText("Rerender 1");
+    await expect(count).toHaveText("Rerender: 2");
   });
 });
diff --git a/starters/e2e/e2e.style.spec.ts b/starters/e2e/e2e.style.spec.ts
index 0b46a4f2d05..107827745ce 100644
--- a/starters/e2e/e2e.style.spec.ts
+++ b/starters/e2e/e2e.style.spec.ts
@@ -5,6 +5,7 @@ test.describe("styles", () => {
     await page.goto("/e2e/styles");
     page.on("pageerror", (err) => expect(err).toEqual(undefined));
     page.on("console", (msg) => {
+      // console.log(msg.type(), msg.text());
       if (msg.type() === "error") {
         expect(msg.text()).toEqual(undefined);
       }
@@ -16,7 +17,9 @@ test.describe("styles", () => {
   test.describe("client side", () => {
     test.beforeEach(async ({ page }) => {
       const reload = page.locator("#reload");
+      const v = Number(await reload.getAttribute("v"));
       await reload.click();
+      await expect(page.locator("#renderCount")).toHaveText(`Render ${v}`);
     });
     runTests();
   });
@@ -29,35 +32,28 @@ test.describe("styles", () => {
 
       const addChild = page.locator("button#add-child");
 
-      await expect(parent).toHaveClass(
-        "⭐️k8e9w3-0 ⭐️yohuk3-1 parent count-10",
-      );
+      await expect(parent).toHaveClass(/count-10/);
       await expect(parent).toHaveCSS("font-size", "200px");
       await expect(child2).toHaveCSS("font-size", "20px");
       await expect(inline2).toHaveCSS("font-size", "40px");
 
       const el = await page.$$("[q\\:style]");
-      await expect(el.length).toBe(9);
+      expect(el.length).toBe(9);
       await addChild.click();
-      await page.waitForTimeout(100);
+      await expect(parent).toHaveClass(/count-11/);
 
       const child10 = page.locator("text=Child 10");
       const inline10 = page.locator("text=Inline 10");
 
-      await expect(parent).toHaveClass(
-        "⭐️k8e9w3-0 ⭐️yohuk3-1 parent count-11",
-      );
       await expect(parent).toHaveCSS("font-size", "200px");
       await expect(child2).toHaveCSS("font-size", "20px");
       await expect(inline2).toHaveCSS("font-size", "40px");
       await expect(child10).toHaveCSS("font-size", "20px");
-      await expect(inline10).toHaveClass(
-        "⭐️k8e9w3-0 ⭐️yohuk3-1 parent-child",
-      );
+      await expect(inline10).toHaveClass(/parent-child/);
       await expect(inline10).toHaveCSS("font-size", "40px");
 
       const el2 = await page.$$("[q\\:style]");
-      await expect(el2.length).toBe(9);
+      expect(el2.length).toBe(9);
     });
 
     test("issue 1945", async ({ page }) => {
@@ -92,8 +88,10 @@ test.describe("styles", () => {
       const button = page.locator("#issue-scoped-fine-grained");
       await expect(button).toHaveCSS("background-color", "rgb(0, 128, 0)");
       await button.click();
+      await expect(button).toHaveClass(/odd/);
       await expect(button).toHaveCSS("background-color", "rgb(0, 0, 255)");
       await button.click();
+      await expect(button).toHaveClass(/even/);
       await expect(button).toHaveCSS("background-color", "rgb(0, 128, 0)");
     });
   }
diff --git a/starters/e2e/e2e.watch.spec.ts b/starters/e2e/e2e.watch.spec.ts
index 09d813167c6..927643546de 100644
--- a/starters/e2e/e2e.watch.spec.ts
+++ b/starters/e2e/e2e.watch.spec.ts
@@ -25,27 +25,24 @@ test.describe("watch", () => {
     await expect(debounced).toHaveText("Debounced: 0");
 
     await addButton.click();
-    await page.waitForTimeout(100);
 
-    await expect(server).toHaveText("comes from server");
     await expect(parent).toHaveText("3");
+    await expect(server).toHaveText("comes from server");
     await expect(child).toHaveText("3 / 6");
     await expect(debounced).toHaveText("Debounced: 0");
 
     await addButton.click();
-    await page.waitForTimeout(100);
 
-    await expect(server).toHaveText("comes from server");
     await expect(parent).toHaveText("4");
+    await expect(server).toHaveText("comes from server");
     await expect(child).toHaveText("4 / 8");
     await expect(debounced).toHaveText("Debounced: 0");
 
     // Wait for debouncer
-    await page.waitForTimeout(2000);
+    await expect(debounced).toHaveText("Debounced: 8");
     await expect(server).toHaveText("comes from server");
     await expect(parent).toHaveText("4");
     await expect(child).toHaveText("4 / 8");
-    await expect(debounced).toHaveText("Debounced: 8");
   });
 
   test("issue-1766", async ({ page }) => {
diff --git a/starters/e2e/qwikcity/actions.spec.ts b/starters/e2e/qwikcity/actions.spec.ts
index 0cf3f0697d1..94d09d2cff7 100644
--- a/starters/e2e/qwikcity/actions.spec.ts
+++ b/starters/e2e/qwikcity/actions.spec.ts
@@ -1,5 +1,4 @@
 import { expect, test } from "@playwright/test";
-import { pathToFileURL } from "url";
 
 test.describe("actions", () => {
   test.describe("mpa", () => {
@@ -102,7 +101,6 @@ test.describe("actions", () => {
         if (javaScriptEnabled) {
           await expect(running).toHaveText("Running...");
         }
-        await page.waitForTimeout(2500);
         await expect(running).toBeHidden();
         await expect(errorMessage).toBeHidden();
         await expect(successMessage).toHaveText("this is the secret");
@@ -111,8 +109,8 @@ test.describe("actions", () => {
         await username.clear();
         await username.fill("redirect");
         await submit.click();
-        await page.waitForTimeout(200);
-        expect(new URL(page.url()).pathname).toEqual("/qwikcity-test/");
+
+        await expect(page).toHaveURL("/qwikcity-test/");
       });
 
       test("issue with action", async ({ page }) => {
@@ -134,15 +132,13 @@ test.describe("actions", () => {
         await page.goto("/qwikcity-test/issue2644/");
         await page.locator("#issue2644-input").fill("AAA");
         await page.locator("#issue2644-submit").click();
-        await page.waitForTimeout(200);
 
-        const pageUrl = new URL(page.url());
-        await expect(pageUrl.pathname).toBe("/qwikcity-test/issue2644/other/");
         await expect(page.locator("#issue2644-list > li")).toHaveText(["AAA"]);
+        expect(page).toHaveURL("/qwikcity-test/issue2644/other/");
 
         await page.locator("#issue2644-input").fill("BBB");
         await page.locator("#issue2644-submit").click();
-        await expect(pageUrl.pathname).toBe("/qwikcity-test/issue2644/other/");
+        expect(page).toHaveURL(new RegExp("/qwikcity-test/issue2644/other/"));
 
         await expect(page.locator("#issue2644-list > li")).toHaveText([
           "AAA",
diff --git a/starters/e2e/qwikcity/loaders.spec.ts b/starters/e2e/qwikcity/loaders.spec.ts
index b24cd8fdec5..32d997ee1b2 100644
--- a/starters/e2e/qwikcity/loaders.spec.ts
+++ b/starters/e2e/qwikcity/loaders.spec.ts
@@ -42,8 +42,6 @@ test.describe("loaders", () => {
       await expect(nestedName).toHaveText("name: hola");
       await formName.fill("Manuel");
       await submit.click();
-      await page.waitForTimeout(1000);
-
       await expect(title).toHaveText("Loaders - ACTION: Manuel - Qwik", {
         useInnerText: true,
       });
@@ -54,7 +52,6 @@ test.describe("loaders", () => {
       await expect(nestedName).toHaveText("name: Manuel");
 
       await page.locator("#link-stuff").click();
-      await page.waitForTimeout(1000);
       await expect(title).toHaveText("Loaders - Qwik", { useInnerText: true });
       await expect(date).toHaveText("date: 2021-01-01T00:00:00.000Z");
       await expect(slow).toHaveText("slow: 123");
@@ -63,7 +60,6 @@ test.describe("loaders", () => {
       await expect(nestedName).toHaveText("name: stuff");
 
       await page.locator("#link-welcome").click();
-      await page.waitForTimeout(1000);
       await expect(title).toHaveText("Loaders - Qwik", { useInnerText: true });
       await expect(date).toHaveText("date: 2021-01-01T00:00:00.000Z");
       await expect(slow).toHaveText("slow: 123");
@@ -80,7 +76,6 @@ test.describe("loaders", () => {
       const submit = page.locator("#submit");
 
       await submit.click();
-      await page.waitForTimeout(300);
 
       await expect(realDate).not.toHaveText(value!);
     });
diff --git a/starters/e2e/qwikcity/nav.spec.ts b/starters/e2e/qwikcity/nav.spec.ts
index 5aac9203bb2..0db1075f54a 100644
--- a/starters/e2e/qwikcity/nav.spec.ts
+++ b/starters/e2e/qwikcity/nav.spec.ts
@@ -55,16 +55,21 @@ test.describe("actions", () => {
       });
       test("should scroll on hash change", async ({ page }) => {
         await page.goto("/qwikcity-test/scroll-restoration/hash/");
+        expect(page).toHaveURL("/qwikcity-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);
 
-        await page.waitForTimeout(400);
-        expect(toPath(page.url())).toEqual(
+        expect(page).toHaveURL(
           "/qwikcity-test/scroll-restoration/hash/#hash-2",
         );
-        await page.waitForTimeout(400);
-        const scrollY1 = (await getWindowScrollXY(page))[1];
+        let scrollY1;
+        do {
+          await page.waitForTimeout(10);
+          scrollY1 = (await getWindowScrollXY(page))[1];
+        } while (scrollY1 < 1000);
         expect(scrollY1).toBeGreaterThan(1090);
         expect(scrollY1).toBeLessThan(1110);
 
@@ -72,8 +77,7 @@ test.describe("actions", () => {
         await scrollTo(page, 0, 1000);
         await link2.click();
 
-        await page.waitForTimeout(50);
-        expect(toPath(page.url())).toEqual(
+        expect(page).toHaveURL(
           "/qwikcity-test/scroll-restoration/hash/#hash-1",
         );
         await page.waitForTimeout(50);
@@ -85,10 +89,7 @@ test.describe("actions", () => {
         await scrollTo(page, 0, 2000);
         await link3.click();
 
-        await page.waitForTimeout(50);
-        expect(toPath(page.url())).toEqual(
-          "/qwikcity-test/scroll-restoration/hash/",
-        );
+        expect(page).toHaveURL("/qwikcity-test/scroll-restoration/hash/");
         await page.waitForTimeout(50);
         expect(await getWindowScrollXY(page)).toStrictEqual([0, 0]);
       });
@@ -104,10 +105,7 @@ test.describe("actions", () => {
 
         await scrollDetector1;
         await expect(page.locator("h1")).toHaveText("Page Short");
-        await page.waitForTimeout(50);
-        expect(toPath(page.url())).toEqual(
-          "/qwikcity-test/scroll-restoration/page-short/",
-        );
+        expect(page).toHaveURL("/qwikcity-test/scroll-restoration/page-short/");
         expect(await getWindowScrollXY(page)).toStrictEqual([0, 0]);
 
         const scrollHeightShort = await getScrollHeight(page);
@@ -124,10 +122,7 @@ test.describe("actions", () => {
 
         await scrollDetector2;
         await expect(page.locator("h1")).toHaveText("Page Long");
-        await page.waitForTimeout(50);
-        expect(toPath(page.url())).toEqual(
-          "/qwikcity-test/scroll-restoration/page-long/",
-        );
+        expect(page).toHaveURL("/qwikcity-test/scroll-restoration/page-long/");
         expect(await getWindowScrollXY(page)).toStrictEqual([
           0,
           scrollHeightLong,
@@ -138,10 +133,7 @@ test.describe("actions", () => {
 
         await scrollDetector3;
         await expect(page.locator("h1")).toHaveText("Page Short");
-        await page.waitForTimeout(50);
-        expect(toPath(page.url())).toEqual(
-          "/qwikcity-test/scroll-restoration/page-short/",
-        );
+        expect(page).toHaveURL("/qwikcity-test/scroll-restoration/page-short/");
         expect(await getWindowScrollXY(page)).toStrictEqual([
           0,
           scrollHeightShort,
diff --git a/starters/e2e/qwikcity/server.spec.ts b/starters/e2e/qwikcity/server.spec.ts
index a9a4a8854d8..ee92947de21 100644
--- a/starters/e2e/qwikcity/server.spec.ts
+++ b/starters/e2e/qwikcity/server.spec.ts
@@ -33,15 +33,10 @@ test.describe("server$", () => {
 
     await expect(logs).toHaveText("");
     await button.click();
-    await page.waitForTimeout(900);
     await expect(logs).toHaveText("0");
-    await page.waitForTimeout(900);
     await expect(logs).toHaveText("01");
-    await page.waitForTimeout(900);
     await expect(logs).toHaveText("012");
-    await page.waitForTimeout(900);
     await expect(logs).toHaveText("0123");
-    await page.waitForTimeout(900);
     await expect(logs).toHaveText("01234");
   });
 });
diff --git a/starters/e2e/starter-partytown.spec.ts b/starters/e2e/starter-partytown.spec.ts
index 0c9f1c925db..b9ee076f037 100644
--- a/starters/e2e/starter-partytown.spec.ts
+++ b/starters/e2e/starter-partytown.spec.ts
@@ -16,8 +16,6 @@ test("rendered", async ({ page }) => {
   );
   await expect(state).toHaveText("running");
 
-  await page.waitForTimeout(3000);
-
   await expect(state).toHaveText("finished");
 });
 
@@ -32,6 +30,5 @@ test("update text", async ({ page }) => {
 
   await page.fill("input", "QWIK");
   await page.dispatchEvent("input", "keyup");
-  await page.waitForTimeout(100);
   await expect(page.locator("ol")).toContainText("Hello QWIK!");
 });
diff --git a/starters/e2e/todo.spec.ts b/starters/e2e/todo.spec.ts
index f4ae43183aa..d6df94c8360 100644
--- a/starters/e2e/todo.spec.ts
+++ b/starters/e2e/todo.spec.ts
@@ -47,7 +47,6 @@ test.describe("Todo", () => {
     await page.locator(".todo-list>li:first-child input.edit").fill("");
     await page.locator(".todo-list>li:first-child input.edit").press("X");
     await page.locator(".todo-list>li:first-child input.edit").press("Enter");
-    await page.waitForTimeout(100);
     await expect(page.locator(".todo-list>li:first-child")).toContainText("X");
   });