writing-playwright-tests

Writes Playwright end-to-end browser tests for the ComfyUI_frontend repository.

Updated Jul 28, 2026
One-click install
npx skills add https://github.com/christian-byrne/comfy-skills --skill writing-playwright-tests-christian-byrne
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: writing-playwright-tests
Source: https://github.com/christian-byrne/comfy-skills/tree/main/skills/writing-playwright-tests
Command: npx skills add https://github.com/christian-byrne/comfy-skills --skill writing-playwright-tests-christian-byrne

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing reliable Playwright e2e tests for ComfyUI_frontend requires knowing its custom fixtures, canvas timing quirks, and CI conventions, and guessing at these produces flaky tests that pass locally but fail in CI. ## Core Features & Use Cases - Fixture-Grounded Test Authoring: Directs you to read the ComfyPage fixture code and reuse existing patterns from browser_tests/tests/ instead of inventing selectors. - Flakiness Prevention: Provides a symptom-to-fix table covering missing nextFrame() calls, focus issues, drag timing, and test pollution. - CI and Screenshot Conventions: Explains Linux-only screenshot baselines, PR label workflows for updating expectations, and trace-based CI debugging. - Use Case: You need to add a regression test for a Vue node widget interaction. The skill guides you to enable Vue nodes via settings, load a premade JSON workflow asset, use CSS class assertions for node state, and tag the test correctly. ## Quick Start Write a Playwright e2e test for the ComfyUI_frontend canvas that loads a workflow and verifies a KSampler node appears.

Frequently Asked Questions about writing-playwright-tests

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

FAQPage Schema
How do I write Playwright e2e tests for ComfyUI_frontend?▼

Start by searching browser_tests/tests/ for similar existing tests and reading the fixtures in browser_tests/fixtures/. Use the comfyPageFixture import, load premade JSON workflow assets with comfyPage.workflow.loadWorkflow(), and follow the quick start template structure.

Why does my Playwright test pass locally but fail in CI?▼

The most common cause is a missing await comfyPage.nextFrame() after canvas operations, which lets the canvas sync before assertions. Other causes include missing element focus for keyboard shortcuts and platform-specific screenshot differences, since baselines are Linux-only.

Should I use Vue nodes or LiteGraph canvas APIs in Playwright tests?▼

Choose based on what you are testing: use comfyPage.vueNodes for Vue-rendered DOM widgets and CSS states, and comfyPage.nodeOps for canvas interactions and connections. Vue nodes require explicitly enabling the Comfy.VueNodes.Enabled setting first.

How do I update Playwright screenshot baselines in CI?▼

Do not commit locally generated screenshots since baselines are Linux-only. Add the 'New Browser Test Expectations' label to your PR, and CI will generate and update the expected screenshots automatically.

Why should I avoid waitForTimeout in Playwright tests?▼

waitForTimeout introduces arbitrary fixed delays that cause flakiness and slow suites. Use auto-retrying assertions like toBeVisible(), expect.poll() for single values, or expect().toPass() for multiple conditions instead.