stress-test-game

name	stress-test-game
description	End-to-end stress test for City Tycoon game using Playwright. Tests placing roads, power plants, water towers, interacting with NPC proposals (accept/reject/counter), and verifying construction progress. Use when you need to QA test the game, verify game features work correctly, or run a smoke test after changes.

Game Stress Test Skill

Overview

This skill performs end-to-end testing of the City Tycoon game using Playwright. It tests both UI interactions (clicking buttons, modals) and game logic (state changes, proposals).

Testing Philosophy

• Use Playwright clicks for all UI interactions (buttons, modals, canvas)
• Use Debug API for inspection (get state, get proposals) and time advancement
• This ensures both the UI and logic are working correctly together

Prerequisites

• Dev server running at http://localhost:3000
• MCP Playwright plugin enabled

Debug API Reference

In development mode, window.__GAME_DEBUG__ provides:

getState(): GameState           // Inspect current state
getProposals(): Proposal[]      // Get pending proposals
advanceTicks(n: number): void   // Fast-forward time
setCash(amount: number): void   // Set cash for testing

---

Test Workflow

Step 1: Setup & Navigation

1. Navigate to the game:

   Use browser_navigate to go to http://localhost:3000
   

2. Take a snapshot to verify the game loaded:

   Use browser_snapshot to capture the accessibility tree
   

3. Verify these elements are present:

   • Cash display (e.g., "$10,000" or "$10.0K")
   • Day counter (e.g., "Day 1")
   • Speed control buttons (pause, 1x, 2x, 3x)
   • Toolbar with tool buttons

4. Verify Debug API is available:

   await page.evaluate(() => !!window.__GAME_DEBUG__);
   

Pass criteria: All UI elements visible, Debug API available

---

Step 2: Tool Selection & Tile Placement (UI Clicks)

Test that clicking toolbar buttons and canvas actually places tiles.

2.1 Place a Road (UI)

1. Get initial cash via Debug API:

   await page.evaluate(() => window.__GAME_DEBUG__.getState().cash);
   

2. Click the Road tool button:

   Use browser_click on the Road button (🛣️ Road $50)
   

3. Click on canvas to place road at a grass tile:

   // Click on tile (3, 12) - known grass area
   async (page) => {
     const canvas = await page.locator('canvas').first();
     const box = await canvas.boundingBox();
     const centerX = box.width / 2;
     const centerY = box.height / 2;
     const gridX = 3, gridY = 12;
     const screenX = (gridX - gridY) * 32 + centerX;
     const screenY = (gridX + gridY) * 19.2 + centerY;
     await page.mouse.click(box.x + screenX, box.y + screenY);
   }
   

4. Verify cash decreased via Debug API:

   await page.evaluate(() => window.__GAME_DEBUG__.getState().cash);
   // Should be $50 less
   

Pass criteria: Cash decreased by $50 after UI click

2.2 Place Power Plant (UI)

1. Click Power Plant button (⚡ Power $500)
2. Click canvas at tile (4, 12)
3. Verify cash decreased by $500

2.3 Place Water Tower (UI)

1. Click Water Tower button (💧 Water $300)
2. Click canvas at tile (3, 13)
3. Verify cash decreased by $300

Total spent: $850 ($50 + $500 + $300)

---

Step 3: Speed Controls (UI Clicks)

3.1 Test Pause Button

1. Get current day via Debug API
2. Click pause button (⏸️) via browser_click
3. Wait 2 seconds
4. Verify day hasn't changed

3.2 Test 3x Speed Button

1. Note current day
2. Click 3x speed button (▶▶▶) via browser_click
3. Wait 3 seconds
4. Verify day has advanced

Pass criteria: UI buttons control game speed correctly

---

Step 4: NPC Proposals (UI + Debug API)

4.1 Generate Proposals (Debug API for speed)

1. Advance time to generate proposals:

   await page.evaluate(() => {
     const debug = window.__GAME_DEBUG__;
     debug.advanceTicks(100);
     return debug.getProposals().length;
   });
   

2. If no proposals, advance more ticks and retry

Pass criteria: At least one proposal exists

4.2 Open Proposal Modal (UI Click)

1. Get proposal info via Debug API:

   await page.evaluate(() => {
     const debug = window.__GAME_DEBUG__;
     const proposals = debug.getProposals();
     return proposals[0]; // Get first proposal with tile location
   });
   

