Skip to content

Commit 712508f

Browse files
KrumTyKrumTy
committed
RI-7948: init e2e playwright project
1 parent 16dd1b7 commit 712508f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+7794
-18
lines changed

‎.ai/commands/e2e-fix.md‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
---
2+
description: Run E2E tests and fix any failures
3+
argument-hint: <test-pattern>
4+
---
5+
6+
# Fix E2E Tests
7+
8+
Run E2E tests matching a pattern, analyze failures, and fix them.
9+
10+
**Follow all standards in `.ai/rules/e2e-testing.md`**
11+
12+
## Input
13+
14+
**Test pattern** (required) - Test name or describe block pattern
15+
- Examples: `"Analytics > Slow Log"`, `"should add string key"`, `"@smoke"`
16+
17+
## Process
18+
19+
### Step 1: Run the Tests
20+
21+
```bash
22+
cd tests/e2e-playwright
23+
npx playwright test --grep "<pattern>" --reporter=list 2>&1 | tail -50
24+
```
25+
26+
### Step 2: Analyze Failures
27+
28+
If tests fail, check the error context file:
29+
30+
```bash
31+
cat test-results/<test-folder>/error-context.md | head -150
32+
```
33+
34+
The error context contains:
35+
- **Page snapshot** - Current UI state (element tree with refs)
36+
- **Error message** - What assertion failed
37+
- **Call log** - Playwright's action log
38+
39+
### Step 3: Diagnose the Issue
40+
41+
Common failure patterns:
42+
43+
| Error | Likely Cause | Solution |
44+
|-------|--------------|----------|
45+
| `element(s) not found` | Wrong selector or element not rendered | Check snapshot for correct testid/role |
46+
| `Timeout waiting for` | Element takes too long to appear | Add proper wait or check if element exists |
47+
| `expected visible` | Element hidden or removed | Verify UI flow, check if dialog closed |
48+
| `not.toBeVisible failed` | Element still visible | Wait for element to be removed |
49+
50+
### Step 4: Explore UI if Needed
51+
52+
If the error context doesn't reveal the issue, use Playwright MCP to explore:
53+
54+
```
55+
browser_navigate_Playwright → http://localhost:8080
56+
browser_snapshot_Playwright
57+
browser_click_Playwright → element, ref
58+
```
59+
60+
### Step 5: Fix the Test
61+
62+
Apply fixes following these priorities:
63+
64+
1. **Fix selectors** - Use correct `data-testid` or role from snapshot
65+
2. **Fix waits** - Replace `waitForTimeout` with proper element waits
66+
3. **Fix test data** - Ensure unique prefixes to avoid conflicts with other tests
67+
4. **Fix assertions** - Match actual UI behavior
68+
69+
### Step 6: Verify the Fix
70+
71+
```bash
72+
cd tests/e2e-playwright
73+
npx playwright test --grep "<pattern>" --reporter=list 2>&1 | tail -30
74+
```
75+
76+
### Step 7: Run Linter and Type Check
77+
78+
**REQUIRED before completing:**
79+
80+
```bash
81+
cd tests/e2e-playwright
82+
npm run lint && npx tsc --noEmit
83+
```
84+
85+
Both must pass.
86+
87+
## Debugging Tips
88+
89+
### Check Page Snapshot for Correct Selectors
90+
91+
```yaml
92+
# Look for data-testid in the snapshot
93+
- button "Add" [ref=e123] [cursor=pointer] # Use getByRole('button', { name: 'Add' })
94+
- generic "my-testid" [ref=e456] # Use getByTestId('my-testid')
95+
- treeitem "String keyname..." [ref=e789] # Use getByRole('treeitem', { name: /keyname/ })
96+
```
97+
98+
### Handle View Mode Differences
99+
100+
Browser page has List view and Tree view with different element structures:
101+
102+
```typescript
103+
// List view uses gridcell
104+
page.getByRole('gridcell', { name: keyName })
105+
106+
// Tree view uses treeitem
107+
page.getByRole('treeitem', { name: new RegExp(keyName) })
108+
109+
// KeyList.getKeyRow() handles both
110+
```
111+
112+
### Test Isolation Issues
113+
114+
If test fails inconsistently, check for:
115+
- Missing unique suffix in test data (conflicts with parallel runs)
116+
- Missing cleanup in `afterEach`
117+
- Shared state between tests (use `test.describe.serial` if needed)
118+
119+
### Dropdown/Dialog Issues
120+
121+
If clicking fails after interacting with dropdown:
122+
```typescript
123+
// Close dropdown before next action
124+
await page.keyboard.press('Escape');
125+
```
126+
127+
## Example Usage
128+
129+
```
130+
@e2e-fix "Analytics > Slow Log"
131+
@e2e-fix "should add string key"
132+
@e2e-fix "Browser > Key Details > String"
133+
@e2e-fix "@smoke"
134+
```
135+
136+
## Quick Reference
137+
138+
| Command | Purpose |
139+
|---------|---------|
140+
| `npx playwright test --grep "pattern"` | Run matching tests |
141+
| `npx playwright test --grep "pattern" --debug` | Run with inspector |
142+
| `npx playwright show-trace <trace.zip>` | View test trace |
143+
| `npm run lint` | Check for lint errors |
144+
| `npx tsc --noEmit` | Check for type errors |
145+

