Langflow E2E 測(cè)試選擇器目錄data-testid 命名規(guī)范與實(shí)戰(zhàn)用法【免費(fèi)下載鏈接】langflowLangflow is a powerful tool for building and deploying AI-powered agents and workflows.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/la/langflow本文圍繞 Langflow 的 E2E 選擇器參考文檔 selectors.md 展開(kāi)完整講解其中定義的data-testid命名規(guī)范、分類選擇器目錄畫布、組件字段、動(dòng)作按鈕、模態(tài)框、圖標(biāo)、檢視面板開(kāi)關(guān)以及添加新data-testid的判定標(biāo)準(zhǔn)并結(jié)合倉(cāng)庫(kù)中的真實(shí)組件源碼與 Playwright 測(cè)試體系說(shuō)明這些選擇器在前端代碼中如何落地、在測(cè)試中如何被穩(wěn)定地消費(fèi)。讀完后你能夠?yàn)?Langflow 前端新元素規(guī)范地添加測(cè)試錨點(diǎn)并能直接使用目錄中的選擇器編寫可運(yùn)行的 Playwright E2E 測(cè)試。選擇器目錄在 Langflow E2E 體系中的定位selectors.md 被明確定義為 Langflow E2E 測(cè)試中data-testid選擇器的權(quán)威參考canonical reference任何新增的交互式元素都應(yīng)當(dāng)遵循其中的命名約定并把元素登記進(jìn)這個(gè)目錄。它位于 e2e-testing 技能目錄 的references/子目錄下與 helpers.md、fixtures.md 共同構(gòu)成 E2E 技能的參考文檔集。從測(cè)試體系看這個(gè)目錄服務(wù)于一套基于 Playwright 的完整基礎(chǔ)設(shè)施組成部分位置作用測(cè)試配置playwright.config.tsfullyParallel: true、5 分鐘超時(shí)、2 個(gè) worker、20s 操作超時(shí)、首次重試時(shí)抓取 trace自定義 fixturesfixtures.ts自動(dòng)攔截/api/響應(yīng)檢測(cè) HTTP 400/404/422/500 與流式事件中的執(zhí)行錯(cuò)誤共享工具函數(shù)tests/utils/awaitBootstrapTest、initialGPTsetup、enableInspectPanel等 37 個(gè) helper測(cè)試分層tests/core/features、integrations、regression、unit與tests/extended/核心功能、模板集成、回歸與擴(kuò)展特性選擇器目錄的價(jià)值在于它把「組件側(cè)定義的錨點(diǎn)」與「測(cè)試側(cè)消費(fèi)的定位器」用一份單一事實(shí)來(lái)源single source of truth綁定起來(lái)——測(cè)試作者不需要閱讀組件源碼就能定位元素組件作者改動(dòng)錨點(diǎn)前也知道哪些測(cè)試依賴它。命名規(guī)范前綴指示元素類型文檔規(guī)定所有data-testid值采用 kebab-case并以表示元素類型的前綴開(kāi)頭前綴元素類型示例input-文本輸入框input-chat-playground、input-flow-namebutton-/button_動(dòng)作按鈕button-send、button_run_chat outputicon-圖標(biāo)按鈕icon-Globe、icon-Lock、icon-ChevronLeftpopover-anchor-input-組件參數(shù)字段popover-anchor-input-openai_api_keyadd-component-button-拖拽添加按鈕add-component-button-chat-outputcard-流程/組件卡片card-my-flow-nametitle-畫布上的節(jié)點(diǎn)標(biāo)題title-OpenAI、title-Chat Outputhandle-連接句柄handle-{component}-{shownode}-{field}-{direction}div-chat-message聊天消息div-chat-messageshow字段可見(jiàn)性開(kāi)關(guān)showmodel_name、showtemperature值得注意的是前綴與元素類型一一對(duì)應(yīng)這本身就是可檢索性的設(shè)計(jì)僅憑 testid 前綴測(cè)試作者即可判斷該錨點(diǎn)指向輸入框、按鈕還是畫布句柄而無(wú)需打開(kāi)組件實(shí)現(xiàn)。個(gè)別前綴如button_run_下劃線、show無(wú)前分隔符是歷史沿革目錄將它們?nèi)鐚?shí)登記測(cè)試代碼必須按原文匹配。分類選擇器目錄畫布與導(dǎo)航選擇器元素說(shuō)明blank-flowNew Blank Flow 按鈕位于創(chuàng)建項(xiàng)目模態(tài)框sidebar-search-input組件搜索輸入框側(cè)邊欄搜索欄sidebar-nav-add_note便簽按鈕側(cè)邊欄導(dǎo)航sidebar-add-sticky-note-button添加便簽新版按鈕已更新命名react-flow-idReactFlow 畫布容器用作拖拽目標(biāo)canvas_controls_dropdown畫布控制下拉菜單打開(kāi)縮放/適配/檢視菜單fit_view適配視圖按鈕畫布控制菜單內(nèi)zoom_out縮小按鈕畫布控制菜單內(nèi)zoom_in放大按鈕畫布控制菜單內(nèi)inspector-toggle檢視面板開(kāi)關(guān)畫布控制下拉菜單內(nèi)其中react-flow-id與canvas_controls_dropdown可以直接在源碼中確認(rèn)前者是 Flow 頁(yè)面中 ReactFlow 的宿主容器見(jiàn) PageComponent/index.tsxdiv idreact-flow-id ...后者位于畫布控制組件 CanvasControlsDropdown.tsx。這也提示了一個(gè)細(xì)節(jié)react-flow-id嚴(yán)格來(lái)說(shuō)是id而非data-testid測(cè)試中既可getByTestId也可用#react-flow-id定位。組件參數(shù)字段選擇器元素說(shuō)明popover-anchor-input-{name}組件輸入字段{name}與字段的name屬性一致popover-anchor-input-openai_api_keyOpenAI API key 字段僅當(dāng)未選擇全局變量時(shí)可見(jiàn)input_output{component}輸出連接句柄區(qū)域如input_outputChat Output這一組選擇器包含整個(gè)目錄中最關(guān)鍵的條件渲染陷阱當(dāng)字段配置為load_from_db: true且選擇了全局變量時(shí)字段渲染為badge而非input此時(shí)popover-anchor-input-{name}選擇器在 DOM 中根本不存在。編寫針對(duì)該字段的斷言前必須先確認(rèn)字段當(dāng)前是輸入框形態(tài)還是 badge 形態(tài)否則測(cè)試會(huì)因?yàn)樵厝笔Ф?。?dòng)作與按鈕選擇器元素說(shuō)明button-send發(fā)送消息按鈕Playground 聊天button_run_{component}運(yùn)行組件按鈕如button_run_chat outputpublish-button發(fā)布/部署流程頂部工具欄save-flow-button保存流程頂部工具欄edit-fields-button切換字段編輯器檢視面板——須先調(diào)用enableInspectPanel()playground-btn-flow-ioPlayground 按鈕關(guān)閉時(shí)用dispatchEvent(click)而非.click()manage-model-providers模型提供商按鈕設(shè)置這里登記了兩條非顯而易見(jiàn)的操作細(xì)節(jié)其一edit-fields-button在檢視面板未啟用時(shí)不可見(jiàn)必須先執(zhí)行enableInspectPanel(page)其二playground-btn-flow-io的關(guān)閉操作需要dispatchEvent(click)才能生效直接.click()不可靠。這類「選擇器 正確交互方式」的成對(duì)登記正是選擇器目錄相比裸 testid 列表更完整的價(jià)值所在。模態(tài)框與面板選擇器元素說(shuō)明modal-title模態(tài)框標(biāo)題通用模態(tài)框標(biāo)題edit-button-modal編輯按鈕舊版舊的模態(tài)框模式edit-button-close關(guān)閉編輯模態(tài)框舊的模態(tài)框模式lock-flow-switch流程鎖定開(kāi)關(guān)流程設(shè)置input-flow-name流程名稱輸入框流程設(shè)置模態(tài)框input-flow-description流程描述輸入框流程設(shè)置模態(tài)框session-selector會(huì)話選擇器Playground 會(huì)話切換save-flow-button與input-flow-name均能在源碼中定位到實(shí)際使用處前者在流程頭部菜單 FlowMenu/index.tsx后者在流程設(shè)置編輯組件 editFlowSettingsComponent/index.tsx。圖標(biāo)作為按鈕選擇器動(dòng)作icon-Globe打開(kāi)全局變量icon-Lock切換流程鎖定icon-ChevronLeft返回導(dǎo)航icon-Trash2刪除動(dòng)作icon-Plus添加/創(chuàng)建動(dòng)作圖標(biāo)按鈕通常沒(méi)有可訪問(wèn)文本icon-前綴加圖標(biāo)組件名如Globe、ChevronLeft與圖標(biāo)庫(kù)命名一致為它們提供了穩(wěn)定錨點(diǎn)。檢視面板字段可見(jiàn)性開(kāi)關(guān)這類選擇器用于切換檢視面板中字段的顯隱格式為show{fieldname}無(wú)分隔符選擇器字段showmodel_name模型名字段showtemperaturetemperature 字段showmax_tokensmax tokens 字段showopenai_api_keyOpenAI API key 字段配合 SKILL 文檔中的檢視面板操作模式完整序列為enableInspectPanel(page)→ 點(diǎn)擊節(jié)點(diǎn)如title-OpenAI→ 點(diǎn)擊edit-fields-button→ 點(diǎn)擊show{fieldname}切換可見(jiàn)性 → 再次點(diǎn)擊edit-fields-button關(guān)閉編輯器。跳過(guò)第一步會(huì)導(dǎo)致edit-fields-button不可見(jiàn)。何時(shí)為新元素添加>// 正確 —— 有描述性、kebab-case button>import { expect, test } from ../../fixtures; // 必須從 fixtures 導(dǎo)入而非 playwright/test import { awaitBootstrapTest } from ../../utils/await-bootstrap-test; test( user should be able to run a flow successfully, { tag: [release, workspace] }, // 每個(gè)測(cè)試必須帶 release 標(biāo)簽 async ({ page }) { await awaitBootstrapTest(page); // Arrange: 創(chuàng)建空白流程selectors.md「畫布與導(dǎo)航」條目 await page.getByTestId(blank-flow).click(); // Act: 搜索并添加組件selectors.md「畫布與導(dǎo)航」條目 await page.getByTestId(sidebar-search-input).fill(Chat Output); // ... 組裝流程 ... // Assert: 驗(yàn)證構(gòu)建結(jié)果 await expect(page.getByTestId(build-status-success)).toBeVisible({ timeout: 30000 }); }, );幾個(gè)與選擇器使用強(qiáng)相關(guān)的約束導(dǎo)入來(lái)源test與expect必須從 fixtures.ts 導(dǎo)入。該自定義 fixture 會(huì)自動(dòng)監(jiān)視所有/api/響應(yīng)遇到 HTTP 400/404/422/500、事件流中error: true或 Python 異常即令測(cè)試失敗測(cè)試預(yù)期內(nèi)出錯(cuò)時(shí)可調(diào)用page.allowFlowErrors()放行。標(biāo)簽體系每個(gè)測(cè)試必須帶releaserelease 運(yùn)行按此 grep可疊加workspace、api、database、components、starter-projects等領(lǐng)域標(biāo)簽這六個(gè)是唯一允許的值。異步等待涉及畫布構(gòu)建、流程執(zhí)行的斷言要顯式設(shè)置超時(shí)如timeout: 30000避免依賴固定 sleep。維護(hù)該目錄的實(shí)踐要點(diǎn)綜合 selectors.md 的正文與配套文檔維護(hù)選擇器目錄時(shí)值得遵循的實(shí)踐改動(dòng)data-testid前先查目錄SKILL 文檔明確將「修改組件中的data-testid屬性」列為 E2E 技能的觸發(fā)條件因?yàn)殄^點(diǎn)改名會(huì)靜默破壞既有測(cè)試動(dòng)態(tài)渲染元素優(yōu)先登記畫布節(jié)點(diǎn)title-、handle-、組件字段popover-anchor-input-都是運(yùn)行時(shí)生成的 DOM缺少穩(wěn)定錨點(diǎn)就無(wú)法可靠定位條件渲染必須在「Notes」列說(shuō)明如popover-anchor-input-openai_api_key標(biāo)注「僅當(dāng)未選擇全局變量時(shí)可見(jiàn)」badge 形態(tài)的存在與否直接影響選擇器可用性交互怪癖隨選擇器登記playground-btn-flow-io需要dispatchEvent(click)、edit-fields-button依賴前置的enableInspectPanel()這些行為細(xì)節(jié)寫在目錄里可避免每個(gè)測(cè)試作者重復(fù)踩坑。小結(jié)selectors.md 的價(jià)值不只是一張 testid 清單它通過(guò)「前綴—元素類型」的命名規(guī)范讓錨點(diǎn)自解釋通過(guò)分類目錄畫布導(dǎo)航、組件字段、動(dòng)作按鈕、模態(tài)框、圖標(biāo)、檢視開(kāi)關(guān)覆蓋 Langflow 前端的全部關(guān)鍵交互面并用 Notes 列沉淀了 badge 條件渲染、事件派發(fā)方式、前置依賴等易錯(cuò)細(xì)節(jié)。配合 playwright.config.ts 的并行/重試配置、fixtures.ts 的 API 錯(cuò)誤自動(dòng)攔截以及tests/utils/中的共享 helper它構(gòu)成了 Langflow 前端 E2E 測(cè)試穩(wěn)定性的基礎(chǔ)契約。為新元素添加data-testid時(shí)只需回答三個(gè)問(wèn)題——測(cè)試是否要交互、是否有 role/text 替代、是否動(dòng)態(tài)渲染——再按 kebab-case 的{type}-{descriptive-name}格式命名并登記目錄即可延續(xù)這套契約?！久赓M(fèi)下載鏈接】langflowLangflow is a powerful tool for building and deploying AI-powered agents and workflows.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/la/langflow創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考