ci: add e2e test

.github/workflows/e2e-test.yml

@@ -0,0 +1,55 @@
+name: E2E Tests
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  playwright:
+    name: Playwright Tests
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.62.0-noble
+    steps:
+      - name: Checkout
+        uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4
+        with:
+          version: 10.33.2
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
+        with:
+          node-version: 24
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build package and applications
+        run: pnpm build
+
+      - name: Run Playwright tests
+        run: pnpm test:e2e
+
+      - name: Upload artifacts on failure
+        if: failure()
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
+        with:
+          name: playwright-results
+          path: reports/e2e
+          retention-days: 3

.gitignore

@@ -4,4 +4,5 @@ dist/
 .next/
 *.tgz
 *.log
+reports/
 .DS_Store

README.md

@@ -73,6 +73,7 @@ pnpm install
 pnpm run check
 pnpm run build:package
 pnpm run build
+pnpm run test:e2e
 ```
 
 ## Release

e2e/vinext.spec.mjs

@@ -0,0 +1,31 @@
+import { expect, test } from "@playwright/test";
+
+const button = (page, name) => page.getByRole("button", { name }).first();
+
+test("host, shared remotes, and island hydrate", async ({ page }) => {
+  await page.goto("/");
+
+  await expect(page.getByText("Vinext host")).toBeVisible();
+  await expect(page.getByText("Host SSR component")).toBeVisible();
+  await expect(page.getByText("Remote app")).toBeVisible();
+  await expect(page.getByText("Remote SSR component")).toBeVisible();
+  await expect(page.getByText("React 18 SSR island")).toBeVisible();
+
+  await button(page, /Host counter: 0/).click();
+  await expect(button(page, /Host counter: 1/)).toBeVisible();
+  await button(page, /SSR counter: 0/).click();
+  await expect(button(page, /SSR counter: 1/)).toBeVisible();
+
+  const remoteCounters = page.getByRole("button", {
+    name: /Remote counter: 0/,
+  });
+  await expect(remoteCounters).toHaveCount(2);
+  await remoteCounters.first().click();
+  await remoteCounters.last().click();
+  await expect(
+    page.getByRole("button", { name: /Remote counter: 1/ }),
+  ).toHaveCount(2);
+
+  await button(page, /Island counter: 18/).click();
+  await expect(button(page, /Island counter: 19/)).toBeVisible();
+});

package.json

@@ -36,6 +36,7 @@
     "preview": "pnpm run build:apps && pnpm --filter 'vinext-*' --parallel preview",
     "release": "pnpm run build:package && changeset publish",
     "test": "pnpm run build:package && node --test",
+    "test:e2e": "playwright test --config=playwright.config.mjs",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "version": "changeset version && pnpm install --lockfile-only --ignore-scripts",
     "prepack": "pnpm run build:package"
@@ -59,6 +60,7 @@
     "vinext": ">=1.0.0-beta.3"
   },
   "devDependencies": {
+    "@playwright/test": "1.62.0",
     "@changesets/cli": "^2.31.1",
     "typescript": "^7.0.2"
   }

playwright.config.mjs

@@ -0,0 +1,21 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  outputDir: "reports/e2e/output",
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [["html", { outputFolder: "reports/e2e/html" }]],
+  use: {
+    baseURL: "http://localhost:4173",
+    trace: "on-first-retry",
+  },
+  projects: [{ name: "chromium", use: { ...devices["Desktop Chrome"] } }],
+  webServer: {
+    command: "pnpm preview",
+    url: "http://localhost:4173",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+  },
+});