‎.ai/commands/e2e-generate.md‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
---
2+
description: Explore a page using Playwright MCP and generate E2E tests
3+
argument-hint: <url> [focus-area]
4+
---
5+
6+
# Generate E2E Tests
7+
8+
Use Playwright MCP to explore a page, discover testable functionality, and generate E2E tests.
9+
10+
**Follow all standards in `.ai/rules/e2e-testing.md`**
11+
12+
## Input
13+
14+
1. **URL** (required) - Page to explore (e.g., `http://localhost:8080/browser`)
15+
2. **Focus area** (optional) - Specific functionality (e.g., "add key", "settings")
16+
17+
## Process
18+
19+
### Step 1: Check Test Plan
20+
21+
Review `tests/e2e-playwright/TEST_PLAN.md` to find tests to implement:
22+
- ✅ = Already implemented (skip)
23+
- 🔲 = Not implemented (create new)
24+
25+
### Step 2: Explore the Page with Playwright MCP
26+
27+
```
28+
browser_navigate_Playwright → url
29+
browser_snapshot_Playwright
30+
browser_click_Playwright → element, ref
31+
browser_snapshot_Playwright (after each action)
32+
```
33+
34+
Look for:
35+
- `data-testid` attributes → use with `page.getByTestId()`
36+
- Element roles (button, combobox, grid) → use with `page.getByRole()`
37+
- Form field placeholders → use with `page.getByPlaceholder()`
38+
39+
### Step 3: Check Existing Infrastructure
40+
41+
```bash
42+
ls tests/e2e-playwright/tests/
43+
ls tests/e2e-playwright/pages/
44+
ls tests/e2e-playwright/test-data/
45+
```
46+
47+
### Step 4: Generate Test Artifacts
48+
49+
Based on exploration, create/update:
50+
51+
1. **Page Object** - `tests/e2e-playwright/pages/{feature}/{Feature}Page.ts`
52+
2. **Test Data Factory** - `tests/e2e-playwright/test-data/{feature}/index.ts`
53+
3. **Fixture** (if new page) - Update `tests/e2e-playwright/fixtures/base.ts`
54+
4. **Test File** - `tests/e2e-playwright/tests/{feature}/{action}/*.spec.ts`
55+
56+
### Step 5: Verify
57+
58+
```bash
59+
cd tests/e2e-playwright
60+
npx playwright test --grep "<new-test-name>" --reporter=list
61+
npm run lint && npx tsc --noEmit
62+
```
63+
64+
### Step 6: Update Test Plan
65+
66+
Mark implemented tests as ✅ in `tests/e2e-playwright/TEST_PLAN.md`
67+
68+
## Exploration Checklist
69+
70+
- [ ] Main page purpose and entry points
71+
- [ ] Forms and their fields
72+
- [ ] Buttons and their actions
73+
- [ ] Lists/tables and CRUD operations
74+
- [ ] Dialogs/modals triggered by actions
75+
- [ ] Loading states and spinners
76+
- [ ] Success/error toasts
77+
- [ ] Empty states
78+
- [ ] Validation messages
79+
- [ ] `data-testid` attributes
80+
81+
## Feature-to-URL Mapping
82+
83+
| Feature | URL Pattern |
84+
|---------|-------------|
85+
| Database Management | `http://localhost:8080` |
86+
| Browser | `http://localhost:8080/{dbId}/browser` |
87+
| Workbench | `http://localhost:8080/{dbId}/workbench` |
88+
| CLI | (Panel on any database page) |
89+
| Pub/Sub | `http://localhost:8080/{dbId}/pub-sub` |
90+
| Slow Log | `http://localhost:8080/{dbId}/analytics/slowlog` |
91+
| Database Analysis | `http://localhost:8080/{dbId}/analytics/database-analysis` |
92+
| Settings | `http://localhost:8080/settings` |
93+
94+
**Note:** Replace `{dbId}` with an actual database UUID.
95+
96+
## Example Usage
97+
98+
```
99+
@e2e-generate http://localhost:8080
100+
@e2e-generate http://localhost:8080/browser "add string key"
101+
@e2e-generate http://localhost:8080/workbench
102+
```

0 commit comments

Comments
 (0)