本文へ移動
cccskills
無料GitHub で公開

e2e

End-to-end tests of a game with Playwright (apps/*/e2e/*.e2e.ts) on a WebGL canvas, and taking screenshots of the running game. Load before writing or debugging an e2e test, or to look at the game in a browser.

日本語の概要は準備中です。原文の説明を表示しています。

ltruchot/seed-pixi-typescriptスター 35(GitHub 35 + cccskills 0)
連携ツールPlaywright

実行スコア 未検証

インストール方法を見る

含まれるファイル(1)

  • SKILL.md2.7 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

e2e on a canvas

apps/game/e2e/playwright.config.ts: Chromium, webServer = vp preview (port 8081) on the build. So: vp -C apps/game build && vp -C apps/game run e2e (the ready script does both). Results and traces: .local/test-results/ (gitignored). Chromium once per machine: vp -C apps/game exec playwright install chromium (CI: --with-deps).

No false green

A canvas has no DOM to query: "the canvas is visible" passes on a black screen. Assert on pixels, and prove the test can fail:

  • Compare page.screenshot({ clip }) buffers. game.e2e.ts: the center square differs from a background-only corner (the hero is drawn), then after holding ArrowRight it equals it (the hero left). Wait with expect.poll, never a fixed delay before the first assertion.
  • Collect pageerror and console errors for the whole test; assert [] at the end.
  • After writing a test, break the game on purpose (e.g. speed 0), rebuild, see it fail, revert.

Traps

SymptomCauseFix
Lint no-conditional-in-test on an if in a page.on handlerany condition inside test()a module-level helper (collectErrors(page))
require-await on expect.poll(async () => helper())the arrow only returns a promiseexpect.poll(() => helper())
The test sees the old gamee2e runs on dist/, not the dev servervp -C apps/game build first
Port 8081 is already in usea vp preview left running (locally reuseExistingServer)stop it by PID, skill vp ("Dev server under WSL")
"BEWARE: your OS is not officially supported by Playwright"WSL distro newer than Playwright's listharmless: the ubuntu24.04 build runs

Just looking at the game

Take a screenshot to see a visual change: a one-off test in e2e/ that calls page.screenshot({ path: "../../.local/screenshots/x.png" }), run it, read the PNG, delete the test.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

add-game

無料

Add a second game to the monorepo (apps/<game>) from the seed game, wired to the gate. Load when asked to create a new game / app / prototype in this repo.

日本語の概要は準備中です。原文の説明を表示しています。

ltruchot/seed-pixi-typescript352026年9月24日 更新

game

無料

How a game of this seed is organized (apps/<game>/src) and how to add gameplay with PixiJS v8 without breaking the strict gate. Load before editing apps/*/src or apps/*/tests.

日本語の概要は準備中です。原文の説明を表示しています。

ltruchot/seed-pixi-typescript352026年9月24日 更新

pixijs

無料

Use this skill first for ANY PixiJS v8 task; it routes to the right specialized skill for the job. Covers the full PixiJS surface: Application setup, the scene graph (Container, Sprite, Graphics, Text, Mesh, ParticleContainer, DOMContainer, GifSprite), rendering (WebGL/WebGPU/Canvas, render loop, custom shaders, filters, blend modes), assets, events, color, math, ticker, accessibility, performance, environments, migration from v7, and project scaffolding. Triggers on: pixi, pixi.js, pixijs, PixiJS, v8, Application, app.init, Sprite, Container, Graphics, Text, Mesh, ParticleContainer, DOMContainer, GifSprite, Assets, Ticker, renderer, WebGL, WebGPU, scene graph, filter, shader, blend mode, texture, BitmapText, create-pixi, how do I draw, how do I render, how do I animate in pixi.

日本語の概要は準備中です。原文の説明を表示しています。

ltruchot/seed-pixi-typescript352026年9月24日 更新

Use this skill when adding screen reader and keyboard navigation to PixiJS v8 apps. Covers AccessibilitySystem options (enabledByDefault, debug, activateOnTab, deactivateOnMouseMove), per-container accessibility properties, shadow DOM overlay, mobile touch-hook activation. Triggers on: accessibility, a11y, screen reader, ARIA, keyboard navigation, tab order, AccessibilitySystem, accessibleTitle, accessibleHint, tabIndex, accessibleChildren.

日本語の概要は準備中です。原文の説明を表示しています。

ltruchot/seed-pixi-typescript352026年9月24日 更新

Use this skill when creating and configuring a PixiJS v8 Application. Covers new Application() + async app.init() options (width, height, background, antialias, resolution, autoDensity, preference, resizeTo, autoStart, sharedTicker, canvas, useBackBuffer, powerPreference, eventFeatures, accessibilityOptions, gcActive, bezierSmoothness, webgl/webgpu/canvasOptions per-renderer overrides), app.stage/renderer/canvas/screen/domContainerRoot access, ResizePlugin, TickerPlugin, CullerPlugin (cullable, cullArea), custom ApplicationPlugin via ExtensionType.Application, start/stop lifecycle, and app.destroy() with releaseGlobalResources. Triggers on: Application, app.init, app.stage, app.renderer, app.canvas, app.screen, app.domContainerRoot, ApplicationOptions, ApplicationPlugin, ExtensionType.Application, resizeTo, sharedTicker, skipExtensionImports, preferWebGLVersion, preserveDrawingBuffer, cullable, CullerPlugin, app.start, app.stop, app.destroy, releaseGlobalResources.

日本語の概要は準備中です。原文の説明を表示しています。

ltruchot/seed-pixi-typescript352026年9月24日 更新

Use this skill when loading and managing resources in PixiJS v8. Covers Assets.init, Assets.load/add/unload, bundles, manifests, background loading, onProgress, caching, spritesheets, video textures, web fonts, bitmap fonts, animated GIFs, compressed textures, SVG as texture or Graphics, resolution detection, per-asset data options, and forcing a specific loader with the parser field (for extension-less URLs). Triggers on: Assets, Assets.load, Assets.init, loadBundle, manifest, backgroundLoad, Spritesheet, Cache, LoadOptions, unload, parser, loadParser, loadWebFont, loadBitmapFont, loadVideoTextures, GifSource, VideoSourceOptions.

日本語の概要は準備中です。原文の説明を表示しています。

ltruchot/seed-pixi-typescript352026年9月24日 更新

ltruchot のスキルをすべて見る

このスキルの問題を報告する