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