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:

Tool	Purpose
`chrome-devtools_navigate_page`	Go to URL
`chrome-devtools_take_snapshot`	Get page accessibility tree (find elements)
`chrome-devtools_take_screenshot`	Capture visual state
`chrome-devtools_click`	Click buttons/elements by ref
`chrome-devtools_fill`	Enter text in inputs
`chrome-devtools_select_option`	Select from dropdowns
`chrome-devtools_hover`	Hover over elements
`chrome-devtools_scroll`	Scroll page
`chrome-devtools_list_console_messages`	Check for errors
`chrome-devtools_list_network_requests`	Check API calls

Start Testing

code

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

code

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

code

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:

code

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

code

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(), look for elements like:

code

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

Use the ref number in click/fill commands.

Check for Errors

code

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

code

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

Complete Game Example

code

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