playwright

Playwright E2E Test Instructions

You are writing Playwright E2E tests for the Nimbalyst editor. Follow these rules STRICTLY.

Critical Rules

1. NEVER Hardcode Selectors

Import and use selectors from PLAYWRIGHT_TEST_SELECTORS in e2e/utils/testHelpers.ts.

// BAD - NEVER DO THIS
await page.locator('.tab-dirty-indicator').toBeVisible();
await page.locator('[contenteditable="true"]').click();

// GOOD - Use shared selectors AND target by document path
import { PLAYWRIGHT_TEST_SELECTORS, getTabByFileName } from '../utils/testHelpers';

const tab = getTabByFileName(page, 'test.md');
await expect(tab.locator(PLAYWRIGHT_TEST_SELECTORS.tabDirtyIndicator)).toBeVisible();

// For editors, scope to the specific file's editor
const editor = page.locator(`[data-filepath="${filePath}"]`);
await editor.locator(PLAYWRIGHT_TEST_SELECTORS.contentEditable).click();

If a selector doesn't exist in PLAYWRIGHT_TEST_SELECTORS, ADD IT THERE first.

2. NEVER Use .first() as a Lazy Escape Hatch

Nimbalyst is a complex app with multiple windows, multiple editor tabs, multiple AI sessions, etc. You MUST target elements precisely.

// BAD - Lazy, will break with multiple tabs/editors
await page.locator('.tab').first().click();
await page.locator('.monaco-editor').first().type('hello');
await page.locator('[contenteditable="true"]').first().click();

// GOOD - Target precisely using data attributes
await page.locator('[data-testid="tab"][data-filepath="/path/to/file.md"]').click();
await page.locator('[data-testid="monaco-editor"][data-filepath="/path/to/file.ts"]').type('hello');

If you can't target an element precisely:

1. ADD a data-testid attribute to the component
2. ADD a data-filepath, data-session-id, or other identifying data attribute
3. Update PLAYWRIGHT_TEST_SELECTORS with the new selector
4. THEN write the test

Common data attributes we use:

• data-testid - Unique identifier for test targeting
• data-filepath - Full path to file for editors/tabs
• data-filename - Filename for simpler cases
• data-session-id - AI session identifier
• data-tab-type - "document" or "session"
• data-active - "true"/"false" for active state