codegen-transform

Converts raw Playwright codegen output into ComfyUI convention-compliant test code.

2.0k|679|Updated Jun 13, 2024
One-click install
npx skills add https://github.com/Comfy-Org/ComfyUI_frontend --skill codegen-transform
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: codegen-transform
Source: https://github.com/Comfy-Org/ComfyUI_frontend/tree/main/.claude/skills/codegen-transform
Command: npx skills add https://github.com/Comfy-Org/ComfyUI_frontend --skill codegen-transform

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Raw Playwright codegen recordings use fragile pixel coordinates, arbitrary waits, and bare page calls that violate ComfyUI testing conventions, requiring tedious manual rewriting before tests can be committed.

Core Features & Use Cases

  • Rule-Based Transformation: Applies ordered replacement rules mapping raw codegen patterns (page.goto, waitForTimeout, bare locators) to ComfyUI fixture equivalents like comfyPage.canvas and nextFrame().
  • Fixture Migration Guidance: Converts @playwright/test imports and page fixtures to the comfyPage fixture API with descriptive test names, describe blocks, and scenario tags.
  • Anti-Pattern Detection: Flags prohibited patterns such as waitForTimeout, page.goto, bare CSS selectors, and shared test state.
  • Use Case: A QA tester records a canvas interaction test with the Playwright recorder, pastes the raw output, and receives a rewritten test using node references, proper tags, and canvas cleanup hooks.

Quick Start

Transform this pasted raw Playwright codegen output into a ComfyUI convention-compliant test using the comfyPage fixture.

Frequently Asked Questions about codegen-transform

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

FAQPage Schema
How do I convert raw Playwright codegen output to project conventions?

Apply ordered replacement rules: swap the @playwright/test import for the comfyPage fixture, remove page.goto calls, replace waitForTimeout with nextFrame(), and wrap tests in describe blocks with scenario tags. Node interactions should use node references instead of pixel coordinates.

How to refactor recorded Playwright tests to use custom fixtures?

Replace the page fixture with comfyPage, which handles navigation automatically and exposes helpers like canvas, searchBox, and nodeOps. Access the raw page only through comfyPage.page for APIs not wrapped by fixtures.

When should pixel coordinates be kept in Playwright canvas tests?

Keep coordinates only for inherently position-based actions like empty canvas clicks, panning, and zooming. Replace coordinates with node references from getNodeRefsByType when interacting with specific nodes.

Why is waitForTimeout discouraged in Playwright tests?

Arbitrary waits cause flaky, slow tests. Use comfyPage.nextFrame() after canvas mutations or retrying assertions instead, which synchronize with actual rendering state rather than fixed delays.

What tags are required for ComfyUI Playwright tests?

All tests need a describe block with scenario tags: @canvas for canvas tests, @widget for widget tests, and @screenshot for visual regression tests. Canvas tests also need an afterEach hook calling canvasOps.resetView().