e2e-testing

Source excerpt starting at line 1.

1# Langflow E2E Selector Catalog2 3This is the canonical reference for `data-testid` selectors used in Langflow E2E tests. When adding new interactive elements, follow these naming conventions and add the element to this catalog.4 5## Naming Convention6 7All `data-testid` values use kebab-case with a prefix that indicates the element type:8 9| Prefix | Element Type | Example |10|--------|-------------|---------|11| `input-` | Text inputs | `input-chat-playground`, `input-flow-name` |12| `button-` / `button_` | Action buttons | `button-send`, `button_run_chat output` |13| `icon-` | Icon buttons | `icon-Globe`, `icon-Lock`, `icon-ChevronLeft` |14| `popover-anchor-input-` | Component parameter fields | `popover-anchor-input-openai_api_key` |15| `add-component-button-` | Drag-to-add buttons | `add-component-button-chat-output` |16| `card-` | Flow/component cards | `card-my-flow-name` |17| `title-` | Node titles on canvas | `title-OpenAI`, `title-Chat Output` |18| `handle-` | Connection handles | `handle-{component}-{shownode}-{field}-{direction}` |19| `div-chat-message` | Chat messages | `div-chat-message` |20| `show` | Field visibility toggles | `showmodel_name`, `showtemperature` |21 22## Canvas & Navigation23 24| Selector | Element | Notes |25|----------|---------|-------|26| `blank-flow` | "New Blank Flow" button | On project creation modal |27| `sidebar-search-input` | Component search input | Sidebar search bar |28| `sidebar-nav-add_note` | Sticky note button | Sidebar navigation |29| `sidebar-add-sticky-note-button` | Add sticky note (new) | Updated button name |30| `react-flow-id` | ReactFlow canvas container | Use for drag targets |31| `canvas_controls_dropdown` | Canvas controls dropdown | Opens zoom/fit/inspector menu |32| `fit_view` | Fit view button | Inside canvas controls |33| `zoom_out` | Zoom out button | Inside canvas controls |34| `zoom_in` | Zoom in button | Inside canvas controls |35| `inspector-toggle` | Inspection panel toggle | Inside canvas controls dropdown |36 37## Component Fields38 39| Selector | Element | Notes |40|----------|---------|-------|41| `popover-anchor-input-{name}` | Component input field | `name` matches the field's `name` attribute |42| `popover-anchor-input-openai_api_key` | OpenAI API key field | Only visible when no global variable selected |43| `input_output{component}` | Output connection handle area | e.g., `input_outputChat Output` |44 45**Important**: When `load_from_db: true` and a global variable is selected, the field renders as a **badge** (not an `<input>`). The `popover-anchor-input-{name}` selector will NOT exist in the DOM for those fields.46 47## Actions & Buttons48 49| Selector | Element | Notes |50|----------|---------|-------|51| `button-send` | Send message button | Playground chat |52| `button_run_{component}` | Run component button | e.g., `button_run_chat output` |53| `publish-button` | Publish/deploy flow | Top toolbar |54| `save-flow-button` | Save flow | Top toolbar |55| `edit-fields-button` | Toggle field editor | Inspection panel — requires `enableInspectPanel()` first |56| `playground-btn-flow-io` | Playground button | Use `dispatchEvent("click")` to close (not `.click()`) |57| `manage-model-providers` | Model providers button | Settings |58 59## Modals & Panels60 61| Selector | Element | Notes |62|----------|---------|-------|63| `modal-title` | Modal heading | Generic modal title |64| `edit-button-modal` | Edit button (legacy) | Old modal pattern |65| `edit-button-close` | Close edit modal | Old modal pattern |66| `lock-flow-switch` | Flow lock toggle | Flow settings |67| `input-flow-name` | Flow name input | Flow settings modal |68| `input-flow-description` | Flow description input | Flow settings modal |69| `session-selector` | Session selector | Playground session switcher |70 71## Icons (as buttons)72 73| Selector | Action |74|----------|--------|75| `icon-Globe` | Open global variables |76| `icon-Lock` | Toggle flow lock |77| `icon-ChevronLeft` | Navigate back |78| `icon-Trash2` | Delete action |79| `icon-Plus` | Add/create action |80 81## Inspection Panel Field Toggles82 83These selectors toggle field visibility in the inspection panel. The format is `show{fieldname}` (no separator):84 85| Selector | Field |86|----------|-------|87| `showmodel_name` | Model name field |88| `showtemperature` | Temperature field |89| `showmax_tokens` | Max tokens field |90| `showopenai_api_key` | OpenAI API key field |91 92## When to Add New data-testid93 94Add `data-testid` to an element when:951. E2E tests need to interact with it (click, fill, assert visibility)962. The element has no stable `role` or `text` alternative973. The element is dynamically rendered and needs a stable anchor98 99Format: `{type}-{descriptive-name}` in kebab-case. Keep it descriptive enough that a test author understands the element without reading the component source.100 101```tsx102// Right — descriptive, kebab-case103<button data-testid="save-flow-button">Save</button>104<input data-testid="input-flow-name" />105<div data-testid="card-flow-summary" />106 107// Wrong — too generic108<button data-testid="btn1">Save</button>109<input data-testid="input" />110<div data-testid="wrapper" />111```112