Comfy-Org / Comfy-Org/ComfyUI

[Feature] Add stable DOM selectors (data-testid) to toolbar buttons for automated testing

Open
#15,392 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Python
Stars
133k
Forks
15.7k
Avg merge
1d 7h
Merged PRs (30d)
158

Description

## Summary

The top toolbar buttons (Queue Prompt, Queue Front, View Queue, View History, and the settings/gear control) lack stable, queryable DOM selectors. Automated UI testing (Playwright/WebDriver) cannot reliably locate and click them, timing out even though the elements exist in the DOM.

## Environment

- ComfyUI: 0.28.0
- Testing via: Playwright Chromium (headless)

## Problem

Enumerating clickable elements (`a, button, [role=button], input[type=submit], [onclick]`) finds 17 elements, but clicking the toolbar buttons fails with `Timeout 3000ms exceeded`:

- \`Queue Prompt\` (\`queue-button\`)
- \`Queue Front\` (\`queue-front-button\`)
- \`View Queue\` (\`comfy-view-queue-button\`)
- \`View History\` (\`comfy-view-history-button\`)
- settings gear (\`⚙️\`) / close (\`×\`)

Root cause appears to be one or more of:
1. Buttons are not interactive until after the JS bundle asynchronously initializes the canvas/LiteGraph (so \`DOMContentLoaded\` is too early).
2. Buttons are covered by a drawer/overlay and need a panel opened first.
3. Selectors like \`#queue-button\` don't match the rendered structure (class names rather than ids).

## Request

To make the toolbar automatable, please consider:

1. **Stable selectors** — add a \`data-testid\` (e.g. \`data-testid="queue-prompt"\`, \`data-testid="view-queue"\`) or stable \`aria-label\` to each toolbar button, independent of CSS class names that may change between builds.
2. **Readiness signal** — either ensure toolbar buttons are clickable right after \`DOMContentLoaded\` (not gated on full canvas init), or emit a custom event (e.g. \`comfy:ui-ready\`) when the toolbar is interactive, so tests can \`page.waitForFunction(() => window.comfyUiReady)\` instead of fixed sleeps.

This is specifically about the DOM toolbar buttons — the LiteGraph canvas (nodes/edges rendered on canvas/WebGL) is understood to be out of scope for DOM automation.

## Why

Downstream integrations and test suites that wrap the ComfyUI frontend (custom hosts, autotest harnesses, CI smoke tests) need deterministic selectors. Today they must rely on brittle class-name matching or timeouts, which break across releases.

Contributor guide

Open the contributing guide

Research direction

Start from the ComfyUI frontend entry points that render the Queue Prompt, Queue Front, View Queue, View History, and settings/close toolbar controls; no source file or test path is named in the issue. Reproduce the timeout with Playwright Chromium, then verify the chosen stable selectors and any readiness signal after initialization, including overlay states. Done means all listed controls can be located and interacted with deterministically without fixed sleeps.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, playwright
Domain
frontend, testing
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.