2. Click Select tool button via browser_click

3. Click on the proposal's tile on canvas:

   // Use the tile coordinates from the proposal
   async (page) => {
     const canvas = await page.locator('canvas').first();
     const box = await canvas.boundingBox();
     const centerX = box.width / 2;
     const centerY = box.height / 2;
     // Use proposal.tile.x and proposal.tile.y
     const screenX = (gridX - gridY) * 32 + centerX;
     const screenY = (gridX + gridY) * 19.2 + centerY;
     await page.mouse.click(box.x + screenX, box.y + screenY);
   }
   

4. Take snapshot - verify ProposalModal appears with Accept/Counter/Reject buttons

Pass criteria: Modal opens showing proposal details

4.3 Test Accept Button (UI Click)

1. Get cash before via Debug API
2. Click "Accept" button in modal via browser_click
3. Take snapshot - verify modal closed
4. Get cash after via Debug API
5. Verify cash increased by offer amount
6. Verify building placed on grid:

   await page.evaluate(() => {
     const debug = window.__GAME_DEBUG__;
     const state = debug.getState();
     // Check the proposal's tile has a building now
   });
   

Pass criteria: Accept button works, cash increases, building placed

4.4 Test Reject Button (UI Click) - Optional

If another proposal exists:

1. Open modal by clicking on proposal tile
2. Click "Reject" button via browser_click
3. Verify modal closes
4. Verify proposal removed from pending list

4.5 Test Counter Flow (UI Click) - Optional

If another proposal exists:

1. Open modal by clicking on proposal tile
2. Click "Counter" button via browser_click
3. Take snapshot - verify counter UI appears (slider, Send Offer button)
4. Adjust slider if possible
5. Click "Send Offer" button
6. Verify outcome (accepted or rejected)

---

Step 5: Construction Progress

1. Find a building under construction via Debug API:

   await page.evaluate(() => {
     const debug = window.__GAME_DEBUG__;
     const state = debug.getState();
     for (let y = 0; y < state.gridSize; y++) {
       for (let x = 0; x < state.gridSize; x++) {
         const tile = state.grid[y][x];
         if (tile.building && tile.building.constructionProgress < 100) {
           return { x, y, progress: tile.building.constructionProgress };
         }
       }
     }
     return null;
   });
   

2. Advance time via Debug API:

   await page.evaluate(() => window.__GAME_DEBUG__.advanceTicks(100));
   

3. Check progress increased:

   // Same query, verify constructionProgress increased
   

4. Continue until building completes (100%)

5. Take screenshot to verify completed building icon visible

Pass criteria: Construction progresses and completes

---

Results Summary

## Stress Test Results

### Step 1: Setup & Navigation
- [ ] Game loaded successfully
- [ ] All UI elements present
- [ ] Debug API available

### Step 2: Tool Placement (UI Clicks)
- [ ] Road button click works
- [ ] Road placed on canvas click ($50 deducted)
- [ ] Power Plant placed ($500 deducted)
- [ ] Water Tower placed ($300 deducted)

### Step 3: Speed Controls (UI Clicks)
- [ ] Pause button works
- [ ] 3x speed button works

### Step 4: NPC Proposals (UI + Debug)
- [ ] Proposals generate (debug API)
- [ ] Clicking proposal tile opens modal (UI)
- [ ] Accept button works (UI)
- [ ] Reject button works (UI) - optional
- [ ] Counter flow works (UI) - optional

### Step 5: Construction
- [ ] Building progresses over time
- [ ] Building completes at 100%

### Overall: X/Y tests passed

---

Coordinate Formula

For canvas clicks, use this isometric conversion:

const screenX = (gridX - gridY) * 32 + centerX;
const screenY = (gridX + gridY) * 19.2 + centerY;

Where:

• centerX = canvasWidth / 2
• centerY = canvasHeight / 2
• Known grass tiles: (3,12), (4,12), (3,13), (2,11), (5,11)

---

Troubleshooting

Canvas clicks not placing tiles

• Ensure correct tool is selected first (click tool button)
• Try different grass tile coordinates
• Verify tile isn't water via screenshot

Proposal modal not opening

• Use Debug API to get exact proposal tile coordinates
• Ensure Select tool is active
• Click directly on the proposal's tile position

Debug API not available

• Ensure bun run dev (development mode)
• Check console for "[GameContext] Debug API available"