develop-web-game

Automate HTML/JS web game testing with Playwright and deterministic frame stepping.

2|1|Updated Apr 2, 2026
One-click install
npx skills add https://github.com/Sacred-G/oh-my-claw --skill develop-web-game-sacred-g
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: develop-web-game
Source: https://github.com/Sacred-G/oh-my-claw/tree/main/secure-openclaw/skills-main/skills/.curated/develop-web-game
Command: npx skills add https://github.com/Sacred-G/oh-my-claw --skill develop-web-game-sacred-g

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Web game developers often struggle with flaky manual testing and slow iteration cycles. This skill provides a deterministic Playwright-based loop to validate changes through scripted actions, automated observation, and centralized state reporting.

Core Features & Use Cases

  • Deterministic frame stepping using window.advanceTime for reliable Playwright testing.
  • Playwright-driven action payloads and a render_game_to_text state reader to validate visuals and interactions.
  • End-to-end validation for HTML/JS games during build, debugging, and QA, including screenshot capture and console/error inspection.

Quick Start

Run the Playwright client to iterate a single feature, capturing screenshots and render_game_to_text state after each step.

Frequently Asked Questions about develop-web-game

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write deterministic Playwright tests for an HTML canvas web game?

Deterministic Playwright tests for web games require a custom time-step hook like advanceTime and a render_game_to_text state reader to validate canvas visuals and interactions reliably without manual frame checking.

What is the best way to automate QA for HTML5 games using Playwright?

Automating QA for HTML5 games involves sending scripted action payloads through Playwright, capturing screenshots, and inspecting console errors alongside a centralized front-end rendering state getter for feature-by-feature validation.

Do I need a custom time hook to test web games with Playwright?

Yes, deterministic testing requires a window.advanceTime hook to step through frames reliably. This ensures Playwright captures consistent game states and visual outputs during automated action bursts.

Can I use Playwright to validate single canvas UI interactions in a JavaScript game?

Playwright can validate single canvas-based UI interactions by executing scripted input bursts and reading the extracted render_game_to_text state, verifying that visual rendering matches expected game logic outcomes.

Why are my Playwright tests flaky for web game development?

Playwright tests for web games are flaky without deterministic frame stepping. Implementing an advanceTime hook and a text-based state reader eliminates timing race conditions during automated gameplay validation.

How to debug HTML web games using automated screenshots and state inspection?

Debugging HTML web games through automated screenshots and state inspection uses a Playwright client to iterate features, capturing visual output and reading render_game_to_text text state after each scripted input burst.