Testing with GitHub Copilot Agents

Audience: Developers, QA Engineers, Tech Leads  |  Duration: ~90 min  |  Pre-requisites: GitHub Copilot subscription, Node.js 18+, VS Code

---

What You Will Build

An automated Playwright test suite for the T-Rex Runner — a browser-based canvas game with a Node.js high-score API — written entirely by GitHub Copilot agents. You write the prompts; Copilot writes the tests.

Component	Tech	URL
Game UI	HTML + Vanilla JS canvas	http://127.0.0.1:8080
High-Score API	Node.js + Express	http://localhost:3000
Test specs	Playwright TypeScript	trex-runner/tests/

---

Prerequisites

• VS Code with the GitHub Copilot Chat extension
• Node.js 18+ and npm
• Git CLI
• GitHub Copilot subscription (Individual, Business, or Enterprise)
• Playwright MCP server — configured in .vscode/mcp.json during Exercise 05

---

Workshop Map

#	Exercise	Copilot Feature	What You Do
01	Setup, VS Code & GitHub Copilot	Copilot Chat — setup	Install extensions, verify inline completions and Chat
02	Run the T-Rex Runner Application	Terminal	Start API (port 3000) and game UI (port 8080)
03	Initialize Playwright	Copilot Chat — Ask Mode	Scaffold playwright.config.ts, create tests/ directory
04	Create Agents & Skill File	Copilot Chat — Agent Mode	Create 3 custom agents + shared SKILL.md
05	Game Launch Scenario	T-Rex Visual Validator	Verify canvas loads, 800×250 px, high score = 0
06	Keyboard Interaction (Jump)	T-Rex Gameplay Tester	Space bar jump — assert no crash, URL unchanged
07	Continuous Gameplay	T-Rex Gameplay Tester	4 s run — assert no errors, gameScore > 0
08	Collision & Restart	T-Rex Collision Tester	Collision → POST to /score/:value → page reload
09	Multiple Jump Stability	T-Rex Gameplay Tester	10 rapid Space presses — no crash or freeze
10	Canvas After Restart	T-Rex Collision Tester	Canvas, high score, and game loop survive reload

Complete exercises in order — each one builds on the previous.

---

Agents & Skill File

Three .agent.md files in .github/ work together via a shared skill file.

Agent	Used In	Test File Generated
trex-visual-agent.agent.md — T-Rex Visual Validator	Ex 05	trex-visual.spec.ts
trex-gameplay-agent.agent.md — T-Rex Gameplay Tester	Ex 06, 07, 09	trex-gameplay.spec.ts
trex-collision-agent.agent.md — T-Rex Collision Tester	Ex 08, 10	trex-collision.spec.ts

Create agents: Copilot Chat → Chat Customizations icon → Agent → Generate agents → New agent (workspace)

The shared skill file (.github/skills/trex-automation/SKILL.md) gives all agents: accessibility locators, the disableCollision pattern, window.gameScore access, and API endpoints.

---

Key Features Covered

GitHub Copilot Features

Feature	Exercise
Copilot Chat — Ask Mode: scaffold playwright.config.ts from a single prompt	Ex 03
Custom Agents (.agent.md): scoped role, tools, and system prompt per agent	Ex 04
Shared Skill File (SKILL.md): centralised locators and patterns reused by all agents	Ex 04
Copilot Chat — Agent Mode: natural language prompt → full test file generated	Ex 04–10
Playwright MCP Server: agent controls a real browser via accessibility tree	Ex 05–10
VS Code Browser Tab Sharing: Quick Open Browser Tab → share active tab with agents	Ex 05–10

Testing Techniques

Technique	Exercise
Accessibility-only locators — getByLabel, getByRole, getByText; no CSS or XPath	Ex 05–10
Canvas visibility + boundingBox() dimension assertion	Ex 05
page.on('pageerror') — capture silent JS errors during gameplay	Ex 05, 07, 09
page.press('Space') — keyboard interaction and page stability check	Ex 06
page.evaluate(() => window.gameScore) — read game state not exposed in the DOM	Ex 06–10
disableCollision() — runtime page.evaluate() override, zero source changes	Ex 06, 07, 09
URL stability check — detect silent reload loops	Ex 06, 07, 09
4-second continuous gameplay monitoring — errors, frozen score, URL drift	Ex 07
page.waitForRequest() — intercept natural collision POST to /score/:value	Ex 08
waitForNavigation() — assert location.reload() fires on game-over	Ex 08, 10
Rapid input stress test — 10 × Space at 200 ms intervals	Ex 09
Post-restart full state validation — canvas, high score, game loop	Ex 10

---

Getting Started

# 1. Clone and open in VS Code
git clone https://github.com/CanarysAutomations/Testing-with-Agents-GHCP.git
cd Testing-with-Agents-GHCP

# 2. Install API dependencies
cd trex-runner/api && npm install

# 3. Start the API server (Terminal A)
node server.js          # API running at http://localhost:3000

# 4. Serve the game UI (Terminal B)
cd ../ui && npx http-server -p 8080   # UI at http://127.0.0.1:8080

Then open Exercise 01 and work through the exercises in order.

Run the full test suite

cd trex-runner
npx playwright test tests/trex-visual.spec.ts tests/trex-gameplay.spec.ts tests/trex-collision.spec.ts --reporter=list
npx playwright show-report

---

Further Learning

Resource	Link
Playwright MCP — Getting Started	playwright.dev/docs/getting-started-mcp
Playwright Documentation	playwright.dev/docs/intro
GitHub Copilot Documentation	docs.github.com/en/copilot
Integrate MCP with Copilot	github.com/skills/integrate-mcp-with-copilot
E2E AI SDLC with GitHub Copilot	CanarysAutomations/E2E-AI-SDLC
Debugging and Automation with GHCP	CanarysAutomations/Debugging-Automation

---

Instructor Note: Every exercise has a copy-paste prompt — participants never write code from scratch. Debrief after each exercise by reviewing the generated spec files before moving on.