Langflow E2E 测试选择器目录data-testid 命名规范与实战用法【免费下载链接】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命名规范、分类选择器目录画布、组件字段、动作按钮、模态框、图标、检视面板开关以及添加新data-testid的判定标准并结合仓库中的真实组件源码与 Playwright 测试体系说明这些选择器在前端代码中如何落地、在测试中如何被稳定地消费。读完后你能够为 Langflow 前端新元素规范地添加测试锚点并能直接使用目录中的选择器编写可运行的 Playwright E2E 测试。选择器目录在 Langflow E2E 体系中的定位selectors.md 被明确定义为 Langflow E2E 测试中data-testid选择器的权威参考canonical reference任何新增的交互式元素都应当遵循其中的命名约定并把元素登记进这个目录。它位于 e2e-testing 技能目录 的references/子目录下与 helpers.md、fixtures.md 共同构成 E2E 技能的参考文档集。从测试体系看这个目录服务于一套基于 Playwright 的完整基础设施组成部分位置作用测试配置playwright.config.tsfullyParallel: true、5 分钟超时、2 个 worker、20s 操作超时、首次重试时抓取 trace自定义 fixturesfixtures.ts自动拦截/api/响应检测 HTTP 400/404/422/500 与流式事件中的执行错误共享工具函数tests/utils/awaitBootstrapTest、initialGPTsetup、enableInspectPanel等 37 个 helper测试分层tests/core/features、integrations、regression、unit与tests/extended/核心功能、模板集成、回归与扩展特性选择器目录的价值在于它把「组件侧定义的锚点」与「测试侧消费的定位器」用一份单一事实来源single source of truth绑定起来——测试作者不需要阅读组件源码就能定位元素组件作者改动锚点前也知道哪些测试依赖它。命名规范前缀指示元素类型文档规定所有data-testid值采用 kebab-case并以表示元素类型的前缀开头前缀元素类型示例input-文本输入框input-chat-playground、input-flow-namebutton-/button_动作按钮button-send、button_run_chat outputicon-图标按钮icon-Globe、icon-Lock、icon-ChevronLeftpopover-anchor-input-组件参数字段popover-anchor-input-openai_api_keyadd-component-button-拖拽添加按钮add-component-button-chat-outputcard-流程/组件卡片card-my-flow-nametitle-画布上的节点标题title-OpenAI、title-Chat Outputhandle-连接句柄handle-{component}-{shownode}-{field}-{direction}div-chat-message聊天消息div-chat-messageshow字段可见性开关showmodel_name、showtemperature值得注意的是前缀与元素类型一一对应这本身就是可检索性的设计仅凭 testid 前缀测试作者即可判断该锚点指向输入框、按钮还是画布句柄而无需打开组件实现。个别前缀如button_run_下划线、show无前分隔符是历史沿革目录将它们如实登记测试代码必须按原文匹配。分类选择器目录画布与导航选择器元素说明blank-flowNew Blank Flow 按钮位于创建项目模态框sidebar-search-input组件搜索输入框侧边栏搜索栏sidebar-nav-add_note便签按钮侧边栏导航sidebar-add-sticky-note-button添加便签新版按钮已更新命名react-flow-idReactFlow 画布容器用作拖拽目标canvas_controls_dropdown画布控制下拉菜单打开缩放/适配/检视菜单fit_view适配视图按钮画布控制菜单内zoom_out缩小按钮画布控制菜单内zoom_in放大按钮画布控制菜单内inspector-toggle检视面板开关画布控制下拉菜单内其中react-flow-id与canvas_controls_dropdown可以直接在源码中确认前者是 Flow 页面中 ReactFlow 的宿主容器见 PageComponent/index.tsxdiv idreact-flow-id ...后者位于画布控制组件 CanvasControlsDropdown.tsx。这也提示了一个细节react-flow-id严格来说是id而非data-testid测试中既可getByTestId也可用#react-flow-id定位。组件参数字段选择器元素说明popover-anchor-input-{name}组件输入字段{name}与字段的name属性一致popover-anchor-input-openai_api_keyOpenAI API key 字段仅当未选择全局变量时可见input_output{component}输出连接句柄区域如input_outputChat Output这一组选择器包含整个目录中最关键的条件渲染陷阱当字段配置为load_from_db: true且选择了全局变量时字段渲染为badge而非input此时popover-anchor-input-{name}选择器在 DOM 中根本不存在。编写针对该字段的断言前必须先确认字段当前是输入框形态还是 badge 形态否则测试会因为元素缺失而失败。动作与按钮选择器元素说明button-send发送消息按钮Playground 聊天button_run_{component}运行组件按钮如button_run_chat outputpublish-button发布/部署流程顶部工具栏save-flow-button保存流程顶部工具栏edit-fields-button切换字段编辑器检视面板——须先调用enableInspectPanel()playground-btn-flow-ioPlayground 按钮关闭时用dispatchEvent(click)而非.click()manage-model-providers模型提供商按钮设置这里登记了两条非显而易见的操作细节其一edit-fields-button在检视面板未启用时不可见必须先执行enableInspectPanel(page)其二playground-btn-flow-io的关闭操作需要dispatchEvent(click)才能生效直接.click()不可靠。这类「选择器 正确交互方式」的成对登记正是选择器目录相比裸 testid 列表更完整的价值所在。模态框与面板选择器元素说明modal-title模态框标题通用模态框标题edit-button-modal编辑按钮旧版旧的模态框模式edit-button-close关闭编辑模态框旧的模态框模式lock-flow-switch流程锁定开关流程设置input-flow-name流程名称输入框流程设置模态框input-flow-description流程描述输入框流程设置模态框session-selector会话选择器Playground 会话切换save-flow-button与input-flow-name均能在源码中定位到实际使用处前者在流程头部菜单 FlowMenu/index.tsx后者在流程设置编辑组件 editFlowSettingsComponent/index.tsx。图标作为按钮选择器动作icon-Globe打开全局变量icon-Lock切换流程锁定icon-ChevronLeft返回导航icon-Trash2删除动作icon-Plus添加/创建动作图标按钮通常没有可访问文本icon-前缀加图标组件名如Globe、ChevronLeft与图标库命名一致为它们提供了稳定锚点。检视面板字段可见性开关这类选择器用于切换检视面板中字段的显隐格式为show{fieldname}无分隔符选择器字段showmodel_name模型名字段showtemperaturetemperature 字段showmax_tokensmax tokens 字段showopenai_api_keyOpenAI API key 字段配合 SKILL 文档中的检视面板操作模式完整序列为enableInspectPanel(page)→ 点击节点如title-OpenAI→ 点击edit-fields-button→ 点击show{fieldname}切换可见性 → 再次点击edit-fields-button关闭编辑器。跳过第一步会导致edit-fields-button不可见。何时为新元素添加>// 正确 —— 有描述性、kebab-case button>import { expect, test } from ../../fixtures; // 必须从 fixtures 导入而非 playwright/test import { awaitBootstrapTest } from ../../utils/await-bootstrap-test; test( user should be able to run a flow successfully, { tag: [release, workspace] }, // 每个测试必须带 release 标签 async ({ page }) { await awaitBootstrapTest(page); // Arrange: 创建空白流程selectors.md「画布与导航」条目 await page.getByTestId(blank-flow).click(); // Act: 搜索并添加组件selectors.md「画布与导航」条目 await page.getByTestId(sidebar-search-input).fill(Chat Output); // ... 组装流程 ... // Assert: 验证构建结果 await expect(page.getByTestId(build-status-success)).toBeVisible({ timeout: 30000 }); }, );几个与选择器使用强相关的约束导入来源test与expect必须从 fixtures.ts 导入。该自定义 fixture 会自动监视所有/api/响应遇到 HTTP 400/404/422/500、事件流中error: true或 Python 异常即令测试失败测试预期内出错时可调用page.allowFlowErrors()放行。标签体系每个测试必须带releaserelease 运行按此 grep可叠加workspace、api、database、components、starter-projects等领域标签这六个是唯一允许的值。异步等待涉及画布构建、流程执行的断言要显式设置超时如timeout: 30000避免依赖固定 sleep。维护该目录的实践要点综合 selectors.md 的正文与配套文档维护选择器目录时值得遵循的实践改动data-testid前先查目录SKILL 文档明确将「修改组件中的data-testid属性」列为 E2E 技能的触发条件因为锚点改名会静默破坏既有测试动态渲染元素优先登记画布节点title-、handle-、组件字段popover-anchor-input-都是运行时生成的 DOM缺少稳定锚点就无法可靠定位条件渲染必须在「Notes」列说明如popover-anchor-input-openai_api_key标注「仅当未选择全局变量时可见」badge 形态的存在与否直接影响选择器可用性交互怪癖随选择器登记playground-btn-flow-io需要dispatchEvent(click)、edit-fields-button依赖前置的enableInspectPanel()这些行为细节写在目录里可避免每个测试作者重复踩坑。小结selectors.md 的价值不只是一张 testid 清单它通过「前缀—元素类型」的命名规范让锚点自解释通过分类目录画布导航、组件字段、动作按钮、模态框、图标、检视开关覆盖 Langflow 前端的全部关键交互面并用 Notes 列沉淀了 badge 条件渲染、事件派发方式、前置依赖等易错细节。配合 playwright.config.ts 的并行/重试配置、fixtures.ts 的 API 错误自动拦截以及tests/utils/中的共享 helper它构成了 Langflow 前端 E2E 测试稳定性的基础契约。为新元素添加data-testid时只需回答三个问题——测试是否要交互、是否有 role/text 替代、是否动态渲染——再按 kebab-case 的{type}-{descriptive-name}格式命名并登记目录即可延续这套契约。【免费下载链接】langflowLangflow is a powerful tool for building and deploying AI-powered agents and workflows.项目地址: https://gitcode.com/GitHub_Trending/la/langflow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Langflow E2E 测试选择器目录：data-testid 命名规范与实战用法
Langflow E2E 测试选择器目录data-testid 命名规范与实战用法【免费下载链接】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命名规范、分类选择器目录画布、组件字段、动作按钮、模态框、图标、检视面板开关以及添加新data-testid的判定标准并结合仓库中的真实组件源码与 Playwright 测试体系说明这些选择器在前端代码中如何落地、在测试中如何被稳定地消费。读完后你能够为 Langflow 前端新元素规范地添加测试锚点并能直接使用目录中的选择器编写可运行的 Playwright E2E 测试。选择器目录在 Langflow E2E 体系中的定位selectors.md 被明确定义为 Langflow E2E 测试中data-testid选择器的权威参考canonical reference任何新增的交互式元素都应当遵循其中的命名约定并把元素登记进这个目录。它位于 e2e-testing 技能目录 的references/子目录下与 helpers.md、fixtures.md 共同构成 E2E 技能的参考文档集。从测试体系看这个目录服务于一套基于 Playwright 的完整基础设施组成部分位置作用测试配置playwright.config.tsfullyParallel: true、5 分钟超时、2 个 worker、20s 操作超时、首次重试时抓取 trace自定义 fixturesfixtures.ts自动拦截/api/响应检测 HTTP 400/404/422/500 与流式事件中的执行错误共享工具函数tests/utils/awaitBootstrapTest、initialGPTsetup、enableInspectPanel等 37 个 helper测试分层tests/core/features、integrations、regression、unit与tests/extended/核心功能、模板集成、回归与扩展特性选择器目录的价值在于它把「组件侧定义的锚点」与「测试侧消费的定位器」用一份单一事实来源single source of truth绑定起来——测试作者不需要阅读组件源码就能定位元素组件作者改动锚点前也知道哪些测试依赖它。命名规范前缀指示元素类型文档规定所有data-testid值采用 kebab-case并以表示元素类型的前缀开头前缀元素类型示例input-文本输入框input-chat-playground、input-flow-namebutton-/button_动作按钮button-send、button_run_chat outputicon-图标按钮icon-Globe、icon-Lock、icon-ChevronLeftpopover-anchor-input-组件参数字段popover-anchor-input-openai_api_keyadd-component-button-拖拽添加按钮add-component-button-chat-outputcard-流程/组件卡片card-my-flow-nametitle-画布上的节点标题title-OpenAI、title-Chat Outputhandle-连接句柄handle-{component}-{shownode}-{field}-{direction}div-chat-message聊天消息div-chat-messageshow字段可见性开关showmodel_name、showtemperature值得注意的是前缀与元素类型一一对应这本身就是可检索性的设计仅凭 testid 前缀测试作者即可判断该锚点指向输入框、按钮还是画布句柄而无需打开组件实现。个别前缀如button_run_下划线、show无前分隔符是历史沿革目录将它们如实登记测试代码必须按原文匹配。分类选择器目录画布与导航选择器元素说明blank-flowNew Blank Flow 按钮位于创建项目模态框sidebar-search-input组件搜索输入框侧边栏搜索栏sidebar-nav-add_note便签按钮侧边栏导航sidebar-add-sticky-note-button添加便签新版按钮已更新命名react-flow-idReactFlow 画布容器用作拖拽目标canvas_controls_dropdown画布控制下拉菜单打开缩放/适配/检视菜单fit_view适配视图按钮画布控制菜单内zoom_out缩小按钮画布控制菜单内zoom_in放大按钮画布控制菜单内inspector-toggle检视面板开关画布控制下拉菜单内其中react-flow-id与canvas_controls_dropdown可以直接在源码中确认前者是 Flow 页面中 ReactFlow 的宿主容器见 PageComponent/index.tsxdiv idreact-flow-id ...后者位于画布控制组件 CanvasControlsDropdown.tsx。这也提示了一个细节react-flow-id严格来说是id而非data-testid测试中既可getByTestId也可用#react-flow-id定位。组件参数字段选择器元素说明popover-anchor-input-{name}组件输入字段{name}与字段的name属性一致popover-anchor-input-openai_api_keyOpenAI API key 字段仅当未选择全局变量时可见input_output{component}输出连接句柄区域如input_outputChat Output这一组选择器包含整个目录中最关键的条件渲染陷阱当字段配置为load_from_db: true且选择了全局变量时字段渲染为badge而非input此时popover-anchor-input-{name}选择器在 DOM 中根本不存在。编写针对该字段的断言前必须先确认字段当前是输入框形态还是 badge 形态否则测试会因为元素缺失而失败。动作与按钮选择器元素说明button-send发送消息按钮Playground 聊天button_run_{component}运行组件按钮如button_run_chat outputpublish-button发布/部署流程顶部工具栏save-flow-button保存流程顶部工具栏edit-fields-button切换字段编辑器检视面板——须先调用enableInspectPanel()playground-btn-flow-ioPlayground 按钮关闭时用dispatchEvent(click)而非.click()manage-model-providers模型提供商按钮设置这里登记了两条非显而易见的操作细节其一edit-fields-button在检视面板未启用时不可见必须先执行enableInspectPanel(page)其二playground-btn-flow-io的关闭操作需要dispatchEvent(click)才能生效直接.click()不可靠。这类「选择器 正确交互方式」的成对登记正是选择器目录相比裸 testid 列表更完整的价值所在。模态框与面板选择器元素说明modal-title模态框标题通用模态框标题edit-button-modal编辑按钮旧版旧的模态框模式edit-button-close关闭编辑模态框旧的模态框模式lock-flow-switch流程锁定开关流程设置input-flow-name流程名称输入框流程设置模态框input-flow-description流程描述输入框流程设置模态框session-selector会话选择器Playground 会话切换save-flow-button与input-flow-name均能在源码中定位到实际使用处前者在流程头部菜单 FlowMenu/index.tsx后者在流程设置编辑组件 editFlowSettingsComponent/index.tsx。图标作为按钮选择器动作icon-Globe打开全局变量icon-Lock切换流程锁定icon-ChevronLeft返回导航icon-Trash2删除动作icon-Plus添加/创建动作图标按钮通常没有可访问文本icon-前缀加图标组件名如Globe、ChevronLeft与图标库命名一致为它们提供了稳定锚点。检视面板字段可见性开关这类选择器用于切换检视面板中字段的显隐格式为show{fieldname}无分隔符选择器字段showmodel_name模型名字段showtemperaturetemperature 字段showmax_tokensmax tokens 字段showopenai_api_keyOpenAI API key 字段配合 SKILL 文档中的检视面板操作模式完整序列为enableInspectPanel(page)→ 点击节点如title-OpenAI→ 点击edit-fields-button→ 点击show{fieldname}切换可见性 → 再次点击edit-fields-button关闭编辑器。跳过第一步会导致edit-fields-button不可见。何时为新元素添加>// 正确 —— 有描述性、kebab-case button>import { expect, test } from ../../fixtures; // 必须从 fixtures 导入而非 playwright/test import { awaitBootstrapTest } from ../../utils/await-bootstrap-test; test( user should be able to run a flow successfully, { tag: [release, workspace] }, // 每个测试必须带 release 标签 async ({ page }) { await awaitBootstrapTest(page); // Arrange: 创建空白流程selectors.md「画布与导航」条目 await page.getByTestId(blank-flow).click(); // Act: 搜索并添加组件selectors.md「画布与导航」条目 await page.getByTestId(sidebar-search-input).fill(Chat Output); // ... 组装流程 ... // Assert: 验证构建结果 await expect(page.getByTestId(build-status-success)).toBeVisible({ timeout: 30000 }); }, );几个与选择器使用强相关的约束导入来源test与expect必须从 fixtures.ts 导入。该自定义 fixture 会自动监视所有/api/响应遇到 HTTP 400/404/422/500、事件流中error: true或 Python 异常即令测试失败测试预期内出错时可调用page.allowFlowErrors()放行。标签体系每个测试必须带releaserelease 运行按此 grep可叠加workspace、api、database、components、starter-projects等领域标签这六个是唯一允许的值。异步等待涉及画布构建、流程执行的断言要显式设置超时如timeout: 30000避免依赖固定 sleep。维护该目录的实践要点综合 selectors.md 的正文与配套文档维护选择器目录时值得遵循的实践改动data-testid前先查目录SKILL 文档明确将「修改组件中的data-testid属性」列为 E2E 技能的触发条件因为锚点改名会静默破坏既有测试动态渲染元素优先登记画布节点title-、handle-、组件字段popover-anchor-input-都是运行时生成的 DOM缺少稳定锚点就无法可靠定位条件渲染必须在「Notes」列说明如popover-anchor-input-openai_api_key标注「仅当未选择全局变量时可见」badge 形态的存在与否直接影响选择器可用性交互怪癖随选择器登记playground-btn-flow-io需要dispatchEvent(click)、edit-fields-button依赖前置的enableInspectPanel()这些行为细节写在目录里可避免每个测试作者重复踩坑。小结selectors.md 的价值不只是一张 testid 清单它通过「前缀—元素类型」的命名规范让锚点自解释通过分类目录画布导航、组件字段、动作按钮、模态框、图标、检视开关覆盖 Langflow 前端的全部关键交互面并用 Notes 列沉淀了 badge 条件渲染、事件派发方式、前置依赖等易错细节。配合 playwright.config.ts 的并行/重试配置、fixtures.ts 的 API 错误自动拦截以及tests/utils/中的共享 helper它构成了 Langflow 前端 E2E 测试稳定性的基础契约。为新元素添加data-testid时只需回答三个问题——测试是否要交互、是否有 role/text 替代、是否动态渲染——再按 kebab-case 的{type}-{descriptive-name}格式命名并登记目录即可延续这套契约。【免费下载链接】langflowLangflow is a powerful tool for building and deploying AI-powered agents and workflows.项目地址: https://gitcode.com/GitHub_Trending/la/langflow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
