testing

name	testing
description	Test patterns with Playwright browser automation. Navigate to deployed patterns, interact with UI elements, verify functionality. Use when testing patterns after deployment or when debugging pattern behavior in browser.

Testing Patterns with Playwright

If Playwright MCP is available, use it to test patterns in a real browser.

⚠️ CRITICAL URL FORMAT

When testing patterns, the URL MUST be:

http://localhost:8000/SPACE-NAME/CHARM-ID

⚠️ COMMON MISTAKES TO AVOID:

• ❌ http://localhost:5173/... - WRONG PORT (that's the shell, not toolshed)
• ❌ http://localhost:8000/CHARM-ID - MISSING SPACE NAME
• ❌ http://localhost:5173/CHARM-ID - WRONG PORT AND MISSING SPACE

If you use the wrong URL format, the pattern will NOT work. No exceptions.

Navigate to Deployed Pattern

Use Playwright to navigate to: http://localhost:8000/SPACE-NAME/CHARM-ID

Example:

http://localhost:8000/claude-counter-1130-1/baedreicqpqie6td...

Test Pattern Functionality

Once the page loads:

1. Wait briefly before first snapshot - Sometimes the initial load shows a login/registration screen for a moment. Wait 1-2 seconds before taking your first snapshot to ensure the pattern has fully rendered.
2. Take a snapshot to see the UI: browser_snapshot
3. Interact with elements: click buttons, fill inputs, check boxes
4. Verify behavior: check that counters increment, items are added, etc.
5. Report any issues found

Registering (First Time Only)

If you see a login/registration page:

1. Click "Register" or "Generate Passphrase"
2. Follow the registration flow
3. Then navigate back to the pattern URL

Space Naming Convention

Use descriptive space names with the claude- prefix:

Format: claude-<pattern-name>-<MMDD>-<counter>

Examples:

• claude-counter-1130-1
• claude-shopping-list-1201-2
• claude-prompt-injection-tracker-1130-1

Testing Workflow

After deploying a new pattern:

1. Deploy with: deno task cf piece new --api-url http://localhost:8000 --identity ../labs/claude.key --space claude-my-pattern-1130-1 pattern.tsx
2. Note the piece ID from output
3. Use Playwright to navigate to: http://localhost:8000/claude-my-pattern-1130-1/CHARM-ID
   ⚠️ MUST be port 8000, MUST include space name
4. Verify all functionality works
5. Report to user if tests pass or if issues found

After updating a pattern:

1. Deploy NEW instance with `piece new` (see warning below)
2. Note the NEW piece ID
3. Use Playwright to test at http://localhost:8000/SPACE-NAME/NEW-CHARM-ID
4. Test that changes work as expected

🚨 NEVER use piece setsrc to update patterns!

piece setsrc corrupts piece state and causes pieces to render blank on direct navigation. ALWAYS use piece new to deploy a fresh instance instead. Getting a new piece ID each time is expected and correct.

When Playwright unavailable:

• Suggest user test manually in browser
• Provide the URL to test
• Ask them to report any issues

Playwright Troubleshooting

If screenshot shows login/registration screen instead of pattern:

The page may not have fully loaded. Wait 1-2 seconds before taking the first snapshot:

Use browser_wait_for with time: 2 before taking the snapshot

This is common when navigating to a pattern URL—the authentication check may briefly show the login screen before the pattern renders.

If Playwright starts opening many tabs:

This can happen after user suspends/resumes their computer. The Chrome connection gets confused.

Solution: Ask user to:

1. Quit the Chrome instance that Playwright opened (the one with "Chrome is being controlled by automated test software" banner)
2. Next Playwright command will open a fresh browser and work normally

Tell user:

Playwright's browser connection got confused after your computer woke up.
Please quit the Chrome window with the yellow "automated test software" banner,
then I'll try again with a fresh browser.