fix(playwright) :: let the kernel choose the ports

Before this was pinned to `8080` and `8081` which conflicted with any other program alerady on those ports.

Now each server binds to `127.0.0.1:0` and Playright's `webServer.wait` gets the port.

`reuseExistingServer` goes with the fixed ports, since there is no longer a known address for a stray server to answer on. The timeout rises to ten minutes because Playwright now starts the server itself, so that window has to cover a cold `cargo run`.

Author: 81reap

CONTRIBUTING.md

@@ -112,26 +112,16 @@ tests should render real components through their SQL fixture; do not inject com
 invoke SQLPage's JavaScript initialization functions directly. Parameterized fixtures may accept
 request variables when several tests need the same component with different data.
 
-#### Start a sqlpage instance pointed to the official site source code
-
-```bash
-cd examples/official-site
-cargo run
-```
-
 #### Run the tests
 
-In a separate terminal, run the tests:
-
 ```bash
 npm install
 cd tests/end-to-end
 npx playwright install chromium
 npm run test
 ```
 
-Playwright starts the component fixture server on port 8081 automatically. The official-site
-server on port 8080 must still be started separately as shown above.
+Playwright starts both servers itself on a free port. Set `SQLPAGE_BINARY` to run the servers from an already compiled binary instead of `cargo run`.
 
 ## Documentation
 

tests/end-to-end/fixture-server/sqlpage.json

@@ -1,4 +1,3 @@
 {
-  "database_url": "sqlite::memory:",
-  "port": 8081
+  "database_url": "sqlite::memory:"
 }

tests/end-to-end/playwright.config.ts

@@ -1,10 +1,26 @@
 import { defineConfig, devices } from "@playwright/test";
 
-const fixtureBaseURL =
-  process.env.SQLPAGE_FIXTURE_BASE ?? "http://127.0.0.1:8081";
 const sqlpage =
   process.env.SQLPAGE_BINARY ?? "cargo run --manifest-path ../../Cargo.toml --";
 
+const anyFreePort = "127.0.0.1:0";
+const compileAndStart = 600_000;
+
+// Playwright uppercases the named capture group of `wait` into the environment
+// it hands the worker processes, which is where the tests read the address back
+// from: https://playwright.dev/docs/api/class-testconfig#test-config-web-server
+function announcedAddress(variable: string) {
+  return {
+    announcement: new RegExp(
+      `View your website at:.*?http://(?<${variable.toLowerCase()}>\\S+)`,
+    ),
+    url: `http://${process.env[variable]}`,
+  };
+}
+
+const officialSite = announcedAddress("SQLPAGE_OFFICIAL_SITE_ADDRESS");
+const fixtures = announcedAddress("SQLPAGE_FIXTURES_ADDRESS");
+
 export default defineConfig({
   testDir: ".",
   fullyParallel: true,
@@ -19,30 +35,29 @@ export default defineConfig({
     {
       name: "official-site",
       testMatch: "*.spec.ts",
-      use: {
-        ...devices["Desktop Chrome"],
-        baseURL: process.env.SQLPAGE_TEST_BASE ?? "http://127.0.0.1:8080",
-      },
+      use: { ...devices["Desktop Chrome"], baseURL: officialSite.url },
     },
     {
       name: "fixtures",
       testMatch: "fixtures/**/test.ts",
-      use: { ...devices["Desktop Chrome"], baseURL: fixtureBaseURL },
+      use: { ...devices["Desktop Chrome"], baseURL: fixtures.url },
     },
   ],
   webServer: [
     {
+      name: "official site",
       command: sqlpage,
       cwd: "../../examples/official-site",
-      url: "http://127.0.0.1:8080",
-      reuseExistingServer: !process.env.CI,
-      timeout: 120_000,
+      env: { SQLPAGE_LISTEN_ON: anyFreePort },
+      wait: { stderr: officialSite.announcement },
+      timeout: compileAndStart,
     },
     {
+      name: "fixtures",
       command: `${sqlpage} --web-root fixtures --config-dir fixture-server`,
-      url: fixtureBaseURL,
-      reuseExistingServer: !process.env.CI,
-      timeout: 120_000,
+      env: { SQLPAGE_LISTEN_ON: anyFreePort },
+      wait: { stderr: fixtures.announcement },
+      timeout: compileAndStart,
     },
   ],
 });