chore: initial playwright setup

frontend/e2e/utils/login.util.ts

@@ -1,9 +1,8 @@
 import { Page } from '@playwright/test';
 
 // Read credentials from environment variables
-const username = process.env.LOGIN_USERNAME;
-const password = process.env.LOGIN_PASSWORD;
-const baseURL = process.env.BASE_URL;
+const username = process.env.SIGNOZ_E2E_USERNAME;
+const password = process.env.SIGNOZ_E2E_PASSWORD;
 
 /**
  * Ensures the user is logged in. If not, performs the login steps.
@@ -11,17 +10,17 @@ const baseURL = process.env.BASE_URL;
  */
 export async function ensureLoggedIn(page: Page): Promise<void> {
 	// if already in home page, return
-	if (await page.url().includes('/home')) {
+	if (page.url().includes('/home')) {
 		return;
 	}
 
 	if (!username || !password) {
 		throw new Error(
-			'E2E_EMAIL and E2E_PASSWORD environment variables must be set.',
+			'SIGNOZ_E2E_USERNAME and SIGNOZ_E2E_PASSWORD environment variables must be set.',
 		);
 	}
 
-	await page.goto(`${baseURL}/login`);
+	await page.goto('/login');
 	await page.getByTestId('email').click();
 	await page.getByTestId('email').fill(username);
 	await page.getByTestId('initiate_login').click();

frontend/example.env

@@ -4,4 +4,9 @@ FRONTEND_API_ENDPOINT="http://localhost:8080/"
 PYLON_APP_ID="pylon-app-id"
 APPCUES_APP_ID="appcess-app-id"
 
-CI="1"
+CI="1"
+
+# Playwright E2E Test Configuration
+SIGNOZ_E2E_BASE_URL="your-dev-environment-url"
+SIGNOZ_E2E_USERNAME="your-email@example.com"
+SIGNOZ_E2E_PASSWORD="your-password"

frontend/package.json

@@ -18,7 +18,12 @@
 		"husky:configure": "cd .. && husky install frontend/.husky && cd frontend && chmod ug+x .husky/*",
 		"commitlint": "commitlint --edit $1",
 		"test": "jest",
-		"test:changedsince": "jest --changedSince=main --coverage --silent"
+		"test:changedsince": "jest --changedSince=main --coverage --silent",
+		"e2e": "playwright test",
+		"e2e:ui": "playwright test --ui",
+		"e2e:headed": "playwright test --headed",
+		"e2e:debug": "playwright test --debug",
+		"e2e:report": "playwright show-report"
 	},
 	"engines": {
 		"node": ">=16.15.0"

frontend/playwright.config.ts

@@ -45,14 +45,7 @@ export default defineConfig({
 	projects: [
 		{
 			name: 'chromium',
-			use: {
-				launchOptions: { args: ['--start-maximized'] },
-				viewport: null,
-				colorScheme: 'dark',
-				locale: 'en-US',
-				baseURL: 'https://app.us.staging.signoz.cloud',
-				trace: 'on-first-retry',
-			},
+			use: { ...devices['Desktop Chrome'] },
 		},
 
 		{

frontend_automation/.env.example

@@ -0,0 +1,11 @@
+# Copy this to .env and fill in your values
+
+# Base URL for the application
+SIGNOZ_E2E_BASE_URL=https://app.us.staging.signoz.cloud
+
+# Test credentials
+SIGNOZ_E2E_USERNAME=
+SIGNOZ_E2E_PASSWORD=
+
+# API endpoint (if needed)
+SIGNOZ_E2E_API_URL=https://api.us.staging.signoz.cloud

frontend_automation/.github/chatmodes/ 🎭 planner.chatmode.md

@@ -0,0 +1,92 @@
+---
+description: Use this agent when you need to create comprehensive test plan for a web application or website.
+tools: ['edit/createFile', 'edit/createDirectory', 'search/fileSearch', 'search/textSearch', 'search/listDirectory', 'search/readFile', 'playwright-test/browser_click', 'playwright-test/browser_close', 'playwright-test/browser_console_messages', 'playwright-test/browser_drag', 'playwright-test/browser_evaluate', 'playwright-test/browser_file_upload', 'playwright-test/browser_handle_dialog', 'playwright-test/browser_hover', 'playwright-test/browser_navigate', 'playwright-test/browser_navigate_back', 'playwright-test/browser_network_requests', 'playwright-test/browser_press_key', 'playwright-test/browser_select_option', 'playwright-test/browser_snapshot', 'playwright-test/browser_take_screenshot', 'playwright-test/browser_type', 'playwright-test/browser_wait_for', 'playwright-test/planner_setup_page']
+---
+
+You are an expert web test planner with extensive experience in quality assurance, user experience testing, and test
+scenario design. Your expertise includes functional testing, edge case identification, and comprehensive test coverage
+planning.
+
+You will:
+
+1. **Navigate and Explore**
+   - Invoke the `planner_setup_page` tool once to set up page before using any other tools
+   - Explore the browser snapshot
+   - Do not take screenshots unless absolutely necessary
+   - Use browser_* tools to navigate and discover interface
+   - Thoroughly explore the interface, identifying all interactive elements, forms, navigation paths, and functionality
+
+2. **Analyze User Flows**
+   - Map out the primary user journeys and identify critical paths through the application
+   - Consider different user types and their typical behaviors
+
+3. **Design Comprehensive Scenarios**
+
+   Create detailed test scenarios that cover:
+   - Happy path scenarios (normal user behavior)
+   - Edge cases and boundary conditions
+   - Error handling and validation
+
+4. **Structure Test Plans**
+
+   Each scenario must include:
+   - Clear, descriptive title
+   - Detailed step-by-step instructions
+   - Expected outcomes where appropriate
+   - Assumptions about starting state (always assume blank/fresh state)
+   - Success criteria and failure conditions
+
+5. **Create Documentation**
+
+   Save your test plan as requested:
+   - Executive summary of the tested page/application
+   - Individual scenarios as separate sections
+   - Each scenario formatted with numbered steps
+   - Clear expected results for verification
+
+<example-spec>
+# TodoMVC Application - Comprehensive Test Plan
+
+## Application Overview
+
+The TodoMVC application is a React-based todo list manager that provides core task management functionality. The
+application features:
+
+- **Task Management**: Add, edit, complete, and delete individual todos
+- **Bulk Operations**: Mark all todos as complete/incomplete and clear all completed todos
+- **Filtering**: View todos by All, Active, or Completed status
+- **URL Routing**: Support for direct navigation to filtered views via URLs
+- **Counter Display**: Real-time count of active (incomplete) todos
+- **Persistence**: State maintained during session (browser refresh behavior not tested)
+
+## Test Scenarios
+
+### 1. Adding New Todos
+
+**Seed:** `tests/seed.spec.ts`
+
+#### 1.1 Add Valid Todo
+**Steps:**
+1. Click in the "What needs to be done?" input field
+2. Type "Buy groceries"
+3. Press Enter key
+
+**Expected Results:**
+- Todo appears in the list with unchecked checkbox
+- Counter shows "1 item left"
+- Input field is cleared and ready for next entry
+- Todo list controls become visible (Mark all as complete checkbox)
+
+#### 1.2
+...
+</example-spec>
+
+**Quality Standards**:
+- Write steps that are specific enough for any tester to follow
+- Include negative testing scenarios
+- Ensure scenarios are independent and can be run in any order
+
+**Output Format**: Always save the complete test plan as a markdown file with clear headings, numbered steps, and
+professional formatting suitable for sharing with development and QA teams.
+<example>Context: User wants to test a new e-commerce checkout flow. user: 'I need test scenarios for our new checkout process at https://mystore.com/checkout' assistant: 'I'll use the planner agent to navigate to your checkout page and create comprehensive test scenarios.' <commentary> The user needs test planning for a specific web page, so use the planner agent to explore and create test scenarios. </commentary></example>
+<example>Context: User has deployed a new feature and wants thorough testing coverage. user: 'Can you help me test our new user dashboard at https://app.example.com/dashboard?' assistant: 'I'll launch the planner agent to explore your dashboard and develop detailed test scenarios.' <commentary> This requires web exploration and test scenario creation, perfect for the planner agent. </commentary></example>

frontend_automation/.github/chatmodes/🎭 generator.chatmode.md

@@ -0,0 +1,58 @@
+---
+description: Use this agent when you need to create automated browser tests using Playwright.
+tools: ['search/fileSearch', 'search/textSearch', 'search/listDirectory', 'search/readFile', 'playwright-test/browser_click', 'playwright-test/browser_drag', 'playwright-test/browser_evaluate', 'playwright-test/browser_file_upload', 'playwright-test/browser_handle_dialog', 'playwright-test/browser_hover', 'playwright-test/browser_navigate', 'playwright-test/browser_press_key', 'playwright-test/browser_select_option', 'playwright-test/browser_snapshot', 'playwright-test/browser_type', 'playwright-test/browser_verify_element_visible', 'playwright-test/browser_verify_list_visible', 'playwright-test/browser_verify_text_visible', 'playwright-test/browser_verify_value', 'playwright-test/browser_wait_for', 'playwright-test/generator_read_log', 'playwright-test/generator_setup_page', 'playwright-test/generator_write_test']
+---
+
+You are a Playwright Test Generator, an expert in browser automation and end-to-end testing.
+Your specialty is creating robust, reliable Playwright tests that accurately simulate user interactions and validate
+application behavior.
+
+# For each test you generate
+- Obtain the test plan with all the steps and verification specification
+- Run the `generator_setup_page` tool to set up page for the scenario
+- For each step and verification in the scenario, do the following:
+  - Use Playwright tool to manually execute it in real-time.
+  - Use the step description as the intent for each Playwright tool call.
+- Retrieve generator log via `generator_read_log`
+- Immediately after reading the test log, invoke `generator_write_test` with the generated source code
+  - File should contain single test
+  - File name must be fs-friendly scenario name
+  - Test must be placed in a describe matching the top-level test plan item
+  - Test title must match the scenario name
+  - Includes a comment with the step text before each step execution. Do not duplicate comments if step requires
+    multiple actions.
+  - Always use best practices from the log when generating tests.
+
+   <example-generation>
+   For following plan:
+
+   ```markdown file=specs/plan.md
+   ### 1. Adding New Todos
+   **Seed:** `tests/seed.spec.ts`
+
+   #### 1.1 Add Valid Todo
+   **Steps:**
+   1. Click in the "What needs to be done?" input field
+
+   #### 1.2 Add Multiple Todos
+   ...
+   ```
+
+   Following file is generated:
+
+   ```ts file=add-valid-todo.spec.ts
+   // spec: specs/plan.md
+   // seed: tests/seed.spec.ts
+
+   test.describe('Adding New Todos', () => {
+     test('Add Valid Todo', async { page } => {
+       // 1. Click in the "What needs to be done?" input field
+       await page.click(...);
+
+       ...
+     });
+   });
+   ```
+   </example-generation>
+<example>Context: User wants to test a login flow on their web application. user: 'I need a test that logs into my app at localhost:3000 with username admin@test.com and password 123456, then verifies the dashboard page loads' assistant: 'I'll use the generator agent to create and validate this login test for you' <commentary> The user needs a specific browser automation test created, which is exactly what the generator agent is designed for. </commentary></example>
+<example>Context: User has built a new checkout flow and wants to ensure it works correctly. user: 'Can you create a test that adds items to cart, proceeds to checkout, fills in payment details, and confirms the order?' assistant: 'I'll use the generator agent to build a comprehensive checkout flow test' <commentary> This is a complex user journey that needs to be automated and tested, perfect for the generator agent. </commentary></example>

frontend_automation/.github/chatmodes/🎭 healer.chatmode.md

@@ -0,0 +1,44 @@
+---
+description: Use this agent when you need to debug and fix failing Playwright tests.
+tools: ['edit/createFile', 'edit/createDirectory', 'edit/editFiles', 'search/fileSearch', 'search/textSearch', 'search/listDirectory', 'search/readFile', 'playwright-test/browser_console_messages', 'playwright-test/browser_evaluate', 'playwright-test/browser_generate_locator', 'playwright-test/browser_network_requests', 'playwright-test/browser_snapshot', 'playwright-test/test_debug', 'playwright-test/test_list', 'playwright-test/test_run']
+---
+
+You are the Playwright Test Healer, an expert test automation engineer specializing in debugging and
+resolving Playwright test failures. Your mission is to systematically identify, diagnose, and fix
+broken Playwright tests using a methodical approach.
+
+Your workflow:
+1. **Initial Execution**: Run all tests using playwright_test_run_test tool to identify failing tests
+2. **Debug failed tests**: For each failing test run playwright_test_debug_test.
+3. **Error Investigation**: When the test pauses on errors, use available Playwright MCP tools to:
+   - Examine the error details
+   - Capture page snapshot to understand the context
+   - Analyze selectors, timing issues, or assertion failures
+4. **Root Cause Analysis**: Determine the underlying cause of the failure by examining:
+   - Element selectors that may have changed
+   - Timing and synchronization issues
+   - Data dependencies or test environment problems
+   - Application changes that broke test assumptions
+5. **Code Remediation**: Edit the test code to address identified issues, focusing on:
+   - Updating selectors to match current application state
+   - Fixing assertions and expected values
+   - Improving test reliability and maintainability
+   - For inherently dynamic data, utilize regular expressions to produce resilient locators
+6. **Verification**: Restart the test after each fix to validate the changes
+7. **Iteration**: Repeat the investigation and fixing process until the test passes cleanly
+
+Key principles:
+- Be systematic and thorough in your debugging approach
+- Document your findings and reasoning for each fix
+- Prefer robust, maintainable solutions over quick hacks
+- Use Playwright best practices for reliable test automation
+- If multiple errors exist, fix them one at a time and retest
+- Provide clear explanations of what was broken and how you fixed it
+- You will continue this process until the test runs successfully without any failures or errors.
+- If the error persists and you have high level of confidence that the test is correct, mark this test as test.fixme()
+  so that it is skipped during the execution. Add a comment before the failing step explaining what is happening instead
+  of the expected behavior.
+- Do not ask user questions, you are not interactive tool, do the most reasonable thing possible to pass the test.
+- Never wait for networkidle or use other discouraged or deprecated apis
+<example>Context: A developer has a failing Playwright test that needs to be debugged and fixed. user: 'The login test is failing, can you fix it?' assistant: 'I'll use the healer agent to debug and fix the failing login test.' <commentary> The user has identified a specific failing test that needs debugging and fixing, which is exactly what the healer agent is designed for. </commentary></example>
+<example>Context: After running a test suite, several tests are reported as failing. user: 'Test user-registration.spec.ts is broken after the recent changes' assistant: 'Let me use the healer agent to investigate and fix the user-registration test.' <commentary> A specific test file is failing and needs debugging, which requires the systematic approach of the playwright-test-healer agent. </commentary></example>

frontend_automation/.gitignore

@@ -0,0 +1,11 @@
+node_modules/
+/test-results/
+/playwright-report/
+/playwright/.cache/
+.env
+.env.local
+dist/
+*.log
+yarn-error.log
+.yarn/cache
+.yarn/install-state.gz

frontend_automation/README.md

@@ -0,0 +1,257 @@
+# SigNoz Frontend Automation
+
+E2E tests for SigNoz frontend using Playwright.
+
+## Setup
+
+```bash
+# Install dependencies
+yarn install
+
+# Install Playwright browsers
+yarn install:browsers
+
+# Copy .env.example to .env and configure
+cp .env.example .env
+# Edit .env with your test credentials
+```
+
+## Running Tests
+
+```bash
+# Run all tests
+yarn test
+
+# Run in UI mode (interactive)
+yarn test:ui
+
+# Run in headed mode (see browser)
+yarn test:headed
+
+# Debug mode
+yarn test:debug
+
+# Run specific browser
+yarn test:chromium
+yarn test:firefox
+yarn test:webkit
+
+# View HTML report
+yarn report
+
+# Generate tests with Codegen
+yarn codegen
+```
+
+## Using Playwright Agents with Cursor
+
+### 🎭 Planner - Create Test Plans
+
+**In Cursor Chat:**
+```
+@.github/chatmodes/ 🎭 planner.chatmode.md @tests/seed.spec.ts
+
+Follow the planner instructions to create a comprehensive test plan for [feature name]
+Save to: specs/[feature-name].md
+```
+
+The planner will:
+- Use your seed test for context
+- Explore the application
+- Create a detailed test plan in `specs/[feature].md`
+
+### 🎭 Generator - Generate Tests
+
+**In Cursor Chat:**
+```
+@.github/chatmodes/🎭 generator.chatmode.md @specs/[feature].md @tests/seed.spec.ts
+
+Follow the generator instructions to generate Playwright tests from the test plan
+Save to: tests/[feature]/
+```
+
+The generator will:
+- Read the test plan
+- Create test files in `tests/[feature]/`
+- Use proper locators and assertions
+- Follow seed.spec.ts patterns
+
+### 🎭 Healer - Fix Failing Tests
+
+**In Cursor Chat:**
+```
+@.github/chatmodes/🎭 healer.chatmode.md @tests/[feature]/[test].spec.ts
+
+Follow the healer instructions to fix the failing test: [test name]
+Error: [paste error message]
+```
+
+The healer will:
+- Replay failing steps
+- Update locators if needed
+- Add proper waits
+- Re-run until passing
+
+## Directory Structure
+
+```
+frontend_automation/
+├── .github/
+│   └── chatmodes/              # Playwright agent definitions
+│       ├──  🎭 planner.chatmode.md
+│       ├── 🎭 generator.chatmode.md
+│       └── 🎭 healer.chatmode.md
+├── .vscode/
+│   └── mcp.json               # MCP server config
+├── specs/                     # Test plans (Markdown)
+│   └── example-test-plan.md
+├── tests/                     # Test files (.spec.ts)
+│   └── seed.spec.ts
+├── utils/                     # Utilities and helpers
+│   └── login.util.ts
+├── .env                       # Environment variables (git-ignored)
+├── .env.example               # Environment template
+├── .gitignore
+├── package.json
+├── playwright.config.ts       # Playwright configuration
+├── tsconfig.json              # TypeScript configuration
+├── yarn.lock                  # Yarn lock file
+└── README.md
+```
+
+## Environment Variables
+
+| Variable | Description | Example |
+|----------|-------------|---------|
+| `SIGNOZ_E2E_BASE_URL` | Base URL of the application | `https://app.us.staging.signoz.cloud` |
+| `SIGNOZ_E2E_USERNAME` | Test user email | `test@example.com` |
+| `SIGNOZ_E2E_PASSWORD` | Test user password | `your-password` |
+| `SIGNOZ_E2E_API_URL` | API endpoint (optional) | `https://api.us.staging.signoz.cloud` |
+
+## Workflow Example
+
+### Complete Test Creation Flow
+
+```bash
+# 1. In Cursor Chat, create test plan
+@.github/chatmodes/ 🎭 planner.chatmode.md @tests/seed.spec.ts
+
+Create a test plan for: routing policies feature
+Save to: specs/routing-policies.md
+
+# 2. Review the generated plan in specs/routing-policies.md
+# Edit if needed
+
+# 3. Generate tests from the plan
+@.github/chatmodes/🎭 generator.chatmode.md @specs/routing-policies.md @tests/seed.spec.ts
+
+Generate tests and save to: tests/routing-policies/
+
+# 4. Run the tests
+yarn test:ui
+
+# 5. If any test fails, heal it
+@.github/chatmodes/🎭 healer.chatmode.md @tests/routing-policies/[failing-test].spec.ts
+
+Fix the failing test
+
+# 6. Re-run to verify
+yarn test
+```
+
+## CI/CD Integration
+
+Example GitHub Actions workflow:
+
+```yaml
+# .github/workflows/e2e.yml
+name: E2E Tests
+
+on: [push, pull_request]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'yarn'
+          
+      - name: Install dependencies
+        run: yarn install
+        working-directory: frontend_automation
+        
+      - name: Install Playwright browsers
+        run: yarn install:browsers
+        working-directory: frontend_automation
+        
+      - name: Run tests
+        run: yarn test
+        working-directory: frontend_automation
+        env:
+          SIGNOZ_E2E_BASE_URL: ${{ secrets.E2E_BASE_URL }}
+          SIGNOZ_E2E_USERNAME: ${{ secrets.E2E_USERNAME }}
+          SIGNOZ_E2E_PASSWORD: ${{ secrets.E2E_PASSWORD }}
+          
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: frontend_automation/playwright-report/
+          retention-days: 30
+```
+
+## Best Practices
+
+1. **Start with Seed Test** - Always reference `seed.spec.ts` for patterns
+2. **Review Generated Plans** - Edit test plans before generating tests
+3. **Use Semantic Locators** - Prefer `getByRole`, `getByLabel` over CSS selectors
+4. **Keep Plans Updated** - Update `specs/` when features change
+5. **Let Healer Work** - The healer can fix most locator and timing issues
+6. **Write Descriptive Tests** - Use clear test names and comments
+
+## Troubleshooting
+
+### Tests Won't Run
+- Check `.env` has correct credentials
+- Verify `baseURL` is accessible
+- Run `yarn test:debug` for detailed output
+
+### Locators Failing
+- Use the healer agent to fix them
+- Or use Playwright Inspector: `yarn test:debug`
+- Check if UI elements have changed
+
+### Authentication Issues
+- Verify `ensureLoggedIn()` function works
+- Check credentials in `.env`
+- Run seed test independently: `yarn test tests/seed.spec.ts`
+
+### Agents Not Working in Cursor
+- Ensure you're using `@` to reference chatmode files
+- Include seed test in context
+- Follow the agent instructions explicitly
+
+## Resources
+
+- [Playwright Documentation](https://playwright.dev)
+- [Playwright Agents](https://playwright.dev/docs/test-agents)
+- [Playwright Best Practices](https://playwright.dev/docs/best-practices)
+- [TypeScript Handbook](https://www.typescriptlang.org/docs/)
+
+## Contributing
+
+When adding new tests:
+1. Create a test plan in `specs/` first
+2. Use agents to generate tests
+3. Review and refine generated code
+4. Ensure tests follow existing patterns
+5. Add proper documentation
+
+## License
+
+MIT
+

frontend_automation/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "signoz-frontend-automation",
+  "version": "1.0.0",
+  "description": "E2E tests for SigNoz frontend with Playwright",
+  "main": "index.js",
+  "scripts": {
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "test:headed": "playwright test --headed",
+    "test:debug": "playwright test --debug",
+    "test:chromium": "playwright test --project=chromium",
+    "test:firefox": "playwright test --project=firefox",
+    "test:webkit": "playwright test --project=webkit",
+    "report": "playwright show-report",
+    "codegen": "playwright codegen",
+    "install:browsers": "playwright install"
+  },
+  "keywords": [
+    "playwright",
+    "e2e",
+    "testing",
+    "signoz"
+  ],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@playwright/test": "^1.57.0-alpha-2025-10-09",
+    "@types/node": "^20.0.0",
+    "dotenv": "^16.0.0",
+    "typescript": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "yarn": ">=1.22.0"
+  }
+}

frontend_automation/playwright.config.ts

@@ -0,0 +1,57 @@
+import { defineConfig, devices } from "@playwright/test";
+import dotenv from "dotenv";
+import path from "path";
+
+// Load environment variables
+dotenv.config({ path: path.resolve(__dirname, ".env") });
+
+export default defineConfig({
+  testDir: "./tests",
+
+  // Run tests in parallel
+  fullyParallel: true,
+
+  // Fail the build on CI if you accidentally left test.only
+  forbidOnly: !!process.env.CI,
+
+  // Retry on CI only
+  retries: process.env.CI ? 2 : 0,
+
+  // Workers
+  workers: process.env.CI ? 2 : undefined,
+
+  // Reporter
+  reporter: [
+    ["html"],
+    ["json", { outputFile: "test-results/results.json" }],
+    ["list"],
+  ],
+
+  // Shared settings
+  use: {
+    baseURL:
+      process.env.SIGNOZ_E2E_BASE_URL || "https://app.us.staging.signoz.cloud",
+    trace: "on-first-retry",
+    screenshot: "only-on-failure",
+    video: "retain-on-failure",
+    colorScheme: "dark",
+    locale: "en-US",
+    viewport: { width: 1280, height: 720 },
+  },
+
+  // Configure projects for multiple browsers
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+  ],
+});

frontend_automation/specs/example-test-plan.md

@@ -0,0 +1,76 @@
+# Example Feature - Test Plan Template
+
+## Application Overview
+
+[Describe the feature/module being tested. Include key functionality, user flows, and important business logic.]
+
+Example:
+> The Routing Policies feature allows users to create, edit, and manage alert routing configurations. Users can define rules that determine how alerts are routed to different channels based on conditions like severity, labels, or alert names.
+
+## Test Scenarios
+
+### 1. [Main Scenario Category]
+
+**Seed:** `tests/seed.spec.ts`
+
+#### 1.1 [Specific Test Case]
+
+**Pre-conditions:**
+- User is logged in (handled by seed test)
+- [Any other specific setup needed]
+
+**Steps:**
+1. Navigate to [specific page/section]
+2. Click on [element description]
+3. Fill in [field] with "[test data]"
+4. Click [button/action]
+5. Verify [expected outcome]
+
+**Expected Results:**
+- [Expected UI change or behavior]
+- [Expected data state]
+- [Expected navigation or feedback]
+
+**Data:**
+- Input field: "test value"
+- Select option: "option name"
+
+#### 1.2 [Another Test Case]
+
+**Steps:**
+1. ...
+
+**Expected Results:**
+- ...
+
+### 2. [Another Scenario Category]
+
+#### 2.1 [Test Case]
+
+**Steps:**
+1. ...
+
+**Expected Results:**
+- ...
+
+## Edge Cases
+
+### 3. Error Handling
+
+#### 3.1 Invalid Input
+
+**Steps:**
+1. Enter invalid data
+2. Attempt to submit
+
+**Expected Results:**
+- Error message displayed
+- Form not submitted
+- User remains on page
+
+## Notes
+
+- [Any special considerations]
+- [Known limitations]
+- [Areas requiring manual verification]
+

frontend_automation/tests/seed.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from "@playwright/test";
+import { ensureLoggedIn } from "../utils/login.util";
+
+/**
+ * Seed test for Playwright Agents
+ *
+ * This test serves as:
+ * 1. A foundation for all agent-generated tests
+ * 2. An example of test structure and patterns
+ * 3. Initial setup for authentication
+ */
+test("seed", async ({ page }) => {
+  // Login to the application
+  await ensureLoggedIn(page);
+
+  // Verify we're on the home page
+  await expect(page).toHaveURL(/.*\/home/);
+  await expect(page.getByText("Hello there, Welcome to your")).toBeVisible();
+});

frontend_automation/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "lib": ["ES2020"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "types": ["node", "@playwright/test"],
+    "baseUrl": ".",
+    "paths": {
+      "@tests/*": ["tests/*"],
+      "@utils/*": ["utils/*"],
+      "@specs/*": ["specs/*"]
+    },
+    "outDir": "./dist",
+    "rootDir": "."
+  },
+  "include": ["tests/**/*.ts", "utils/**/*.ts", "playwright.config.ts"],
+  "exclude": ["node_modules", "dist"]
+}

frontend_automation/utils/login.util.ts

@@ -0,0 +1,33 @@
+import { Page } from "@playwright/test";
+
+// Read credentials from environment variables
+const username = process.env.SIGNOZ_E2E_USERNAME;
+const password = process.env.SIGNOZ_E2E_PASSWORD;
+
+/**
+ * Ensures the user is logged in. If not, performs the login steps.
+ */
+export async function ensureLoggedIn(page: Page): Promise<void> {
+  // If already in home page, return
+  if (page.url().includes("/home")) {
+    return;
+  }
+
+  if (!username || !password) {
+    throw new Error(
+      "SIGNOZ_E2E_USERNAME and SIGNOZ_E2E_PASSWORD environment variables must be set."
+    );
+  }
+
+  await page.goto("/login");
+  await page.getByTestId("email").click();
+  await page.getByTestId("email").fill(username);
+  await page.getByTestId("initiate_login").click();
+  await page.getByTestId("password").click();
+  await page.getByTestId("password").fill(password);
+  await page.getByRole("button", { name: "Login" }).click();
+
+  await page
+    .getByText("Hello there, Welcome to your")
+    .waitFor({ state: "visible" });
+}

frontend_automation/yarn.lock

@@ -0,0 +1,51 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@playwright/test@^1.57.0-alpha-2025-10-11":
+  version "1.57.0-alpha-2025-10-11"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.57.0-alpha-2025-10-11.tgz#75f6fac2f98fcff6e4bae1c907b48ad0b1a33bea"
+  integrity sha512-xqp2RNcLCPSUAYCrP3+rYZ4LFlESvWqjjpFegjNbun7wLcGvUt9Mh+RHBvgeZAhMxxuVde78XO9Y888UYFH9ew==
+  dependencies:
+    playwright "1.57.0-alpha-2025-10-11"
+
+"@types/node@^24.7.1":
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-24.7.1.tgz#3f0b17eddcd965c9e337af22459b04bafbf96e5e"
+  integrity sha512-CmyhGZanP88uuC5GpWU9q+fI61j2SkhO3UGMUdfYRE6Bcy0ccyzn1Rqj9YAB/ZY4kOXmNf0ocah5GtphmLMP6Q==
+  dependencies:
+    undici-types "~7.14.0"
+
+dotenv@^17.2.3:
+  version "17.2.3"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-17.2.3.tgz#ad995d6997f639b11065f419a22fabf567cdb9a2"
+  integrity sha512-JVUnt+DUIzu87TABbhPmNfVdBDt18BLOWjMUFJMSi/Qqg7NTYtabbvSNJGOJ7afbRuv9D/lngizHtP7QyLQ+9w==
+
+fsevents@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+playwright-core@1.57.0-alpha-2025-10-11:
+  version "1.57.0-alpha-2025-10-11"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.57.0-alpha-2025-10-11.tgz#b444b75542a43bc354e512d076344d9258997e9c"
+  integrity sha512-X6KAunryZlslAdEdlN5gIIP3sFU6Uot3vzLoGCZ9SNv0JvXd6e2g7ArjnpOQld36yKszq8J+wQJRlIvdXkIvRw==
+
+playwright@1.57.0-alpha-2025-10-11:
+  version "1.57.0-alpha-2025-10-11"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.57.0-alpha-2025-10-11.tgz#af67a28d64b39fe57eea454b2b312e98bfff02a5"
+  integrity sha512-a80kAd59up/kURcKE7THLzx3lN6a1G9RhsgP9ZfLGL7WtnOhOdRLxbHwmjWUG11ybEDeYNpj1qwT02MT4R+rew==
+  dependencies:
+    playwright-core "1.57.0-alpha-2025-10-11"
+  optionalDependencies:
+    fsevents "2.3.2"
+
+typescript@^5.9.3:
+  version "5.9.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.9.3.tgz#5b4f59e15310ab17a216f5d6cf53ee476ede670f"
+  integrity sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==
+
+undici-types@~7.14.0:
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-7.14.0.tgz#4c037b32ca4d7d62fae042174604341588bc0840"
+  integrity sha512-QQiYxHuyZ9gQUIrmPo3IA+hUl4KYk8uSA7cHrcKd/l3p1OTpZcM0Tbp9x7FAtXdAYhlasd60ncPpgu6ihG6TOA==