Debugging UI Issues with GitHub Copilot and Playwright MCP

In a recent live stream, developer Chris Reddington demonstrated how GitHub Copilot agent mode and Playwright MCP server can be combined to efficiently debug UI issues in web applications. The session focused on fixing layout problems in his OctoArcade Next.js app, a collection of GitHub-themed mini-games.

Key Highlights

• Problem Identified: Navigation headers overlapping game content and inconsistent spacing between game elements and footers.
• Solution: Copilot agent mode, paired with Playwright MCP, visually inspected pages, diagnosed issues, and proposed CSS fixes.
• Outcome: Automated debugging resolved long-standing UI bugs with minimal manual intervention.

How It Works

1. Custom Instructions: Keeping .github/copilot-instructions.md updated ensures Copilot understands project context and coding styles.
2. Playwright MCP Integration: The server provides tools like browser_snapshot and browser_navigate to simulate user interactions and inspect layouts.
3. Iterative Debugging: Clear, detailed prompts (e.g., "The game must not extend beyond the fold") helped Copilot refine fixes.

Lessons Learned

• Clarity Matters: Unclear requirements led to side effects (e.g., hidden game paddles). Iterative prompting improved results.
• Agentic Efficiency: Copilot autonomously implemented fixes, ran tests, and resolved linting errors.
• Practical Tips:
  • Update custom instructions regularly.
  • Use MCP servers for end-to-end testing.
  • Commit changes frequently for easier rollbacks.

Resources

• GitHub Copilot Custom Instructions
• Playwright MCP Server
• Rubber Duck Thursdays Stream

Chris emphasized that while progress beats perfection, tools like Copilot and Playwright MCP significantly accelerate UI debugging when paired with precise requirements.