feat(FR-1714): implement AI-powered Playwright test automation workflow

[yomybaby]

resolves #4683 (FR-1714)

Summary

This PR implements an AI-powered Playwright test automation workflow using three specialized chat mode agents that automate the entire test lifecycle - from planning to generation to healing.

Goal

• 5x faster test creation through automated test scenario generation
• 60% reduction in maintenance time through automated test healing
• Improved test coverage through comprehensive test planning

Three Specialized Agents

1. 🎭 Planner Agent (.claude/agents/playwright-test-planner.md)

   • Analyzes web UI through browser snapshots
   • Creates comprehensive test scenarios covering happy paths, edge cases, and error conditions
   • Outputs structured test plans in markdown format

2. 🎭 Generator Agent (.claude/agents/playwright-test-generator.md)

   • Converts test plans into working Playwright code
   • Follows best practices and existing test patterns
   • Uses utility classes and helper functions from the codebase

3. 🎭 Healer Agent (.claude/agents/playwright-test-healer.md)

   • Debugs and repairs failing tests automatically
   • Analyzes error messages, screenshots, and traces
   • Applies fixes and verifies test passes

Practical Demonstration: VFolder E2E Tests

This PR includes a complete demonstration of the workflow with VFolder-related tests:

New Utility Classes:

• FolderExplorerModal - Page object class for folder explorer modal interactions
• NotificationHandler - Centralized notification management to prevent UI blocking

New Test Specifications:

• vfolder-explorer-modal.spec.ts - Comprehensive tests for folder explorer modal (6 tests)
• vfolder-consecutive-deletion.spec.ts - Tests for consecutive folder operations

Enhanced Test Utilities:

• Improved deleteForeverAndVerifyFromTrash() with filter clearing and better error handling
• Added clearAllFilters() helper function

Configuration:

• Added Playwright MCP server to .mcp.json for agent integration
• GitHub Copilot chat modes for easy agent access

Technical Implementation

Agent Architecture:

• Each agent has specialized tools and focused responsibilities
• Agents use Playwright MCP server for browser automation
• Planner → Generator → Healer workflow for complete test lifecycle

Benefits for Developers:

1. Fast Test Creation: Generate comprehensive test plans and code from web UI exploration
2. Reduced Maintenance: Automated healing fixes broken tests caused by UI changes
3. Better Coverage: AI-powered planning identifies edge cases humans might miss
4. Consistent Patterns: Generated code follows established patterns and utilities

Checklist:

• Documentation - Agent markdown files with detailed instructions
• Minimum required manager version - N/A (E2E test infrastructure only)
• Specific setting for review - Requires Playwright and MCP server setup
• Test case(s) to demonstrate - VFolder tests demonstrate the complete workflow
• Minimum requirements to check during review:
  • Agent files in .claude/agents/ are comprehensive and follow best practices
  • Utility classes (FolderExplorerModal, NotificationHandler) are well-structured
  • Test specs follow existing patterns and pass consistently
  • MCP server configuration is correct

[yomybaby]

• feat(FR-1714): implement AI-powered Playwright test automation workflow #4687 👈 (View in Graphite)
• fix(FR-1713): fix broken E2E tests and improve session test reliability #4680
• fix(FR-1711): showNonInstalledImages E2E test #4679
• fix(FR-1703): Fix invitation acceptance workflow in E2E tests #4677
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• flow:merge-queue - adds this PR to the back of the merge queue
• flow:hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has required the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[Copilot]

Pull Request Overview

This PR introduces an AI-powered Playwright test automation workflow by implementing three specialized chat mode agents (Planner, Generator, and Healer) that automate the entire test lifecycle. The PR also includes a practical demonstration through new VFolder E2E tests and supporting utility classes, along with upgrading Playwright from 1.49.1 to 1.56.1.

Key Changes:

• Added three AI agent configurations for automated test planning, generation, and healing
• Implemented comprehensive VFolder explorer modal tests (6 test scenarios)
• Created reusable page object classes for folder explorer and notification handling
• Enhanced test utilities with better filter management and error handling

Reviewed Changes

Copilot reviewed 16 out of 17 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
package.json	Upgraded @playwright/test dependency from ^1.49.1 to ^1.56.1
pnpm-lock.yaml	Updated lockfile to reflect Playwright version upgrade
e2e/vfolder-explorer-modal.spec.ts	New comprehensive test suite covering folder explorer modal permissions, layout, and error handling
e2e/vfolder-consecutive-deletion.spec.ts	New test demonstrating consecutive folder deletion with proper filter clearing
e2e/seed.spec.ts	Template/seed file for AI agent test generation (currently empty placeholder)
e2e/utils/classes/FolderExplorerModal.ts	New page object class for interacting with folder explorer modal
e2e/utils/classes/NotificationHandler.ts	New utility class for managing Ant Design notifications in tests
e2e/utils/test-util.ts	Enhanced deletion utilities with filter clearing, better error handling, and new clearAllFilters helper
e2e/session.test.ts	Reorganized test structure, un-skipped resource policy test, updated form field selectors
.mcp.json	Added Playwright test MCP server configuration (missing type field)
backend.ai-webui.code-workspace	Added MCP server configurations for VS Code workspace
.claude/agents/playwright-test-planner.md	Agent configuration for AI-powered test scenario planning
.claude/agents/playwright-test-generator.md	Agent configuration for test code generation (contains syntax error in example)
.claude/agents/playwright-test-healer.md	Agent configuration for automated test debugging and fixing

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

[ironAiken2]

It would be good to add a convention for test names. Previously, test names were written from the user's perspective to match e2e tests, but now they are written as if they were unit tests. Also, since tests generated by AI are written in separate files, it would be better if they were written under existing tests.

Everything else works fine :)

[ironAiken2]

LGTM

[graphite-app]

Merge activity

• Nov 26, 9:09 AM UTC: This pull request can not be added to the Graphite merge queue. Please try rebasing and resubmitting to merge when ready.
• Nov 26, 9:09 AM UTC: Graphite disabled "merge when ready" on this PR due to: a merge conflict with the target branch; resolve the conflict and try again..