Skip to content

feat: add comprehensive playwright test suite for dashboard#1476

Open
simplesagar wants to merge 5 commits intomainfrom
claude/analyze-playwright-tests-5kfts
Open

feat: add comprehensive playwright test suite for dashboard#1476
simplesagar wants to merge 5 commits intomainfrom
claude/analyze-playwright-tests-5kfts

Conversation

@simplesagar
Copy link
Member

@simplesagar simplesagar commented Feb 3, 2026

Summary

This PR adds a complete end-to-end test suite for the Gram Dashboard using Playwright. The test suite covers critical user flows including authentication, deployments, playground functionality, settings management, and home dashboard features.

Key Changes

  • Test Fixtures (e2e/fixtures/test-fixtures.ts): Created reusable test fixtures and page helpers for:

    • Authenticated page context with session management
    • Query settlement waiting utilities for React Query
    • Project route navigation helpers
    • Common UI interaction helpers (sidebar, dialogs, toasts, etc.)
  • Authentication Tests (e2e/auth.spec.ts): Comprehensive auth flow coverage:

    • Login page rendering and error handling
    • Registration page with company name validation
    • Authentication redirects for protected routes
    • Redirect parameter preservation
  • Deployments Tests (e2e/deployments.spec.ts): Full deployment management coverage:

    • Deployments list page layout and table structure
    • Deployment status indicators and active badges
    • Deployment actions (retry, rollback)
    • Deployment detail page navigation
    • Empty state handling
  • Playground Tests (e2e/playground.spec.ts): Interactive testing features:

    • Page layout and component visibility
    • Toolset and environment selection
    • Model selection and temperature controls
    • Chat functionality and message input
    • Logs panel toggling
    • URL parameter handling (toolset, prompt)
    • Resizable panel layout
  • Settings Tests (e2e/settings.spec.ts): Settings management coverage:

    • API keys CRUD operations (create, read, delete)
    • API key dialog interactions
    • Custom domain configuration
    • Domain validation and DNS record copying
    • Empty state handling
  • Home Dashboard Tests (e2e/home.spec.ts): Home page features:

    • Unauthenticated redirect behavior
    • Quick test section with MCP server chat
    • Tool exploration section with navigation
    • Server management section
    • Navigation to playground, toolsets, and custom tools
  • Git Configuration (.gitignore): Added Playwright artifacts to ignore list

Implementation Details

  • Tests use test.skip() with environment variable checks to gracefully skip tests requiring authentication when not available
  • Fixtures support both authenticated and unauthenticated test contexts
  • Page helpers provide consistent selectors and interaction patterns across tests
  • Tests include conditional visibility checks for optional UI elements
  • Comprehensive use of Playwright's accessibility APIs (getByRole, getByLabel, etc.)
  • Network idle waiting and loading indicator handling for async operations
  • Tests are organized by feature area with descriptive test names

Testing Requirements

Tests requiring authentication can be run with:

PLAYWRIGHT_AUTH_STATE_PATH=path/to/auth.json npx playwright test

Without authentication state, tests will skip gracefully and only run unauthenticated flows.

https://claude.ai/code/session_01HbPak4VsrMgkrDm45QDzGq


Open with Devin

- Add Playwright configuration with multi-browser support
- Create test fixtures for auth, navigation, and common utilities
- Implement test suites for key features:
  - Authentication (login, register, redirects)
  - Home dashboard (quick test, navigation, toolsets display)
  - Toolsets (list, create, CRUD operations)
  - Playground (chat, toolset selection, logs panel)
  - Deployments (list, actions, status indicators)
  - Settings (API keys, custom domains)
- Add npm scripts for running tests in various modes
@simplesagar simplesagar requested a review from a team as a code owner February 3, 2026 21:25
@changeset-bot
Copy link

changeset-bot bot commented Feb 3, 2026

⚠️ No Changeset found

Latest commit: 654fe19

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@simplesagar simplesagar changed the title Add comprehensive E2E test suite for dashboard feat: add comprehensive playwright test suite for dashboard Feb 3, 2026
Add the following mise tasks:
- mise test:e2e - Run all E2E tests
- mise test:e2e-ui - Run tests with interactive UI
- mise test:e2e-headed - Run tests in headed browser mode
- mise test:e2e-debug - Run tests in debug mode
Copy link
Contributor

@devin-ai-integration devin-ai-integration bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Devin Review found 2 potential issues.

View issues and 5 additional flags in Devin Review.

Open in Devin Review

@vercel
Copy link

vercel bot commented Feb 3, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
gram-docs-redirect Ready Ready Preview, Comment Feb 3, 2026 10:19pm

Request Review

@speakeasybot
Copy link
Collaborator

speakeasybot commented Feb 3, 2026

🚀 Preview Environment (PR #1476)

Preview URL: https://pr-1476.dev.getgram.ai

Component Status Details Updated (UTC)
✅ Database Ready Existing database reused 2026-02-05 09:27:38.
✅ Images Available Container images ready 2026-02-05 09:27:19.

Gram Preview Bot

The authenticatedPage fixture now properly loads the auth state from
the file path specified in PLAYWRIGHT_AUTH_STATE_PATH using Playwright's
storageState option when creating a new browser context.

Also adds authenticatedContext fixture for cases where tests need
direct access to the browser context.
- All e2e tasks now support --auth <path> to specify auth state file
- Add mise test:e2e-auth task to interactively generate auth state
- Add auth state files to .gitignore (contain session tokens)

Usage:
  # Generate auth state by logging in
  mise test:e2e-auth

  # Run tests with auth state
  mise test:e2e --auth client/dashboard/e2e/.auth-state.json
Copy link
Contributor

@devin-ai-integration devin-ai-integration bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Devin Review found 1 new potential issue.

View issue and 10 additional flags in Devin Review.

Open in Devin Review

@simplesagar simplesagar requested a review from adaam2 February 3, 2026 22:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

preview Spawn a preview environment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants