New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Writing Playwright Tests

by Comfy-Org in Comfy-Org/ComfyUI_frontend

Writes Playwright e2e tests for ComfyUIfrontend. An agent skill from Comfy-Org/ComfyUI_frontend.

GPL-3.0Auto-check passedTesting & QA

Install Writing Playwright Tests

skills CLI
$ npx skills add Comfy-Org/ComfyUI_frontend --skill writing-playwright-tests -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Comfy-Org/ComfyUI_frontend writing-playwright-tests --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Comfy-Org/ComfyUI_frontend.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/writing-playwright-tests .claude/skills/writing-playwright-tests && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
writing-playwright-tests
GitHub stars
2.1k
Token cost
~2.3k tokens
SKILL.md length
632 words
Files
1
Skills in repo
22
Repo updated
First seen
Licence
GPL-3.0

At a glance

Writes Playwright e2e tests for ComfyUIfrontend. An agent skill from Comfy-Org/ComfyUI_frontend.

  • Works in 4 steps: ALWAYS look at existing tests first.… → ALWAYS read the fixture code. The APIs… → Use premade JSON workflow assets instead… → …
  • Debugging browser tests
  • SKILL.md covers Golden Rules, Vue Nodes vs LiteGraph:…, Common Issues and Test Tags, plus 7 more sections
  • Calls pnpm

What it does

Writing Playwright Tests is an agent skill from Comfy-Org/ComfyUI_frontend. Writes Playwright e2e tests for ComfyUIfrontend. Use when creating, modifying, or debugging browser tests. Triggers on: playwright, e2e test, browser test, spec file.

Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Testing & QA, covering Browser testing, Diffusion and image models and End-to-end testing. It works with Playwright, ComfyUI and Vue.js. The repository describes itself as: Official front-end implementation of ComfyUI. The licence is GPL-3.0.

When your agent uses it

  • Debugging browser tests
  • Tasks that involve Browser testing
  • Tasks that involve Diffusion and image models

Example prompts

  • “Use the writing-playwright-tests skill to write Playwright e2e tests for ComfyUIfrontend. An agent skill from Comfy-Org/ComfyUI_frontend”
  • “/writing-playwright-tests”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. ALWAYS look at existing tests first. Search browser_tests/tests/ for similar patterns before writing new tests.
  2. ALWAYS read the fixture code. The APIs are in browser_tests/fixtures/ - read them directly instead of guessing.
  3. Use premade JSON workflow assets instead of building workflows programmatically.
  4. Seed starting settings with test.use({ initialSettings }). The main

What it can do on your machine

Read from SKILL.md and the folder at commit f9be289. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • pnpm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Writing Playwright Tests loads about 2.3k tokens when it runs. Until then it costs about 48 tokens; SKILL.md has 632 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~48
When it runs · the whole SKILL.md, loaded when a task matches
~2.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Comfy-Org/ComfyUI_frontend at commit f9be289, republished under its GPL-3.0 licence (© Comfy-Org). 632 words, ~2,336 tokens.

