Merge pull request #15 from leotaku/playwright

Add E2E tests using Playwright

.github/workflows/playwright.yml

@@ -0,0 +1,33 @@
+name: playwright
+
+on:
+  pull_request:
+  push:
+    tags:
+    branches:
+      - master
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: examples/playwright
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dtolnay/rust-toolchain@master
+        with:
+          toolchain: stable
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - run: npm ci
+      - run: npx playwright install --with-deps
+      - run: npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: examples/playwright/playwright-report/
+          retention-days: 30

examples/playwright/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

examples/playwright/Cargo.toml

@@ -0,0 +1,9 @@
+[package]
+name = "playwright"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+axum = { version = "0.7.5", features = ["macros"] }
+tokio = { version = "1.39.2", features = ["macros", "rt-multi-thread"] }
+tower-livereload = { path = "../.." }

examples/playwright/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "playwright",
+  "description": "Playwright E2E tests for tower-livereload",
+  "scripts": {
+    "docker": "docker run --net=host --rm --init -it mcr.microsoft.com/playwright:v1.45.3 /bin/sh -c 'cd /home/pwuser && npx -y playwright run-server --port 3000 --host 0.0.0.0'",
+    "playwright": "PW_TEST_CONNECT_WS_ENDPOINT=ws://127.0.0.1:3000/ playwright"
+  },
+  "keywords": [],
+  "author": "Leo Gaskin <[email protected]>",
+  "license": "MIT OR Apache-2.0",
+  "devDependencies": {
+    "@playwright/test": "^1.45.3",
+    "@types/node": "^22.0.2"
+  }
+}

examples/playwright/playwright.config.ts

@@ -0,0 +1,70 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./tests",
+  /* Opt out of parallel tests for now. */
+  fullyParallel: false,
+  workers: 1,
+  /* Always forbid test.only. */
+  forbidOnly: true,
+  /* Always retry to collect traces. */
+  retries: 2,
+  /* Reporters to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [["html", { open: "never" }], ["list"], ["github"]],
+
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://127.0.0.1:3030",
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+
+    /* Test against mobile viewports. */
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  // Run your local dev server before starting the tests
+  webServer: {
+    command: "cargo run --package playwright",
+    url: "http://127.0.0.1:3030",
+    reuseExistingServer: false,
+  },
+});

examples/playwright/src/main.rs

@@ -0,0 +1,26 @@
+use axum::{
+    response::Html,
+    routing::{get, post},
+    Router,
+};
+use tower_livereload::LiveReloadLayer;
+
+#[tokio::main]
+async fn main() -> Result<(), Box<dyn std::error::Error>> {
+    let livereload = LiveReloadLayer::new();
+    let reloader = livereload.reloader();
+    let app = Router::new()
+        .route("/", get(|| async { Html("<h1>Playwright!</h1>") }))
+        .route(
+            "/reload",
+            post(|| async move {
+                reloader.reload();
+            }),
+        )
+        .layer(livereload);
+
+    let listener = tokio::net::TcpListener::bind("0.0.0.0:3030").await?;
+    axum::serve(listener, app).await?;
+
+    Ok(())
+}

examples/playwright/tests/simple.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect } from "@playwright/test";
+
+test("has heading", async ({ page }) => {
+  await page.goto("/");
+
+  // Expect heading to ensure we are looking at the intended page.
+  await expect(
+    page.getByRole("heading", { name: "Playwright!" }),
+  ).toBeVisible();
+});
+
+test("reload", async ({ page, request }) => {
+  await page.goto("/");
+
+  // Wait for load event on this page.
+  const reload = page.waitForRequest("/");
+
+  // Trigger a reload.
+  await request.post("/reload");
+
+  // Ensure reload actually happened.
+  await reload;
+});
+
+test.fail("no reload", async ({ page }) => {
+  await page.goto("/");
+
+  // Ensure no reload happens when not triggered.
+  await page.waitForRequest("/", { timeout: 100 });
+});