---
name: e2e-test-generation
description: Create E2E tests for Chrome extension using Playwright
license: MIT
compatibility: opencode
metadata:
  audience: developers
  framework: playwright
  target: extension
---

## What I do

- Create Playwright E2E tests for the Chrome extension
- Use `data-testid` and `getByTestId()` as the primary test selector pattern
- Add semantic selectors (role-based, data-testid) instead of class selectors
- Add `data-testid` attributes to components when needed for robust test selectors
- Define test constants for reusable test data in `apps/extension/tests/constants.ts`
- Follow project conventions: test.describe for 2+ tests, exact text matches, no evaluate() for clicks
- Use project fixtures: `import { test, expect } from '../fixtures/bookmark-fixture'`
- Run the generated test file after making changes

## When to use me

Use this when you need to create new E2E tests or update existing tests for the Chrome extension.

I will ask clarifying questions if:

- The feature to test is not clearly defined
- You need to test across multiple projects (extension vs web app)
- Test data requirements are unclear

## Selector Priority (use in this order)

1. **data-testid with getByTestId()** (highest priority - standard for this project)

   ```typescript
   bookmarksPage.getByTestId('folder-item-Main');
   bookmarksPage.getByTestId('bookmark-item-React Docs');
   bookmarksPage.getByTestId('person-item-John Doe');

   // For dynamic patterns, use locator with ^=
   bookmarksPage.locator('[data-testid^="bookmark-item-"]');
   ```

2. **Accessible Role Selectors** (when data-testid not available)

   ```typescript
   bookmarksPage.getByRole('button', { name: 'Add' });
   bookmarksPage.getByRole('dialog', { name: 'Add folder' });
   ```

3. **Placeholder/Label Selectors**

   ```typescript
   dialog.getByPlaceholder('Enter folder name');
   bookmarksPage.getByLabel('History');
   ```

4. **Title/Alt Selectors**

   ```typescript
   bookmarksPage.getByTitle('Edit Bookmark');
   bookmarksPage.getByAltText('User avatar');
   ```

5. **Text Content** (use sparingly)
   ```typescript
   bookmarksPage.getByText('Tagged Persons');
   ```

## Selector Anti-Patterns (NEVER use)

- Class selectors: `[class*="Folder-module__container"]`, `.some-generated-class`
- Custom data attributes (other than `data-testid`): `data-folder-name`, `data-context-id`, etc.
- Regex for simple text: `{ name: /add/i }` → use `{ name: 'Add' }`
- Positional selectors when specific selection is possible: `.first()`, `.nth()`
- Generic CSS selectors without semantic meaning
- Generic element selectors: `img`, `div`, `span` (use `data-testid` instead)
- `.evaluate()` for clicks (use direct `.click()` instead)

## When Positional Selectors Are OK

- Generic UI elements without unique `data-testid` attributes
- Tests that need "any" element rather than a specific one
- Temporary UI elements (tooltips, context menus) where adding `data-testid` is impractical

## Coding Style Guidelines

- **Exact text matches**: Use `{ name: 'Add' }` not `{ name: /add/i }`
- **Specific selectors**: Target parent div to avoid duplicate elements
- **Test constants**: Define constants in `apps/extension/tests/constants.ts` for reusable data
- **Group tests**: Only use `test.describe` for 2+ tests
- **Clear comments**: Explain "why", not "what"

## Common Patterns

**Opening a dialog:**

```typescript
const addButton = bookmarksPage.getByRole('button', { name: 'Add' });
await addButton.click();
const dialog = bookmarksPage.getByRole('dialog', { name: 'Add folder' });
await expect(dialog).toBeVisible();
```

**Filling a form:**

```typescript
await dialog.getByPlaceholder('Enter folder name').fill('Test Folder');
await dialog.getByRole('button', { name: 'Save' }).click();
await expect(dialog).toBeHidden();
```

**Context menu:**

```typescript
await element.click({ button: 'right' });
const editOption = bookmarksPage.getByTestId('context-menu-item-edit');
await expect(editOption).toBeVisible();
await editOption.click();
```

**Multi-select with keyboard:**

```typescript
await firstItem.click();
await secondItem.click({ modifiers: ['Meta'] }); // Cmd/Ctrl+click
```

**Waiting for navigation:**

```typescript
const [newPage] = await Promise.all([
  context.waitForEvent('page', { timeout: 15_000 }),
  element.dblclick(),
]);
expect(newPage).toBeTruthy();
```

## After Test Creation

Run the generated test file to verify it works:

```bash
playwright test apps/extension/tests/specs/<your-test-file>.spec.ts
```

## Checklist Before Committing

- [ ] Tests use `getByTestId()` with `data-testid` as primary selector
- [ ] Tests use semantic selectors (roles) when `data-testid` not available
- [ ] No regex for simple text matches
- [ ] No class-based selectors
- [ ] No custom data attributes (only `data-testid`)
- [ ] Avoid `.evaluate()` for clicks (use direct `.click()`)
- [ ] Test constants defined for reusable data
- [ ] `data-testid` attributes added to components if needed
- [ ] Only use `test.describe` for 2+ tests
- [ ] Clear, descriptive test names
- [ ] All tests pass locally
- [ ] Tests are deterministic (no flaky behavior)