playbooks

home / skills / chen19007 / my_skills / godot-web-e2e

godot-web-e2e skill

/godot-web-e2e

This skill enables end-to-end Godot Web exports testing via Chrome DevTools, serving locally and validating gameplay through console and state changes.

npx playbooks add skill chen19007/my_skills --skill godot-web-e2e

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
1.8 KB
---
name: godot-web-e2e
description: End-to-end testing for any Godot Web export using Chrome DevTools and a local HTTP server. Use when verifying gameplay behavior in a Web build (not editor) and you need repeatable DevTools-driven input checks and console evidence.
---

# Godot Web E2e

## Overview

Verify Godot gameplay in Web exports using Chrome DevTools only. Export, serve, open in Chrome, focus the canvas, inject input events via DevTools tools, and confirm outcomes via console logs or visible state changes. This skill is project-agnostic; fill in paths, export preset names, and ports for the current project.

## Workflow

### 1) Export Web build

Locate the Godot executable and the project path. Identify the Web export preset name from `export_presets.cfg` (e.g., `Web`).

Run:

```
godot --headless --path "<PROJECT_PATH>" --export-release "<WEB_PRESET_NAME>" "<WEB_EXPORT_PATH>"
```

### 2) Serve the build

Run from the export directory (the folder containing the HTML/JS/WASM):

```
python -m http.server <PORT>
```

### 3) Open in Chrome DevTools

Open:

```
http://localhost:<PORT>/<EXPORT_HTML_FILENAME>
```

Use Chrome DevTools tools to:

- Focus canvas.
- Send input (press/hold keys).
- Read console logs for movement/blocking/transport/respawn confirmation.

### 4) Required validation signals

Confirm at least one of each category in DevTools Console:

- **Movement**: any position/velocity/animation log shows a change after left/right input.
- **Blocking/Action**: state toggles after block/action input.
- **Transport/Transition**: log shows section/scene switch.
- **Respawn/Restart**: log indicates respawn or restart completed.

### 5) Cleanup

Stop any `python -m http.server` processes started for the test.

## Rules

- Use Chrome DevTools for E2E input checks.
- Do NOT use in-game auto input scripts or WebInputTest as a substitute.

Overview

This skill provides a repeatable end-to-end testing workflow for Godot Web exports using Chrome DevTools and a local HTTP server. It helps verify gameplay behaviors in an actual Web build (HTML/JS/WASM) by driving inputs through DevTools and confirming outcomes from console logs or visible state changes. The process is project-agnostic: specify export preset names, paths, and ports for each project.

How this skill works

Export the Godot project as a Web build, serve the exported files via a simple HTTP server, and open the build in Chrome. Use Chrome DevTools to focus the game canvas, inject input events (key press/hold/release), and observe console logs or visual state to validate movement, actions, transitions, and respawn behavior. Stop the HTTP server after validation.

When to use it

  • Validate player movement and physics in a Web export before deployment.
  • Confirm input handling and action/block states in a browser environment.
  • Check scene transitions, transports, and respawn behavior in Web builds.
  • Run repeatable DevTools-driven tests as part of a pre-release checklist.
  • Reproduce browser-specific bugs that do not appear in the editor.

Best practices

  • Export with the correct Web export preset name from export_presets.cfg and keep paths consistent.
  • Serve the export folder from the HTML/JS/WASM directory using python -m http.server to avoid file:// restrictions.
  • Use DevTools to focus the canvas before sending inputs and use deterministic input sequences.
  • Log clear, machine-parseable messages for movement, state changes, transitions, and respawn events.
  • Validate at least one signal from each required category: movement, action/blocking, transport/transition, respawn.
  • Stop any local HTTP server processes started for the test to free ports and avoid conflicts.

Example use cases

  • Automated pre-release checklist: export game, run server, reproduce a fixed input sequence, confirm console signals.
  • Bug verification: reproduce a reported browser-only input bug by simulating the same key timing in DevTools.
  • Regression check: ensure a movement change did not break blocking or respawn logic after code changes.
  • Cross-team validation: QA serves the build locally and records console evidence for development.

FAQ

Do I need a special test harness inside Godot?

No. This approach uses Chrome DevTools to inject inputs and console logs emitted by your game. Ensure your game emits clear logs for the required validation signals.

Can I automate the DevTools input sequence?

You can script DevTools via the DevTools Protocol, but the skill emphasizes using DevTools tools directly for reliable, repeatable checks. Avoid in-game auto input scripts or WebInputTest substitutes.