2a1dd481e9
Adds E2E UI tests for two core Phase 2 flows, building on the Playwright setup from #13578. **Agent onboarding** — validates the Agents settings page, Add Agent modal elements, form validation (name + email required, submit disabled until valid), and cancel behaviour. **Inbox creation** — walks through the full API channel inbox creation journey: channel selection → form fill → agent assignment → finish screen. ## What changed New UI component objects (`tests/playwright/components/ui/`): - `agent-page.component.ts` - `add-agent-modal.component.ts` - `add-agents-form.component.ts` - `settings-inbox-page.component.ts` - `channel-selector.component.ts` - `api-channel-form.component.ts` - `finish-setup.component.ts` New test specs (`tests/playwright/tests/e2e/ui/`): - `agent-onboarding-flow-ui-validation.spec.ts` - `inbox-creation-flow.spec.ts` Updated `components/ui/index.ts` barrel export to include all new components. ## How to test ```bash cd tests/playwright npx playwright test tests/e2e/ui/ ``` All 5 tests pass locally (3 login + 2 new flows). Closes part of the Phase 2 scope from the [Playwright E2E discussion #13500](https://github.com/orgs/chatwoot/discussions/13500). --------- Co-authored-by: Sony Mathew <sony@chatwoot.com> Co-authored-by: Sony Mathew <2040199+sony-mathew@users.noreply.github.com>
Chatwoot E2E Testing
End-to-end testing framework for Chatwoot using Component Object Model pattern.
Setup
# Install dependencies
pnpm install
# Install Playwright browsers
npx playwright install
# Configure environment
cp .env.example .env
Edit .env with your Chatwoot instance URL and credentials.
Usage
# Run all tests
pnpm run playwright:run
# Run tests in UI mode
pnpm run playwright:open
# Lint tests and page objects
pnpm run lint
# Generate test code
pnpm run playwright:codegen
Project Structure
tests/playwright/
├── components/
│ ├── api/ # API interaction components
│ └── ui/ # UI page objects
├── tests/
│ └── e2e/
│ ├── api/ # Pure API tests
│ └── ui/ # UI tests
├── utils/ # Shared utilities and helpers
├── response-schemas/ # API response schemas for validation
├── fixtures/ # Test fixtures
└── helpers/ # Helper functions
Documentation
See DOCS.md for complete testing guide including patterns, conventions, and troubleshooting.
Configuration
See .env.example for the full list of variables.