chrome-ext-testinglisted
Install: claude install-skill RadOrigin-LLC/RAD-Claude-Skills
# Chrome Extension Testing
Extension testing spans three tiers: unit tests for pure logic, integration tests for messaging/storage/UI, and E2E tests for multi-context journeys. Vitest with `@webext-core/fake-browser` handles the first two. Playwright handles E2E with real browser contexts.
## Framework Selection
| Tier | Framework | Why |
|------|-----------|-----|
| Unit | Vitest | Fast, Vite-native, works with WXT |
| Integration | Vitest Browser Mode | Real browser DOM for authentic behavior |
| E2E | Playwright | Isolated browser contexts, Shadow DOM piercing |
## Unit Testing
Test pure logic, utilities, and API-mocked code with `@webext-core/fake-browser`:
```typescript
// vitest.config.ts
import { defineConfig } from 'vitest/config';
export default defineConfig({
test: {
setupFiles: ['./test/setup.ts'],
},
});
// test/setup.ts
import { fakeBrowser } from '@webext-core/fake-browser';
vi.stubGlobal('browser', fakeBrowser);
vi.stubGlobal('chrome', fakeBrowser);
```
What to test:
- Algorithms, formatting helpers, data transformers
- Storage read/write logic (fake-browser polyfills chrome.storage)
- Message routing logic (fake-browser polyfills chrome.runtime)
- Utility functions
```typescript
import { describe, it, expect } from 'vitest';
describe('storage utils', () => {
it('reads with defaults', async () => {
const result = await chrome.storage.local.get({ theme: 'light' });
expect(result.theme).toBe('light');
});
it('persists and retriev