ContextQMD
Back to Langflow

Langflow E2E Selector Catalog

.agents/skills/e2e-testing/references/selectors.md

1.10.0.dev205.0 KB
Original Source

Langflow E2E Selector Catalog

This 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.

Naming Convention

All data-testid values use kebab-case with a prefix that indicates the element type:

PrefixElement TypeExample
input-Text inputsinput-chat-playground, input-flow-name
button- / button_Action buttonsbutton-send, button_run_chat output
icon-Icon buttonsicon-Globe, icon-Lock, icon-ChevronLeft
popover-anchor-input-Component parameter fieldspopover-anchor-input-openai_api_key
add-component-button-Drag-to-add buttonsadd-component-button-chat-output
card-Flow/component cardscard-my-flow-name
title-Node titles on canvastitle-OpenAI, title-Chat Output
handle-Connection handleshandle-{component}-{shownode}-{field}-{direction}
div-chat-messageChat messagesdiv-chat-message
showField visibility togglesshowmodel_name, showtemperature

Canvas & Navigation

SelectorElementNotes
blank-flow"New Blank Flow" buttonOn project creation modal
sidebar-search-inputComponent search inputSidebar search bar
sidebar-nav-add_noteSticky note buttonSidebar navigation
sidebar-add-sticky-note-buttonAdd sticky note (new)Updated button name
react-flow-idReactFlow canvas containerUse for drag targets
canvas_controls_dropdownCanvas controls dropdownOpens zoom/fit/inspector menu
fit_viewFit view buttonInside canvas controls
zoom_outZoom out buttonInside canvas controls
zoom_inZoom in buttonInside canvas controls
inspector-toggleInspection panel toggleInside canvas controls dropdown

Component Fields

SelectorElementNotes
popover-anchor-input-{name}Component input fieldname matches the field's name attribute
popover-anchor-input-openai_api_keyOpenAI API key fieldOnly visible when no global variable selected
input_output{component}Output connection handle areae.g., input_outputChat Output

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.

Actions & Buttons

SelectorElementNotes
button-sendSend message buttonPlayground chat
button_run_{component}Run component buttone.g., button_run_chat output
publish-buttonPublish/deploy flowTop toolbar
save-flow-buttonSave flowTop toolbar
edit-fields-buttonToggle field editorInspection panel — requires enableInspectPanel() first
playground-btn-flow-ioPlayground buttonUse dispatchEvent("click") to close (not .click())
manage-model-providersModel providers buttonSettings

Modals & Panels

SelectorElementNotes
modal-titleModal headingGeneric modal title
edit-button-modalEdit button (legacy)Old modal pattern
edit-button-closeClose edit modalOld modal pattern
lock-flow-switchFlow lock toggleFlow settings
input-flow-nameFlow name inputFlow settings modal
input-flow-descriptionFlow description inputFlow settings modal
session-selectorSession selectorPlayground session switcher

Icons (as buttons)

SelectorAction
icon-GlobeOpen global variables
icon-LockToggle flow lock
icon-ChevronLeftNavigate back
icon-Trash2Delete action
icon-PlusAdd/create action

Inspection Panel Field Toggles

These selectors toggle field visibility in the inspection panel. The format is show{fieldname} (no separator):

SelectorField
showmodel_nameModel name field
showtemperatureTemperature field
showmax_tokensMax tokens field
showopenai_api_keyOpenAI API key field

When to Add New data-testid

Add data-testid to an element when:

  1. E2E tests need to interact with it (click, fill, assert visibility)
  2. The element has no stable role or text alternative
  3. The element is dynamically rendered and needs a stable anchor

Format: {type}-{descriptive-name} in kebab-case. Keep it descriptive enough that a test author understands the element without reading the component source.

tsx
// Right — descriptive, kebab-case
<button data-testid="save-flow-button">Save</button>
<input data-testid="input-flow-name" />
<div data-testid="card-flow-summary" />

// Wrong — too generic
<button data-testid="btn1">Save</button>
<input data-testid="input" />
<div data-testid="wrapper" />