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 ct charm new --api-url http://localhost:8000 --identity ../community-patterns/claude.key --space claude-my-pattern-1130-1 pattern.tsx
2. Note the charm 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 `charm new` (see warning below)
2. Note the NEW charm ID
3. Use Playwright to test at http://localhost:8000/SPACE-NAME/NEW-CHARM-ID
4. Test that changes work as expected

🚨 NEVER use charm setsrc to update patterns!

charm setsrc corrupts charm state and causes charms to render blank on direct navigation. ALWAYS use charm new to deploy a fresh instance instead. Getting a new charm 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.