Fix playwright tests (#2695)

packages/playwright-tests/fullstack.spec.js

@@ -1,12 +1,14 @@
 // @ts-check
 const { test, expect } = require("@playwright/test");
 
-test("button click", async ({ page }) => {
+test("hydration", async ({ page }) => {
   await page.goto("http://localhost:3333");
-  await page.waitForTimeout(1000);
+
+  // Expect the page to contain the pending text.
+  const main = page.locator("#main");
+  await expect(main).toContainText("Server said: ...");
 
   // Expect the page to contain the counter text.
-  const main = page.locator("#main");
   await expect(main).toContainText("hello axum! 12345");
   // Expect the title to contain the counter text.
   await expect(page).toHaveTitle("hello axum! 12345");
@@ -15,23 +17,14 @@ test("button click", async ({ page }) => {
   let button = page.locator("button.increment-button");
   await button.click();
 
+  // Click the server button.
+  let serverButton = page.locator("button.server-button");
+  await serverButton.click();
+
   // Expect the page to contain the updated counter text.
   await expect(main).toContainText("hello axum! 12346");
   // Expect the title to contain the updated counter text.
   await expect(page).toHaveTitle("hello axum! 12346");
-});
-
-test("fullstack communication", async ({ page }) => {
-  await page.goto("http://localhost:3333");
-  await page.waitForTimeout(1000);
-
-  // Expect the page to contain the counter text.
-  const main = page.locator("#main");
-  await expect(main).toContainText("Server said: ...");
-
-  // Click the increment button.
-  let button = page.locator("button.server-button");
-  await button.click();
 
   // Expect the page to contain the updated counter text.
   await expect(main).toContainText("Server said: Hello from the server!");

packages/playwright-tests/nested-suspense-no-js.spec.js

@@ -4,9 +4,23 @@ const { test, expect } = require("@playwright/test");
 test.use({ javaScriptEnabled: false });
 
 test("text appears in the body without javascript", async ({ page }) => {
+  await page.goto("http://localhost:5050", { waitUntil: "commit" });
+  // Wait for the page to finish building. Reload until it's ready
+  for (let i = 0; i < 50; i++) {
+    // If the page doesn't contain #building or "Backend connection failed", we're ready
+    let building_count = await page.locator("#building").count();
+    building_count += await page
+      .locator("body", { hasText: "backend connection failed" })
+      .count();
+    if (building_count === 0) {
+      break;
+    }
+    await page.waitForTimeout(1000);
+    await page.goto("http://localhost:5050", { waitUntil: "commit" });
+  }
   // If we wait until the whole page loads, the content of the site should still be in the body even if javascript is disabled
   // It will not be visible, and may not be in the right order/location, but SEO should still work
-  await page.goto("http://localhost:5050");
+  await page.waitForLoadState("load");
 
   const body = page.locator("body");
   const textExpected = [

packages/playwright-tests/nested-suspense.spec.js

@@ -1,7 +1,11 @@
 // @ts-check
 const { test, expect } = require("@playwright/test");
+const { timeout } = require("./playwright.config");
 
 test("nested suspense resolves", async ({ page }) => {
+  // Wait for the dev server to reload
+  await page.goto("http://localhost:5050");
+  // Then wait for the page to start loading
   await page.goto("http://localhost:5050", { waitUntil: "commit" });
 
   // On the client, we should see some loading text

packages/playwright-tests/playwright.config.js

@@ -30,8 +30,12 @@ module.exports = defineConfig({
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
+    // Increase the timeout for navigations to give dx time to build the project
+    navigationTimeout: 50 * 60 * 1000,
   },
 
+  timeout: 50 * 60 * 1000,
+
   /* Configure projects for major browsers */
   projects: [
     {

packages/playwright-tests/static-generation/src/main.rs

@@ -18,7 +18,7 @@ fn app() -> Element {
     rsx! {
         h1 { "hello axum! {count}" }
         button { class: "increment-button", onclick: move |_| count += 1, "Increment" }
-        "Server said: {server_data:?}"
+        "Server said: {server_data().unwrap():?}"
     }
 }
 

packages/playwright-tests/suspense-carousel.spec.js

@@ -2,6 +2,9 @@
 const { test, expect } = require("@playwright/test");
 
 test("suspense resolves on server", async ({ page }) => {
+  // Wait for the dev server to reload
+  await page.goto("http://localhost:4040");
+  // Then wait for the page to start loading
   await page.goto("http://localhost:4040", { waitUntil: "commit" });
 
   // On the client, we should see some loading text