feat: add test:e2e

Author: xiaoyu2er

.gitignore

@@ -32,3 +32,6 @@ next-env.d.ts
 # content
 content2
 .vercel
+
+playwright-report
+test-results

apps/docs/package.json

@@ -13,7 +13,12 @@
     "start": "next start",
     "postinstall": "fumadocs-mdx",
     "translate": "node ../../packages/translate/dist/index.js",
-    "check-types": "tsc --noEmit"
+    "check-types": "tsc --noEmit",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "playwright test --headed",
+    "test:e2e:debug": "playwright test --debug",
+    "playwright:install": "playwright install"
   },
   "dependencies": {
     "@fumadocs/mdx-remote": "^1.3.2",
@@ -39,6 +44,7 @@
     "@next/bundle-analyzer": "^15.3.3",
     "@next/env": "^15.3.3",
     "@oramacloud/client": "^2.1.4",
+    "@playwright/test": "^1.52.0",
     "@tailwindcss/postcss": "^4.1.8",
     "@types/mdast": "^4.0.4",
     "@types/mdx": "^2.0.13",
@@ -51,6 +57,7 @@
     "github-slugger": "^2.0.0",
     "mdast": "^3.0.0",
     "mdast-util-mdx-jsx": "^3.2.0",
+    "playwright": "^1.52.0",
     "postcss": "^8.5.4",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.1",

apps/docs/playwright.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+  },
+});

apps/docs/tests/e2e/basic.spec.ts

@@ -0,0 +1,21 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Basic Route Tests', () => {
+  test('homepage loads successfully', async ({ page }) => {
+    const response = await page.goto('/');
+    expect(response?.status()).toBe(200);
+    await expect(page.locator('body')).toBeVisible();
+  });
+
+  test('blog page loads successfully', async ({ page }) => {
+    const response = await page.goto('/blog');
+    expect(response?.status()).toBe(200);
+    await expect(page.locator('body')).toBeVisible();
+  });
+
+  test('learn page loads successfully', async ({ page }) => {
+    const response = await page.goto('/learn');
+    expect(response?.status()).toBe(200);
+    await expect(page.locator('body')).toBeVisible();
+  });
+});

apps/docs/tests/e2e/static-routes.spec.ts

@@ -0,0 +1,15 @@
+import { expect, test } from '@playwright/test';
+import { getAllStaticRoutes } from './utils/static-routes';
+
+test.describe('All routes should return 200', () => {
+  const sampleRoutes = getAllStaticRoutes();
+
+  // biome-ignore lint/complexity/noForEach: <explanation>
+  sampleRoutes.forEach((route) => {
+    test(`${route.url}`, async ({ page }) => {
+      const response = await page.goto(route.url);
+      expect(response?.status()).toBe(200);
+      await expect(page.locator('body')).toBeVisible();
+    });
+  });
+});

apps/docs/tests/e2e/utils/static-routes.ts

@@ -0,0 +1,114 @@
+import { blog, docs, learn } from '../../../src/lib/source';
+
+export interface StaticRoute {
+  url: string;
+  params: Record<string, string | string[]>;
+  type: 'docs' | 'blog' | 'learn';
+}
+
+/**
+ * Extract all static routes that should be generated by generateStaticParams
+ */
+export function getAllStaticRoutes(): StaticRoute[] {
+  const routes: StaticRoute[] = [];
+
+  // Get docs routes - use the actual URLs from the source
+  try {
+    const docsPages = docs.getPages();
+    for (const page of docsPages) {
+      routes.push({
+        url: page.url,
+        params: { slug: page.slugs },
+        type: 'docs',
+      });
+    }
+  } catch (error) {
+    console.error('Failed to get docs pages:', error);
+  }
+
+  // Get blog routes
+  try {
+    const blogPages = blog.getPages();
+    for (const page of blogPages) {
+      routes.push({
+        url: page.url,
+        params: { slug: page.slugs },
+        type: 'blog',
+      });
+    }
+  } catch (error) {
+    console.error('Failed to get blog pages:', error);
+  }
+
+  // Get learn routes - use the actual URLs from the source
+  try {
+    const learnPages = learn.getPages();
+    for (const page of learnPages) {
+      routes.push({
+        url: page.url,
+        params: { slug: page.slugs },
+        type: 'learn',
+      });
+    }
+  } catch (error) {
+    console.error('Failed to get learn pages:', error);
+  }
+
+  return routes;
+}
+
+/**
+ * Group routes by type for easier testing
+ */
+export function getRoutesByType() {
+  const allRoutes = getAllStaticRoutes();
+
+  return {
+    docs: allRoutes.filter((route) => route.type === 'docs'),
+    blog: allRoutes.filter((route) => route.type === 'blog'),
+    learn: allRoutes.filter((route) => route.type === 'learn'),
+    all: allRoutes,
+  };
+}
+
+/**
+ * Get a sample of routes for quick testing
+ */
+export function getSampleRoutes(limit = 10): StaticRoute[] {
+  const routes = getAllStaticRoutes();
+
+  // Get a balanced sample from each type
+  const sampleSize = Math.ceil(limit / 3);
+  const routesByType = getRoutesByType();
+
+  return [
+    ...routesByType.docs.slice(0, sampleSize),
+    ...routesByType.blog.slice(0, sampleSize),
+    ...routesByType.learn.slice(0, sampleSize),
+  ].slice(0, limit);
+}
+
+/**
+ * Clean URL by removing fragments that might cause navigation issues
+ */
+export function cleanUrl(url: string): string {
+  // Remove URL fragments (#) that can cause timeouts in tests
+  return url.split('#')[0];
+}
+
+/**
+ * Check if a URL has fragments that might cause navigation issues
+ */
+export function hasUrlFragments(url: string): boolean {
+  return url.includes('#');
+}
+
+/**
+ * Get routes suitable for e2e testing (clean URLs without fragments)
+ */
+export function getTestableRoutes(): StaticRoute[] {
+  return getAllStaticRoutes().map((route) => ({
+    ...route,
+    url: cleanUrl(route.url),
+  }));
+}