Copilot instructions

1---
2applyTo: 'e2e/studio/**,apps/studio/**'
3---
4 
5# Studio E2E Test Review Rules
6 
7All comments are **advisory**.
8 
9## Selector Priority (best to worst)
10 
111. **`getByRole` with accessible name** — most robust, tests accessibility
12 
13```typescript
14   page.getByRole('button', { name: 'Save' })
15```
16 
172. **`getByTestId`** — stable, explicit test hooks
18 
19```typescript
20   page.getByTestId('table-editor-side-panel')
21```
22 
233. **`getByText` with exact match** — good for unique text
24 
25```typescript
26   page.getByText('Data API access', { exact: true })
27```
28 
294. **`locator` with CSS** — use sparingly, more fragile
30```typescript
31   page.locator('[data-state="open"]')
32```
33 
34## Patterns to Flag
35 
36- **XPath selectors** — fragile to DOM changes
37 
38```typescript
39  // BAD
40  locator('xpath=ancestor::div[contains(@class, "space-y")]')
41```
42 
43- **Parent traversal with `locator('..')`** — breaks when structure changes
44 
45```typescript
46  // BAD
47  element.locator('..').getByRole('button')
48```
49 
50- **`waitForTimeout`** — never use; wait for something specific instead
51 
52```typescript
53  // BAD
54  await page.waitForTimeout(1000)
55 
56  // GOOD — wait for UI element
57  await expect(page.getByText('Success')).toBeVisible()
58 
59  // GOOD — wait for API response
60  const apiPromise = waitForApiResponse(page, 'pg-meta', ref, 'query?key=table-create')
61  await saveButton.click()
62  await apiPromise
63```
64 
65- **`force: true` on clicks** — make elements visible first instead
66 
67```typescript
68  // BAD
69  await menuButton.click({ force: true })
70 
71  // GOOD — hover to reveal, then click
72  await tableRow.hover()
73  await expect(menuButton).toBeVisible()
74  await menuButton.click()
75```
76 
77- **Broad `filter({ hasText })` on generic elements** — may match multiple elements; scope to specific containers instead
78 
79## Good Practices to Encourage
80 
81- Scope selectors to containers: `page.getByTestId('side-panel').getByRole('switch')`
82- Add `aria-label` to icon-only buttons in source code for better test selectors
83- Use `test.describe.configure({ mode: 'serial' })` for tests sharing database state
84- Add messages to expects: `await expect(locator, 'why').toBeVisible({ timeout: 30000 })`
85 
86Canonical standard: `.claude/skills/studio-e2e-tests/SKILL.md`
87