skills.rest
Grimblaz
GrimblazCOMMUNITY
Explore all skills by this author →
GitHub

browser-canvas-testing

Translates game-space coordinates to CSS page coordinates for Playwright-based canvas interactions.

3|Updated Dec 7, 2025
Search Tags:#testing#canvas#playwright#phaser#vs-code#coordinate-mapping#canvas-testing
One-click install
npx skills add https://github.com/Grimblaz/agent-orchestra --skill browser-canvas-testing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-canvas-testing
Source: https://github.com/Grimblaz/agent-orchestra/tree/main/skills/browser-canvas-testing
Command: npx skills add https://github.com/Grimblaz/agent-orchestra --skill browser-canvas-testing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Canvas-based applications rendered in VS Code cannot be interacted with using traditional DOM selectors. This Skill provides guidance to reliably automate interactions with canvas content, including coordinate translation and safe use of Playwright-based actions.

Core Features & Use Cases

  • Click canvas objects by translating game-space coordinates to CSS page coordinates and using runPlaywrightCode.
  • Verify canvas visuals with screenshotPage and read or inspect game state through page.evaluate workflows.
  • Consider canvas rendering modes (e.g., FIT vs RESIZE) and common pitfalls like rendering delays or multiple canvases.

Quick Start

Interact with canvas-based games by converting game-space coordinates to CSS page coordinates and clicking via runPlaywrightCode.

Frequently Asked Questions about browser-canvas-testing

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

FAQPage Schema
How do I click objects inside an HTML canvas during Playwright testing?▼

To click HTML canvas objects during Playwright testing, you must translate game-space coordinates to CSS page coordinates and execute the click via runPlaywrightCode after waiting for the canvas to render.

Why does my Phaser game test fail to interact with canvas elements in VS Code?▼

Phaser game tests fail to interact with canvas elements in VS Code because traditional DOM selectors cannot target canvas content, requiring coordinate mapping and runPlaywrightCode to translate game-space coordinates to CSS page coordinates.

Does canvas coordinate mapping handle different Phaser scale modes like FIT and RESIZE?▼

Canvas coordinate mapping handles FIT mode by computing CSS coordinates from game-space coordinates, but warns about necessary adjustments for RESIZE mode to ensure accurate Playwright-based canvas interactions.

Can I verify canvas visuals or read game state using Playwright?▼

You can verify canvas visuals using screenshotPage and read game state through page.evaluate workflows, allowing you to inspect and manipulate Phaser or Canvas applications during automated testing.

What are common limitations when automating canvas interactions with Playwright?▼

Limitations when automating canvas interactions include rendering delays that require explicit waits, multiple canvas targeting issues, and coordinate mapping inaccuracies when switching between different rendering scale modes like FIT and RESIZE.

Related Skills

Explore More Software Engineering Skills→
dzyamikdzyamik

game-setup-and-config

Configure Phaser 4 GameConfig for renderer, scaling, and pixel-art settings.

Community
Intermediate
nickhou1983nickhou1983
4

playwright-visual

Automate visual regression testing of web UIs with Playwright pixel diffs.

Community
Advanced
Tyler-R-KendrickTyler-R-Kendrick
1

playwright-cli

Automate browser interactions and web testing workflows via Playwright CLI.

Community
Advanced
lidge-junlidge-jun
5

vision-click

Extract click coordinates from screenshots and click non-DOM elements.

Community
Advanced