Download SKILL.mdSave it as .claude/skills/writing-playwright-tests/SKILL.md (or your agent's skills folder).
name
writing-playwright-tests
description
Writes Playwright e2e tests for ComfyUI_frontend. Use when creating, modifying, or debugging browser tests. Triggers on: playwright, e2e test, browser test, spec file.

Writing Playwright Tests for ComfyUI_frontend

The design rules that apply at every test level (behavioral assertions, lowest proving level, table-driven variants, isolation, no sleeps) are in docs/guidance/testing-principles.md. This skill covers the Playwright and ComfyUI mechanics.

Golden Rules

  1. ALWAYS look at existing tests first. Search browser_tests/tests/ for similar patterns before writing new tests.

  2. ALWAYS read the fixture code. The APIs are in browser_tests/fixtures/ - read them directly instead of guessing.

  3. Use premade JSON workflow assets instead of building workflows programmatically.

    • Assets live in browser_tests/assets/
    • Load with await comfyPage.workflow.loadWorkflow('feature/my_workflow')
    • Create new assets by starting with browser_tests/assets/default.json and manually editing the JSON to match your desired graph state

  4. Seed starting settings with test.use({ initialSettings }). The main fixture replaces backend settings before every test; do not add settings resets in afterEach. Keep runtime setters for changes under test. Nested test.use replaces the parent's settings object, so include inherited overrides. See Starting settings and isolation.

Vue Nodes vs LiteGraph: Decision Guide

Choose based on what you're testing, not personal preference:

Testing...UseWhy
Vue-rendered node UI, DOM widgets, CSS statescomfyPage.vueNodes.*Nodes are DOM elements, use locators
Canvas interactions, connections, legacy nodescomfyPage.nodeOps.*Canvas-based, use coordinates/references
Both in same testPick primary, minimize switchingAvoid confusion

Always add { tag: '@vue-nodes' } to the test or test.describe when it needs Vue Nodes. The fixture enables the renderer before boot and waits for the nodes. Never manually set Comfy.VueNodes.Enabled, including through initialSettings, or call comfyPage.vueNodes.waitForNodes() in tests.

Vue Node state uses CSS classes:

typescript
const BYPASS_CLASS = /before:bg-bypass\/60/
await expect(node).toHaveClass(BYPASS_CLASS)

Common Issues

These are frequent causes of flaky tests - check them first, but investigate if they don't apply:

SymptomCommon CauseTypical Fix
Test passes locally, fails in CIMissing nextFrame()Add await comfyPage.nextFrame() after canvas ops (not needed after loadWorkflow())
Keyboard shortcuts don't workMissing focusAdd await comfyPage.canvas.click() first
Double-click doesn't triggerTiming too fastAdd { delay: 5 } option
Elements end up in wrong positionDrag animation incompleteUse { steps: 10 } not { steps: 1 }
Widget value wrong after drag-dropUpload incompleteAdd { waitForUpload: true }
Test fails when run with othersTest pollutionAdd afterEach with resetView()
Local screenshots don't match CIPlatform differencesScreenshots are Linux-only, use PR label
subtree intercepts pointer eventsCanvas overlay (z-999)Use dispatchEvent on the DOM element to bypass overlay
Context menu empty / wrong itemsNode not selectedSelect node first: vueNodes.selectNode() or nodeRef.click('title')
navigateIntoSubgraph timeoutNode too small in assetUse node size [400, 200] minimum in test asset JSON
Show full SKILL.md (260 more words)Show less

Test Tags

Add appropriate tags to every test:

TagWhen to Use
@smokeQuick essential tests
@slowTests > 10 seconds
@screenshotVisual regression tests
@canvasCanvas interactions
@nodeNode-related
@widgetWidget-related
@mobileMobile viewport (runs on Pixel 5 project)
@2xHiDPI tests (runs on 2x scale project)
typescript
test.describe('Feature', { tag: ['@screenshot', '@canvas'] }, () => {

Retry Patterns

Never use waitForTimeout - it's always wrong.

PatternUse Case
Auto-retrying assertionstoBeVisible(), toHaveText(), etc. (prefer these)
expect.poll()Single value polling
expect().toPass()Multiple assertions that must all pass
typescript
// Prefer auto-retrying assertions when possible
await expect(node).toBeVisible()

// Single value polling
await expect.poll(() => widget.getValue(), { timeout: 2000 }).toBe(100)

// Multiple conditions
await expect(async () => {
  expect(await node1.getValue()).toBe('foo')
  expect(await node2.getValue()).toBe('bar')
}).toPass({ timeout: 2000 })

Screenshot Baselines

  • Screenshots are Linux-only. Don't commit local screenshots.
  • To update baselines: Add PR label New Browser Test Expectations
  • Mask dynamic content:
    typescript
    await expect(comfyPage.canvas).toHaveScreenshot('page.png', {
  mask: [page.locator('.timestamp')]
})

CI Debugging

  1. Download artifacts from failed CI run
  2. Extract and view trace: pnpm dlx playwright show-trace trace.zip
  3. CI deploys HTML report to Cloudflare Pages (link in PR comment)
  4. Reproduce CI: CI=true pnpm test:browser
  5. Local runs: pnpm test:browser:local

Anti-Patterns

Avoid these common mistakes:

  1. Arbitrary waits - Use retrying assertions instead

    typescript
    // ❌ await page.waitForTimeout(500)
// ✅ await expect(element).toBeVisible()

  2. Implementation-tied selectors - Use test IDs or semantic selectors

    typescript
    // ❌ page.locator('div.container > button.btn-primary')
// ✅ page.getByTestId('submit-button')

  3. Missing nextFrame after canvas ops - Canvas needs sync time

    typescript
    await node.drag({ x: 50, y: 50 })
await comfyPage.nextFrame() // Required

  4. Shared state between tests - Tests must be independent

    typescript
    // ❌ let sharedData  // Outside test
// ✅ Define state inside each test

Quick Start Template

typescript
// Path depends on test file location - adjust '../' segments accordingly
import {
  comfyPageFixture as test,
  comfyExpect as expect
} from '../fixtures/ComfyPage'

test.describe('FeatureName', { tag: ['@canvas'] }, () => {
  test.afterEach(async ({ comfyPage }) => {
    await comfyPage.canvasOps.resetView()
  })

  test('should do something', async ({ comfyPage }) => {
    await comfyPage.workflow.loadWorkflow('myWorkflow')

    const node = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
    // ... test logic

    await expect(comfyPage.canvas).toHaveScreenshot('expected.png')
  })
})

Finding Patterns

bash
# Find similar tests
grep -r "KSampler" browser_tests/tests/

# Find usage of a fixture method
grep -r "loadWorkflow" browser_tests/tests/

# Find tests with specific tag
grep -r '@screenshot' browser_tests/tests/

Key Files to Read

PurposePath
Main fixturebrowser_tests/fixtures/ComfyPage.ts
Helper classesbrowser_tests/fixtures/helpers/
Component objectsbrowser_tests/fixtures/components/
Test selectorsbrowser_tests/fixtures/selectors.ts
Vue Node helpersbrowser_tests/fixtures/VueNodeHelpers.ts
Test assetsbrowser_tests/assets/
Existing testsbrowser_tests/tests/

Read the fixture code directly - it's the source of truth for available methods.

© Comfy-Org, GPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/writing-playwright-tests of Comfy-Org/ComfyUI_frontend.

Open the folder on GitHubat commit f9be289

Compare with similar skills

Writing Playwright Tests next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Writing Playwright Tests compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Writing Playwright Tests this skillComfy-Org/ComfyUI_frontend2.1k—~2.3kAutomated safety check: PassGPL-3.0
E2Esendou-ink/sendou.ink297—~2.1kAutomated safety check: NotesAGPL-3.0
E2E Tests Studiomastra-ai/mastra29k—~4.3kAutomated safety check: PassCustom licence
Replica TestJakeschincariol/replica-skill1.2k—~819Automated safety check: PassMIT
Debug E2E Testbitovi/ai-enablement-prompts121—~677Automated safety check: PassMIT
Awt E2E Testingsickn33/agentic-awesome-skills47k2 repos~556Automated safety check: PassMIT

Similar skills

  • E2E

    sendou-ink/sendou.ink

    Run, debug, and manage Playwright e2e tests. An agent skill from sendou-ink/sendou.ink.

    297 GitHub stars~2.1k tokensUpdated yesterday
    Testing & QAAuto-check: notes

  • E2E Tests Studio

    mastra-ai/mastra

    REQUIRED when modifying any file in packages/playground-ui or packages/playground.

    29k GitHub stars~4.3k tokensUpdated today
    Testing & QAAuto-check passed

  • Replica Test

    Jakeschincariol/replica-skill

    Clicks through every flow of an app clone and tests it for bugs: a test plan generated from the recon flows with happy paths and edge cases, Playwright end-to-end tests where possible, a browser…

    1.2k GitHub stars~819 tokensUpdated 5 days ago
    Testing & QAAuto-check passed

  • Debug E2E Test

    bitovi/ai-enablement-prompts

    Debug and fix failing Playwright E2E tests. An agent skill from bitovi/ai-enablement-prompts.

    121 GitHub stars~677 tokensUpdated 28 days ago
    Testing & QAAuto-check passed

  • Awt E2E Testing

    sickn33/agentic-awesome-skills

    AI-powered E2E web testing — eyes and hands for AI coding tools.

    47k GitHub starsUsed in 2 repos~556 tokens
    Testing & QAAuto-check passed

  • Vue Testing Best Practices

    JetBrains/skills

    Official

    A skill your agent uses for Vue.js testing. An agent skill from JetBrains/skills.

    366 GitHub starsUsed in 7 repos~563 tokens
    Testing & QAAuto-check passed

More from Comfy-Org/ComfyUI_frontend

All 22 skills in this repo

  • Adding Deprecation Warnings

    Comfy-Org/ComfyUI_frontend

    Adds deprecation warnings for renamed or removed properties/APIs.

    2.1k GitHub stars~775 tokensUpdated today
    Auto-check passed

  • Agent Integration Replay

    Comfy-Org/ComfyUI_frontend

    Replay recorded agent conversations as Playwright tests against the real chat panel and canvas.

    2.1k GitHub stars~805 tokensUpdated today
    Auto-check: notes

  • Codegen Transform

    Comfy-Org/ComfyUI_frontend

    Transforms raw Playwright codegen output into ComfyUI convention-compliant tests.

    2.1k GitHub stars~2k tokensUpdated today
    Auto-check passed

  • Comment Sicko

    Comfy-Org/ComfyUI_frontend

    Dispatches the comment-sicko subagent to hunt gratuitous comments in a PR/diff, triages its raw findings, and posts a polite, professional writeup.

    2.1k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Hardening Flaky E2E Tests

    Comfy-Org/ComfyUI_frontend

    Diagnoses and fixes flaky Playwright e2e tests by replacing race-prone patterns with retry-safe alternatives.

    2.1k GitHub stars~2.8k tokensUpdated today
    Auto-check passed

  • Perf Fix With Proof

    Comfy-Org/ComfyUI_frontend

    Ships performance fixes with CI-proven improvement using stacked PRs.

    2.1k GitHub stars~1.6k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Writing Playwright Tests

What does Writing Playwright Tests do?

Writes Playwright e2e tests for ComfyUIfrontend. An agent skill from Comfy-Org/ComfyUI_frontend. Writing Playwright Tests is an agent skill from Comfy-Org/ComfyUI_frontend. Writes Playwright e2e tests for ComfyUIfrontend.

When should I use Writing Playwright Tests?

Writing Playwright Tests fits situations like: debugging browser tests; tasks that involve Browser testing; tasks that involve Diffusion and image models.

How do I install Writing Playwright Tests in Claude Code?

Run `npx skills add Comfy-Org/ComfyUI_frontend --skill writing-playwright-tests -a claude-code`. Or copy the skill folder (.claude/skills/writing-playwright-tests in Comfy-Org/ComfyUI_frontend) into .claude/skills/writing-playwright-tests in your project. Claude Code loads it when a task matches its description.

How do I install Writing Playwright Tests in Codex?

Run `npx skills add Comfy-Org/ComfyUI_frontend --skill writing-playwright-tests -a codex`. Or copy the skill folder (.claude/skills/writing-playwright-tests in Comfy-Org/ComfyUI_frontend) into .agents/skills/writing-playwright-tests in your project. Codex loads it when a task matches its description.

Can I use Writing Playwright Tests in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Comfy-Org/ComfyUI_frontend --skill writing-playwright-tests -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/writing-playwright-tests, .gemini/skills/writing-playwright-tests, .github/skills/writing-playwright-tests and .opencode/skills/writing-playwright-tests in your project.

What does Writing Playwright Tests need to run?

Going by SKILL.md and its folder, Writing Playwright Tests needs the command-line tools its instructions call (pnpm).

Does Writing Playwright Tests access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Writing Playwright Tests safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Writing Playwright Tests use?

Writing Playwright Tests is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Writing Playwright Tests use?

About 2.3k tokens (SKILL.md is roughly 9.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Writing Playwright Tests?

Skills that share tags, products or a category with Writing Playwright Tests: E2E (sendou-ink/sendou.ink, 297 stars), E2E Tests Studio (mastra-ai/mastra, 29k stars), Replica Test (Jakeschincariol/replica-skill, 1.2k stars) and Debug E2E Test (bitovi/ai-enablement-prompts, 121 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Writing Playwright Tests?

Comfy-Org (a GitHub organization) maintains it in Comfy-Org/ComfyUI_frontend, which has 2,056 GitHub stars. The repository holds 22 skills in this directory. The repository was last updated on October 9, 2026.

Source: Comfy-Org/ComfyUI_frontend on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.