Browser Gameplay

Test the game through the browser UI using Chrome DevTools MCP tools.

Announce: "I'm using gameplay-browser to test via UI."

Chrome DevTools Tools

Use these MCP tools for browser testing:

chrome-devtools_navigate_page

chrome-devtools_take_snapshot

chrome-devtools_take_screenshot

chrome-devtools_click

chrome-devtools_fill

chrome-devtools_select_option

chrome-devtools_hover

chrome-devtools_scroll

chrome-devtools_list_console_messages

chrome-devtools_list_network_requests

Start Testing

1. Navigate to game:
   chrome-devtools_navigate_page(url: "http://localhost:5173")

2. Take snapshot to find elements:
   chrome-devtools_take_snapshot()
   
3. Look for element refs in snapshot output

Game Flow

1. Start Game

1. Take snapshot to find description input
2. Fill description:
   chrome-devtools_fill(ref: "input_ref", value: "A famous tower in Paris")
3. Take snapshot to find Start button
4. Click Start:
   chrome-devtools_click(ref: "button_ref")
5. Wait for loading, take new snapshot

2. Answer Questions

1. Take snapshot - read current question from page
2. Find Yes/No/Not Sure buttons
3. Click answer:
   chrome-devtools_click(ref: "yes_button_ref")
4. Take new snapshot to see next state

3. Handle Guesses

When the game makes a guess:

1. Take snapshot - see guess displayed
2. Click "Yes" to confirm or "No" to deny
3. Take new snapshot to see result

4. Give Up

1. Find and click "Give Up" button
2. Take snapshot - find search input
3. Fill search:
   chrome-devtools_fill(ref: "search_ref", value: "Eiffel Tower")
4. Take snapshot - find result
5. Click on correct place to submit

Finding Element Refs

After

chrome-devtools_take_snapshot()

- button "Start Game" [ref: 15]
- textbox "Enter description" [ref: 12]
- button "Yes" [ref: 23]
- button "No" [ref: 24]

Use the

ref

Check for Errors

1. Console errors:
   chrome-devtools_list_console_messages()

2. Failed API calls:
   chrome-devtools_list_network_requests()
   Look for non-200 status codes

Screenshot for Evidence

chrome-devtools_take_screenshot(filename: "game-state.png")

Complete Game Example

1. chrome-devtools_navigate_page(url: "http://localhost:5173")
2. chrome-devtools_take_snapshot()  → find input ref
3. chrome-devtools_fill(ref: "X", value: "A castle in Poland")
4. chrome-devtools_take_snapshot()  → find Start button ref
5. chrome-devtools_click(ref: "Y")
6. chrome-devtools_take_snapshot()  → read question, find answer buttons
7. chrome-devtools_click(ref: "yes_ref")
8. chrome-devtools_take_snapshot()  → check next state
9. Repeat 7-8 until game ends
10. chrome-devtools_take_screenshot(filename: "result.png")
11. chrome-devtools_list_console_messages()  → check for errors

Common Issues

Page not loading

• Dev server not running
• Try:

  bun run dev

  in project root first

Elements not found in snapshot

• Page still loading - wait and take new snapshot
• Element may be hidden/conditional

Click not working

• Element may be disabled or loading
• Take snapshot to verify element state

Place search returns "No places found"

• Use partial name: "Angkor" instead of "Angkor Wat"
• Search is case-insensitive but needs substring match
• Try shorter, more general terms

Pressing Enter/Return

• Use

  chrome-devtools_press_key(key: "Enter")

  or

  NumpadEnter

• NOT "Return" (invalid key name)

Element ref expired

• DOM changed between snapshot and click
• Take fresh snapshot and use new ref numbers