From magic-powers
Test browser extensions with Playwright, unit test background workers and storage, and set up CI for extension projects.
npx claudepluginhub kienbui1995/magic-powers --plugin magic-powersThis skill uses the workspace's default tool permissions.
- Setting up automated tests for a browser extension
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Playwright supports loading unpacked extensions:
// playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
// Load extension
contextOptions: {
args: [
`--disable-extensions-except=${path.join(__dirname, 'dist')}`,
`--load-extension=${path.join(__dirname, 'dist')}`
]
}
}
});
test('popup shows correct count', async ({ context }) => {
// Get extension service worker
const [background] = context.serviceWorkers();
// Open popup
const popupPage = await context.newPage();
await popupPage.goto(`chrome-extension://${extensionId}/popup.html`);
await expect(popupPage.locator('#count')).toHaveText('0');
});
Extract pure logic from Chrome API calls for unit testing:
// background.js — testable pure function
export function calculateBadgeText(count) {
return count > 99 ? '99+' : String(count);
}
// background.test.js — no browser APIs needed
import { calculateBadgeText } from './background';
test('badge text caps at 99+', () => {
expect(calculateBadgeText(100)).toBe('99+');
});
// vitest / jest setup
global.chrome = {
storage: {
local: {
get: vi.fn().mockResolvedValue({ count: 5 }),
set: vi.fn().mockResolvedValue(undefined)
}
},
runtime: { sendMessage: vi.fn() }
};
# .github/workflows/test.yml
- name: Build extension
run: npm run build
- name: Install Playwright browsers
run: npx playwright install chromium
- name: Run extension tests
run: npx playwright test
context.serviceWorkers() in Playwright--load-extension flag?--set-extension-name or use key in manifestchrome.* APIs unavailable in Node.js test environment — always mock them