with one click
testing-verification
// Use when testing UI changes, verifying builds work, or validating extension behavior on PoE trade website or Storybook
// Use when testing UI changes, verifying builds work, or validating extension behavior on PoE trade website or Storybook
| name | testing-verification |
| description | Use when testing UI changes, verifying builds work, or validating extension behavior on PoE trade website or Storybook |
This skill guides testing and verification for this Chrome extension project using Playwriter MCP.
Before testing, ensure:
const pages = context.pages();
console.log('Available pages:', pages.length);
pages.forEach((p, i) => console.log(` ${i}: ${p.url()}`));
If no pages or connection errors:
mcp__playwriter__reset to reset the CDP connectionIf PoE trade page still not showing after reset:
If Storybook not connected:
// Find PoE trade page
const tradePage = context.pages().find(p => p.url().includes('pathofexile.com/trade'));
if (tradePage) state.tradePage = tradePage;
// Find Storybook page
const storybookPage = context.pages().find(p => p.url().includes('localhost:6006'));
if (storybookPage) state.storybookPage = storybookPage;
Run in terminal (not Playwriter):
bun run dev
This builds with dev mode enabled and auto-reload capability. The extension will auto-reload when it detects the new build (polling every 1 second).
After build completes, wait a moment for auto-reload, then verify the extension is present:
// Check if extension overlay panel exists
const snapshot = await accessibilitySnapshot({ page: state.tradePage, search: /DEV|poe|search/i });
console.log(snapshot);
The DEV indicator in the panel header shows reload status:
// Look for DEV indicator in panel header
const snapshot = await accessibilitySnapshot({ page: state.tradePage, search: /DEV/i });
console.log(snapshot);
The indicator should show "DEV" text with a colored dot. If you see the DEV indicator but it's red:
bun run dev againStart Storybook if not running:
bun run storybook
Navigate to specific stories:
// Navigate to a component story
await state.storybookPage.goto('http://localhost:6006/?path=/story/panel--default');
await state.storybookPage.waitForLoadState('networkidle');
const snapshot = await accessibilitySnapshot({ page: state.storybookPage });
console.log(snapshot);
Check the extension panel is visible:
// Get snapshot of extension elements
const snapshot = await accessibilitySnapshot({ page: state.tradePage, search: /paste|history|bookmark/i });
console.log(snapshot);
Interact with panel tabs:
// Click a tab in the extension panel
await state.tradePage.locator('aria-ref=<ref>').click();
await accessibilitySnapshot({ page: state.tradePage, showDiffSinceLastCall: true });
const itemText = `Item Class: Body Armours
Rarity: Rare
Damnation Shell
Expert Hexer's Robe
--------
Energy Shield: 135
--------
Requirements:
Level: 65
Int: 134
--------
Item Level: 74
--------
+35 to maximum Life
+42% to Fire Resistance
+28% to Lightning Resistance`;
const pasteInput = state.tradePage.locator('input[placeholder*="Paste"]');
await pasteInput.click();
await pasteInput.evaluate((el, text) => {
el.value = '';
const event = new ClipboardEvent('paste', {
clipboardData: new DataTransfer(),
bubbles: true
});
event.clipboardData.setData('text/plain', text);
el.dispatchEvent(event);
}, itemText);
After pasting, check that:
// Check stat filters appeared
const statsSnapshot = await accessibilitySnapshot({ page: state.tradePage, search: /stat filter|resistance|life/i });
console.log(statsSnapshot);
// Check history tab
await state.tradePage.locator('button:has-text("History")').click();
const historySnapshot = await accessibilitySnapshot({ page: state.tradePage, search: /history/i });
console.log(historySnapshot);
pathofexile.com/trade or trade2)bun run dev to ensure dev build is loadedmcp__playwriter__resetbun run dev completed without errorsAfter changes, verify:
bun run dev completes without errors| Task | Command/Action |
|---|---|
| Dev build | bun run dev |
| Production build | bun run build |
| Start Storybook | bun run storybook |
| Run tests | bun test |
| Reset Playwriter | mcp__playwriter__reset |
| Check extension | Accessibility snapshot for DEV indicator |
| Find trade page | context.pages().find(p => p.url().includes('pathofexile.com/trade')) |