mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-23 07:50:15 +00:00
ed63f4b225
Lessons learned from purging 40 `as any` instances from browser_tests. TypeScript guidance additions: - Type assertion hierarchy (from virtuous to forbidden) - Zod schema rules (no z.any(), no test settings in production) - Public API contract preservation Playwright guidance additions: - Acceptable vs forbidden type assertion patterns - Test-local type helpers pattern (e.g., TestSettingId) - How to access internal store state without polluting APIs Amp-Thread-ID: https://ampcode.com/threads/T-019c1833-2352-728b-a523-a8f440fd3ba1 Co-authored-by: Amp <amp@ampcode.com>
96 lines
2.4 KiB
Markdown
96 lines
2.4 KiB
Markdown
---
|
|
globs:
|
|
- '**/*.spec.ts'
|
|
---
|
|
|
|
# Playwright E2E Test Conventions
|
|
|
|
See `docs/testing/*.md` for detailed patterns.
|
|
|
|
## Best Practices
|
|
|
|
- Follow [Playwright Best Practices](https://playwright.dev/docs/best-practices)
|
|
- Do NOT use `waitForTimeout` - use Locator actions and retrying assertions
|
|
- Prefer specific selectors (role, label, test-id)
|
|
- Test across viewports
|
|
|
|
## Window Globals
|
|
|
|
Browser tests access `window.app`, `window.graph`, and `window.LiteGraph` which are
|
|
optional in the main app types. In E2E tests, use non-null assertions (`!`):
|
|
|
|
```typescript
|
|
window.app!.graph!.nodes
|
|
window.LiteGraph!.registered_node_types
|
|
```
|
|
|
|
This is the **only context** where non-null assertions are acceptable.
|
|
|
|
**TODO:** Consolidate these references into a central utility (e.g., `getApp()`) that
|
|
performs proper runtime type checking, removing the need for scattered `!` assertions.
|
|
|
|
## Type Assertions in E2E Tests
|
|
|
|
E2E tests may use **specific** type assertions when needed, but **never** `as any`.
|
|
|
|
### Acceptable Patterns
|
|
|
|
```typescript
|
|
// ✅ Non-null assertions for window globals
|
|
window.app!.extensionManager
|
|
|
|
// ✅ Specific type assertions with documentation
|
|
// Extensions can register arbitrary setting IDs
|
|
id: 'TestSetting' as TestSettingId
|
|
|
|
// ✅ Test-local type helpers
|
|
type TestSettingId = keyof Settings
|
|
```
|
|
|
|
### Forbidden Patterns
|
|
|
|
```typescript
|
|
// ❌ Never use `as any`
|
|
settings: testData as any
|
|
|
|
// ❌ Never modify production types to satisfy test errors
|
|
// Don't add test settings to src/schemas/apiSchema.ts
|
|
|
|
// ❌ Don't chain through unknown to bypass types
|
|
data as unknown as SomeType // Use sparingly, document why
|
|
```
|
|
|
|
### Accessing Internal State
|
|
|
|
When tests need internal store properties (e.g., `.workflow`, `.focusMode`):
|
|
|
|
```typescript
|
|
// ✅ Access stores directly in page.evaluate
|
|
await page.evaluate(() => {
|
|
const store = useWorkflowStore()
|
|
return store.activeWorkflow
|
|
})
|
|
|
|
// ❌ Don't change public API types to expose internals
|
|
// Keep app.extensionManager typed as ExtensionManager, not WorkspaceStore
|
|
```
|
|
|
|
## Test Tags
|
|
|
|
Tags are respected by config:
|
|
|
|
- `@mobile` - Mobile viewport tests
|
|
- `@2x` - High DPI tests
|
|
|
|
## Test Data
|
|
|
|
- Check `browser_tests/assets/` for test data and fixtures
|
|
- Use realistic ComfyUI workflows for E2E tests
|
|
|
|
## Running Tests
|
|
|
|
```bash
|
|
pnpm test:browser:local # Run all E2E tests
|
|
pnpm test:browser:local -- --ui # Interactive UI mode
|
|
```
|