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.