Test Runner

Runs Playwright Component Tests across all frameworks.

When to Use

•After implementing or modifying components
•Before committing changes
•When verifying cross-framework compatibility
•When user asks to run tests
•When checking test coverage

Quick Commands

Command	Description
`pnpm test:ct`	Run all framework tests in parallel
`pnpm test:ct:seq`	Run all framework tests sequentially
`pnpm test:ct:react`	Run React tests only
`pnpm test:ct:vue`	Run Vue tests only
`pnpm test:ct:svelte`	Run Svelte tests only

Instructions

1. Determine Test Scope

Based on user request or changed files:

Changed Path	Tests to Run
`packages/core/**`	All frameworks
`packages/react/**`	React only
`packages/vue/**`	Vue only
`packages/svelte/**`	Svelte only
`tests/ct/scenarios/**`	All frameworks
`tests/ct/react/**`	React only
`tests/ct/vue/**`	Vue only
`tests/ct/svelte/**`	Svelte only

2. Run Tests

All Frameworks (Parallel)

bash

pnpm test:ct

Note: Parallel execution may cause timeout errors when running with all browsers due to resource contention. Use --project=chromium for faster, more reliable parallel runs.

All Frameworks (Sequential)

bash

pnpm test:ct:seq

Single Framework

bash

pnpm test:ct:react
pnpm test:ct:vue
pnpm test:ct:svelte

Specific Browser

bash

pnpm test:ct:react --project=chromium
pnpm test:ct:react --project=firefox
pnpm test:ct:react --project=webkit

Specific Test File

bash

pnpm test:ct:react tests/ct/react/specs/Editor.spec.tsx

Debug Mode (Headed)

bash

pnpm test:ct:react --headed

3. Analyze Results

Success Output

code

Running X tests using Y workers

  ✓ ComponentName › test description (XXms)
  ...

  X passed (Y.Zs)

Failure Output

code

  ✗ ComponentName › test description (XXms)
    Error: expect(locator).toBeVisible()
    Locator: ...
    Expected: visible
    Received: hidden

4. Report Format

markdown

## Test Results

### Summary
- **React**: ✅ X passed / ❌ Y failed
- **Vue**: ✅ X passed / ❌ Y failed
- **Svelte**: ✅ X passed / ❌ Y failed

### Failures (if any)
| Framework | Test | Error |
|-----------|------|-------|
| React | ComponentName › test | Error message |

### Next Steps
- [ ] Fix failing tests
- [ ] Run tests again

Coverage Check

When user asks about test coverage, check if all components and hooks/composables/runes are covered by tests.

1. List Implementations

Run these commands to list all implementations:

bash

# React
ls packages/react/src/components/*.tsx | xargs -I {} basename {} .tsx
ls packages/react/src/hooks/*.ts | xargs -I {} basename {} .ts

# Vue
ls packages/vue/src/components/*.vue | xargs -I {} basename {} .vue
ls packages/vue/src/composables/*.ts | xargs -I {} basename {} .ts

# Svelte
ls packages/svelte/src/components/*.svelte | xargs -I {} basename {} .svelte
ls packages/svelte/src/runes/*.ts | xargs -I {} basename {} .ts

2. List Test Specs

bash

ls tests/ct/react/specs/*.tsx tests/ct/vue/specs/*.ts tests/ct/svelte/specs/*.ts | xargs -I {} basename {}

3. Check Coverage

For each implementation, determine coverage status:

Status	Meaning
✅ Direct	Has dedicated test spec
✅ Indirect	Tested through parent component
⚠️ Style-only	Pure styling, may not need test
❌ Missing	Needs test

4. Coverage Report Format

markdown

## Test Coverage Report

### Components

| Component | React | Vue | Svelte | Status |
|-----------|:-----:|:---:|:------:|--------|
| EditorRoot | ✅ | ✅ | ✅ | Direct |
| BubbleMenu | ✅ | ✅ | ✅ | Direct |
| SlashMenu | ✅ | ✅ | ✅ | Direct |

### Hooks / Composables / Runes

| Function | React | Vue | Svelte | Status |
|----------|:-----:|:---:|:------:|--------|
| useVizelEditor | ✅ | ✅ | ✅ | Indirect |
| useVizelEditorState | ❌ | ❌ | ❌ | Missing |

### Summary
- Components: X/Y covered (Z%)
- Hooks/Composables/Runes: X/Y covered (Z%)

### Recommendations
- [ ] Add tests for missing items
- [ ] Consider if style-only components need tests

Troubleshooting

Browser Not Installed

bash

pnpm exec playwright install chromium
# or install all browsers
pnpm exec playwright install

Test Timeout

Increase timeout in test:

typescript

test("slow test", async ({ mount, page }) => {
  test.setTimeout(30000); // 30 seconds
  // ...
});

Parallel Execution Timeout

When running all frameworks in parallel with all browsers, you may see timeout errors due to resource contention:

code

browserContext.newPage: Test timeout of 10000ms exceeded

Solutions:

•Use single browser: pnpm test:ct --project=chromium
•Use sequential execution: pnpm test:ct:seq
•Reduce parallel workers in config (currently 50% CPU)

Element Not Found

Check if element is rendered to document.body (portal):

typescript

// Inside component
const element = component.locator(".selector");

// Portal/popup (rendered to body)
const popup = page.locator(".selector");

Common Patterns

Run Tests for Changed Files

bash

# Get changed files
git diff --name-only HEAD~1

# Run relevant tests based on changes
pnpm test:ct:react  # if React files changed

Run Before Commit

bash

# Quick parallel check with single browser (recommended)
pnpm test:ct --project=chromium

# Or sequential check with single browser
pnpm test:ct:seq --project=chromium

Full CI-like Test

bash

# All frameworks in parallel, all browsers
pnpm test:ct

# All frameworks sequentially, all browsers (more stable)
pnpm test:ct:seq