feat(frontend): add e2e tests

.gitignore

@@ -132,3 +132,7 @@ dist
 
 # Watt resolved folder
 external/
+
+# Playwright
+test-results
+playwright-report

package.json

@@ -8,10 +8,13 @@
     "start": "wattpm start",
     "client:openapi": "cd web/backend && node --experimental-strip-types utils/client.openapi.ts",
     "client:generate": "./node_modules/.bin/plt-client ./web/backend/openapi.json --name backend --folder web/frontend/src/client --language ts --frontend --full --skip-config-update --props-optional",
-    "test": "npm run test:cli && npm run test:backend && npm run test:frontend",
+    "test": "npm run test:cli && npm run test:e2e && npm run test:backend && npm run test:frontend",
     "test:cli": "node --test test/cli.test.js test/start.test.js test/cli-integration.test.js",
     "test:backend": "cd web/backend && borp --concurrency 1",
     "test:frontend": "cd web/frontend && vitest run",
+    "pretest:e2e": "./node_modules/.bin/playwright install chromium",
+    "test:e2e": "cd web/frontend && playwright test",
+    "test:e2e:ui": "npm run test:e2e -- --ui",
     "clean": "rm -rf ./web/*/dist",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
@@ -35,6 +38,7 @@
     "@inquirer/testing": "^2.1.45",
     "@platformatic/client-cli": "^2.58.0",
     "@platformatic/ui-components": "^0.15.2",
+    "@playwright/test": "^1.52.0",
     "@types/d3": "^7.4.3",
     "@types/proxyquire": "1.3.31",
     "@types/react-dom": "^19.0.4",
@@ -48,6 +52,7 @@
     "eslint": "^9.22.0",
     "fastify-tsconfig": "^2.0.0",
     "neostandard": "^0.12.1",
+    "playwright": "^1.52.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.0.0",

web/frontend/playwright.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig, devices } from '@playwright/test'
+
+const PORT = process.env.PORT || '5042'
+const baseURL = `http://127.0.0.1:${PORT}`
+
+export default defineConfig({
+  testDir: './test/e2e',
+  fullyParallel: true,
+  reporter: 'html',
+  use: { baseURL, trace: 'on-first-retry' },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: {
+    command: 'cd ../.. && npm run dev',
+    url: baseURL,
+    timeout: 10000,
+    stdout: 'pipe',
+    stderr: 'pipe',
+    env: { PORT }
+  },
+})

web/frontend/test/e2e/basic.spec.ts

@@ -0,0 +1,35 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('Basic E2E tests', () => {
+  test('should load the main functionalities', async ({ page }) => {
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+
+    // home
+    await expect(page).toHaveTitle(/Watt admin/)
+    await expect(page.locator('body')).toBeVisible()
+    await expect(page.getByText('@platformatic/watt-admin')).toBeVisible()
+    await expect(page.getByText('NodeJS Metrics')).toBeVisible()
+    await expect(page.getByText('Services')).toBeVisible()
+    await expect(page.getByText('backend')).toHaveCount(1)
+    await expect(page.getByText('frontend')).toHaveCount(1)
+    await expect(page.getByText('composer')).toHaveCount(2)
+
+    // services
+    await page.goto('/#/services')
+    await page.getByText('Show Aggregated Metrics').waitFor()
+    await expect(page.getByText('backend Memory')).toHaveCount(1)
+    await expect(page.getByText('Aggregated Service Latency')).toHaveCount(1)
+    await page.getByText('frontend').click()
+    await expect(page.getByText('frontend CPU & ELU')).toHaveCount(1)
+    await page.getByText('(Entrypoint)').click()
+    await expect(page.getByText('composer Latency')).toHaveCount(1)
+    await expect(page.getByText('composer Requests')).toHaveCount(1)
+
+    // logs
+    await page.goto('/#/logs')
+    await page.getByText('Select all services').waitFor()
+    await page.getByText('Trace').click()
+    await page.getByText('Server listening at').waitFor()
+  })
+})

web/frontend/vitest.config.ts

@@ -5,7 +5,7 @@ export default defineConfig({
   ...viteConfig,
   test: {
     globals: true,
-    exclude: ['node_modules', 'dist', '.idea', '.git', '.cache'],
+    exclude: ['node_modules', 'dist', '.idea', '.git', '.cache', 'test/e2e'],
     include: ['**/*.{test,spec}.{js,ts,jsx,tsx}']
   }
 })