testing

# 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.
```