chore: Run playwright tests with mongo backend (#1493)

Enables broader testing

Fixes: HDX-3069

To test:
- By default `make e2e` runs playwright tests with a docker compose for mongo
- To test the local-only mode, run `make e2e local=true`
- Since we manage play.hyperdx.io, I envision us running both commands on release

Author: teeohhem

.github/workflows/main.yml

@@ -104,6 +104,16 @@ jobs:
     timeout-minutes: 15
     container:
       image: mcr.microsoft.com/playwright:v1.57.0-jammy
+      options: --network-alias playwright
+    services:
+      mongodb:
+        image: mongo:5.0.14-focal
+        options: >-
+          --health-cmd "mongosh --quiet --eval 'db.adminCommand({ping: 1});
+          db.getSiblingDB(\"test\").test.insertOne({_id: \"hc\"});
+          db.getSiblingDB(\"test\").test.deleteOne({_id: \"hc\"})'"
+          --health-interval 10s --health-timeout 5s --health-retries 10
+          --health-start-period 10s
     permissions:
       contents: read
       pull-requests: write
@@ -129,7 +139,15 @@ jobs:
       - name: Build dependencies
         run: npx nx run-many -t ci:build
 
-      - name: Run Playwright tests
+      - name: Run Playwright tests (full-stack mode)
+        # MongoDB service health check ensures it's ready before this step runs
+        # Note: Tests use ClickHouse demo instance (otel_demo with empty password)
+        # This is intentionally public - it's ClickHouse's read-only demo instance
+        env:
+          E2E_FULLSTACK: 'true'
+          E2E_UNIQUE_USER: 'true'
+          E2E_API_HEALTH_CHECK_MAX_RETRIES: '60'
+          MONGO_URI: mongodb://mongodb:27017/hyperdx-e2e
         run: |
           cd packages/app
           yarn test:e2e --shard=${{ matrix.shard }}/4

.gitignore

@@ -59,6 +59,7 @@ e2e/cypress/results
 **/test-results/
 **/playwright-report/
 **/playwright/.cache/
+**/.auth/
 
 # scripts
 scripts/*.csv

Makefile

@@ -67,14 +67,23 @@ ci-unit:
 
 .PHONY: e2e
 e2e:
-	@if [ -z "$(tags)" ]; then \
-		echo "Running all E2E tests in local mode..."; \
-		cd packages/app && yarn test:e2e; \
+	@# Run full-stack by default (MongoDB + API + demo ClickHouse)
+	@# Use 'make e2e local=true' to skip MongoDB and run local mode only
+	@if [ "$(local)" = "true" ]; then \
+		if [ -z "$(tags)" ]; then \
+			./scripts/test-e2e.sh --local; \
+		else \
+			./scripts/test-e2e.sh --local --tags "$(tags)"; \
+		fi; \
 	else \
-		echo "Running E2E tests with tags: $(tags)"; \
-		cd packages/app && yarn test:e2e --grep "$(tags)"; \
+		if [ -z "$(tags)" ]; then \
+			./scripts/test-e2e.sh; \
+		else \
+			./scripts/test-e2e.sh --tags "$(tags)"; \
+		fi; \
 	fi
 
+
 # TODO: check db connections before running the migration CLIs
 .PHONY: dev-migrate-db
 dev-migrate-db:

packages/api/.env.e2e

@@ -0,0 +1,19 @@
+# ClickHouse connection to public demo instance
+# Password is intentionally empty - this is a read-only public demo instance
+CLICKHOUSE_HOST=https://sql-clickhouse.clickhouse.com
+CLICKHOUSE_PASSWORD=
+CLICKHOUSE_USER=otel_demo
+RUN_SCHEDULED_TASKS_EXTERNALLY=true
+FRONTEND_URL=http://localhost:28081
+# MongoDB connection string
+# Local: Uses custom port 29998 to avoid conflicts with existing MongoDB instances
+# CI: Overridden via MONGO_URI env var to mongodb://mongodb:27017/hyperdx-e2e
+MONGO_URI=mongodb://localhost:29998/hyperdx-e2e
+NODE_ENV=test
+PORT=29000
+OPAMP_PORT=24320
+
+# Auto-create default connections and sources for new teams
+# Uses public demo ClickHouse instance with pre-populated data
+DEFAULT_CONNECTIONS='[{"name":"Demo ClickHouse","host":"https://sql-clickhouse.clickhouse.com","username":"otel_demo","password":""}]'
+DEFAULT_SOURCES='[{"from":{"databaseName":"otel_v2","tableName":"otel_logs"},"kind":"log","timestampValueExpression":"TimestampTime","name":"Demo Logs","displayedTimestampValueExpression":"Timestamp","implicitColumnExpression":"Body","serviceNameExpression":"ServiceName","eventAttributesExpression":"LogAttributes","resourceAttributesExpression":"ResourceAttributes","defaultTableSelectExpression":"Timestamp,ServiceName,SeverityText,Body","severityTextExpression":"SeverityText","traceIdExpression":"TraceId","spanIdExpression":"SpanId","connection":"Demo ClickHouse","traceSourceId":"Traces","metricSourceId":"Demo Metrics"},{"from":{"databaseName":"otel_v2","tableName":"otel_traces"},"kind":"trace","timestampValueExpression":"Timestamp","name":"Demo Traces","displayedTimestampValueExpression":"Timestamp","implicitColumnExpression":"SpanName","serviceNameExpression":"ServiceName","eventAttributesExpression":"SpanAttributes","resourceAttributesExpression":"ResourceAttributes","defaultTableSelectExpression":"Timestamp,ServiceName,StatusCode,round(Duration/1e6),SpanName","traceIdExpression":"TraceId","spanIdExpression":"SpanId","durationExpression":"Duration","durationPrecision":9,"parentSpanIdExpression":"ParentSpanId","spanNameExpression":"SpanName","spanKindExpression":"SpanKind","statusCodeExpression":"StatusCode","statusMessageExpression":"StatusMessage","connection":"Demo ClickHouse","logSourceId":"Demo Logs","metricSourceId":"Demo Metrics"},{"from":{"databaseName":"otel_v2","tableName":""},"kind":"metric","timestampValueExpression":"TimeUnix","name":"Demo Metrics","resourceAttributesExpression":"ResourceAttributes","serviceNameExpression":"ServiceName","metricTables":{"gauge":"otel_metrics_gauge","histogram":"otel_metrics_histogram","sum":"otel_metrics_sum","summary":"otel_metrics_summary","exponential histogram":"otel_metrics_exponential_histogram"},"connection":"Demo ClickHouse","logSourceId":"Demo Logs","traceSourceId":"Demo Traces"}]'

packages/app/.gitignore

@@ -6,3 +6,6 @@
 next.config.original.js
 
 public/__ENV.js
+
+# E2E test authentication state
+tests/e2e/.auth/

packages/app/package.json

@@ -17,9 +17,7 @@
     "ci:lint": "yarn lint && yarn tsc --noEmit && yarn lint:styles --quiet",
     "ci:unit": "jest --ci --coverage",
     "dev:unit": "jest --watchAll --detectOpenHandles",
-    "test:e2e": "playwright test",
-    "test:e2e:ui": "playwright test --ui",
-    "test:e2e:debug": "playwright test --debug",
+    "test:e2e": "node scripts/run-e2e.js",
     "test:e2e:ci": "../../scripts/test-e2e-ci.sh",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build",

packages/app/playwright.config.ts

@@ -1,12 +1,24 @@
 import { defineConfig, devices } from '@playwright/test';
+import path from 'path';
+
+// Check if we should use full-stack mode (with backend)
+const USE_FULLSTACK = process.env.E2E_FULLSTACK === 'true';
+const AUTH_FILE = path.join(__dirname, 'tests/e2e/.auth/user.json');
+
+// Timeout configuration constants (in milliseconds)
+const TEST_TIMEOUT_MS = 60 * 1000; // 60 seconds per test
+const API_SERVER_STARTUP_TIMEOUT_MS = 120 * 1000; // 2 minutes for API to start
+const APP_SERVER_STARTUP_TIMEOUT_MS = 180 * 1000; // 3 minutes for Next.js build + start
 
 /**
  * @see https://playwright.dev/docs/test-configuration
  */
 export default defineConfig({
   testDir: './tests/e2e',
   /* Global setup to ensure server is ready */
-  globalSetup: require.resolve('./global-setup.js'),
+  globalSetup: USE_FULLSTACK
+    ? require.resolve('./tests/e2e/global-setup-fullstack.ts')
+    : require.resolve('./global-setup.js'),
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -26,7 +38,9 @@ export default defineConfig({
   /* 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: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:8081',
+    baseURL: USE_FULLSTACK
+      ? 'http://localhost:28081'
+      : process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:8081',
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
     /* Take screenshot on failure */
@@ -36,27 +50,57 @@ export default defineConfig({
   },
 
   /* Global test timeout - CI needs more time than local */
-  timeout: 60 * 1000,
+  timeout: TEST_TIMEOUT_MS,
 
   /* Configure projects for different test environments */
   projects: [
     {
       name: 'chromium',
       use: {
         ...devices['Desktop Chrome'],
+        // Use saved authentication state for full-stack mode
+        ...(USE_FULLSTACK && {
+          storageState: AUTH_FILE,
+        }),
       },
     },
   ],
 
   /* Run your local dev server before starting the tests */
-  webServer: {
-    command: process.env.CI
-      ? 'NEXT_PUBLIC_IS_LOCAL_MODE=true yarn build && NEXT_PUBLIC_IS_LOCAL_MODE=true PORT=8081 yarn start'
-      : 'NEXT_PUBLIC_IS_LOCAL_MODE=true NEXT_TELEMETRY_DISABLED=1 PORT=8081 yarn run dev',
-    port: 8081,
-    reuseExistingServer: !process.env.CI,
-    timeout: 180 * 1000,
-    stdout: 'pipe',
-    stderr: 'pipe',
-  },
+  // Note: webServer array syntax requires Playwright v1.32.0+ (current: v1.57.0)
+  webServer: USE_FULLSTACK
+    ? [
+        // Full-stack mode: Start API and App servers (infrastructure started separately)
+        {
+          // Loads configuration from .env.e2e (connections, settings)
+          // Environment variables (MONGO_URI, etc.) can override .env.e2e values
+          command: `cd ../api && ${process.env.MONGO_URI ? `MONGO_URI="${process.env.MONGO_URI}"` : ''} DOTENV_CONFIG_PATH=.env.e2e npx ts-node --transpile-only -r tsconfig-paths/register -r dotenv-expand/config -r @hyperdx/node-opentelemetry/build/src/tracing src/index.ts`,
+          port: 29000,
+          reuseExistingServer: !process.env.CI,
+          timeout: API_SERVER_STARTUP_TIMEOUT_MS,
+          stdout: 'pipe',
+          stderr: 'pipe',
+        },
+        {
+          command: process.env.CI
+            ? 'SERVER_URL=http://localhost:29000 PORT=28081 yarn build && SERVER_URL=http://localhost:29000 PORT=28081 yarn start'
+            : 'SERVER_URL=http://localhost:29000 PORT=28081 NEXT_TELEMETRY_DISABLED=1 yarn run dev',
+          port: 28081,
+          reuseExistingServer: !process.env.CI,
+          timeout: APP_SERVER_STARTUP_TIMEOUT_MS,
+          stdout: 'pipe',
+          stderr: 'pipe',
+        },
+      ]
+    : {
+        // Local mode: Frontend only
+        command: process.env.CI
+          ? 'NEXT_PUBLIC_IS_LOCAL_MODE=true yarn build && NEXT_PUBLIC_IS_LOCAL_MODE=true PORT=8081 yarn start'
+          : 'NEXT_PUBLIC_IS_LOCAL_MODE=true NEXT_TELEMETRY_DISABLED=1 PORT=8081 yarn run dev',
+        port: 8081,
+        reuseExistingServer: !process.env.CI,
+        timeout: APP_SERVER_STARTUP_TIMEOUT_MS,
+        stdout: 'pipe',
+        stderr: 'pipe',
+      },
 });

packages/app/scripts/run-e2e.js

@@ -0,0 +1,74 @@
+#!/usr/bin/env node
+
+/**
+ * E2E Test Runner
+ *
+ * Usage:
+ *   yarn test:e2e                    # Run all tests (full-stack mode, default)
+ *   yarn test:e2e --local            # Run frontend-only tests
+ *   yarn test:e2e --ui               # Open Playwright UI (full-stack)
+ *   yarn test:e2e --ui --local       # Open UI (local mode)
+ *   yarn test:e2e --debug            # Debug mode (full-stack)
+ *   yarn test:e2e --debug --local    # Debug (local mode)
+ */
+
+import { spawn } from 'child_process';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// Get __dirname equivalent in ES modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Parse command line arguments
+const args = process.argv.slice(2);
+const useLocal = args.includes('--local');
+const useUI = args.includes('--ui');
+const useDebug = args.includes('--debug');
+
+// Remove our custom flags from args
+const playwrightArgs = args.filter(
+  arg => !['--local', '--ui', '--debug'].includes(arg),
+);
+
+// Build playwright command
+const playwrightCmd = ['playwright', 'test'];
+
+// Add mode flags
+if (useUI) {
+  playwrightCmd.push('--ui');
+}
+if (useDebug) {
+  playwrightCmd.push('--debug');
+}
+
+// Add grep-invert for local mode (exclude @full-stack tests)
+if (useLocal) {
+  playwrightCmd.push('--grep-invert', '@full-stack');
+}
+
+// Add any additional playwright arguments
+playwrightCmd.push(...playwrightArgs);
+
+// Set environment variables
+const env = {
+  ...process.env,
+  ...(!useLocal && { E2E_FULLSTACK: 'true' }),
+};
+
+// Run playwright
+// eslint-disable-next-line no-console
+console.info(`Running: ${playwrightCmd.join(' ')}`);
+// eslint-disable-next-line no-console
+console.info(`Mode: ${useLocal ? 'Local (frontend only)' : 'Full-stack'}`);
+
+const child = spawn('npx', playwrightCmd, {
+  stdio: 'inherit',
+  shell: true,
+  env,
+  cwd: path.join(__dirname, '..'),
+});
+
+child.on('exit', code => {
+  process.exit(code);
+});