资讯动态

Eclipse Che E2E 测试生成实战:用 Playwright MCP 探索页面并产出 Mocha/Selenium 测试代码

发布时间:2026/10/15 22:05:19 来源:尧图企业网站定制
开发工具云原生【免费下载链接】cheKubernetes based Cloud Development Environments for Enterprise Teams项目地址https://gitcode.com/gh_mirrors/ch/che点击查看免费下载本指南以 Eclipse Che / Red Hat OpenShift Dev Spaces 仓库中tests/e2e的 E2E 测试工程为依托完整讲解探索新功能页面 → 记录交互 → 制定测试计划 → 生成生产级 Mocha/Selenium 测试代码的自动化工作流即仓库 explore-and-generate-tests SKILL 定义的能力。你将掌握 Phase 0Phase 5 的完整流程、OpenShift 与 Kubernetes 两套登录路径、Playwright 快照到 Selenium 定位器的翻译规则以及符合 CODE_STYLE.md 规范的 Page Object 与 Spec 代码模板可直接复制落地到你的测试开发工作中。前置条件Playwright MCP 与编码规范开始探索之前需要满足两个前置条件Playwright MCP 服务器已配置仓库根目录下的tests/e2e/.mcp.json中定义了 Playwright MCP 服务器配置如下{ mcpServers: { playwright: { type: stdio, command: npx, args: [playwright/mcplatest, --ignore-https-errors, --browser-args--ignore-certificate-errors], env: {} } } }可以看到该配置通过npx playwright/mcplatest以 stdio 方式启动并显式传递了--ignore-https-errors与--browser-args--ignore-certificate-errors两个参数用于忽略 HTTPS 证书错误——这对访问自签名证书的 Dev Spaces / Che 集群如 localhost/minikube 或内部环境尤为关键。生成任何代码前必须先阅读 CODE_STYLE.md该文档定义了本工程强制遵循的编码标准——Page Object 使用 inversify 依赖注入、公开方法不写public关键字、每个公开方法以Logger.debug()开头、静态定位器用private static readonly字段、动态定位器用返回By的私有方法、Mocha 采用 TDD 风格suite()/test()且禁止在 Mocha 声明中使用箭头函数等。后续所有代码生成都必须对齐这些规则。输入参数用户需要提供以下参数来驱动探索与生成过程参数说明page要探索的 URL 或路由例如/#/create-workspace、/#/user-preferences或完整 URLscope可选探索聚焦点某个具体功能、按钮、表单或everythingtest-cases-repo可选用于生成 Polarion 测试用例 Markdown 的 test-cases 仓库路径默认/home/ndp/projects/cci/test-casesPhase 0认证——打通浏览器会话在探索任何页面之前必须先建立一个已认证的浏览器会话。确定目标 URL若用户提供了完整 URL直接提取其 base URL若用户只提供了路由如/#/create-workspace需要向用户询问 base URL。收集凭据与环境信息使用 AskUserQuestion 收集以下信息URL若未提供—— Dev Spaces 或 Eclipse Che 的 base URLPlatform——openshift或kubernetes可从 URL 自动推断URL 中包含devspaces则视为 OpenShiftche且运行在 localhost/minikube 则视为 KubernetesUsername / Password——登录用户名与密码Identity Provider仅 OpenShift默认htpasswd。OpenShift 登录流程Dev Spaces / OpenShift 上的 Eclipse Che使用browser_navigate导航到 base URL使用browser_snapshot查看登录页状态使用browser_click点击身份提供方链接如 htpasswd再次browser_snapshot查看登录表单使用browser_type依次在用户名、密码字段中输入使用browser_click点击 Log in 按钮若出现授权页Allow selected permissions点击批准。从源码看仓库中 OcpUserLoginPage.ts 的login()方法正是对这一流程的程序化实现先判断身份提供方链接是否可见isIdentityProviderLinkVisible()可见则点击登录提供方标题waitAndClickOnLoginProviderTitle()随后等待欢迎页、输入用户名密码并点击登录。其中用户名与密码分别来自 OAUTH_CONSTANTS.ts 的TS_SELENIUM_OCP_USERNAME与TS_SELENIUM_OCP_PASSWORD环境变量。Kubernetes / Minikube 登录流程Eclipse Che Dex登录页是 Dex 登录表单——先用browser_snapshot确认若显示多个登录选项点击 Log in with Email使用browser_type在邮箱/用户名字段输入使用browser_type在密码字段输入使用browser_click点击 Login 按钮若出现授权页面点击 Grant Access。仓库中的 DexLoginPage.ts 即对应此流程的 Page ObjectwaitDexLoginPage()等待dex-container类名容器可见enterUserNameKubernetes()/enterPasswordKubernetes()分别向idlogin与idpassword输入框填值clickOnLoginButton()点击idsubmit-login提交按钮。登录后的公共步骤使用browser_snapshot确认 Dashboard 已成功加载若登录失败报告错误并停止流程。设置环境上下文供生成的测试代码使用认证完成后将以下信息映射为生成代码中使用的环境变量平台需要记住的环境变量通用TS_SELENIUM_BASE_URLbase URL、TS_PLATFORMopenshift或kubernetesOpenShiftTS_SELENIUM_OCP_USERNAME用户名、TS_OCP_LOGIN_PAGE_PROVIDER_TITLE身份提供方KubernetesTS_SELENIUM_K8S_USERNAME用户名这些变量与仓库中的常量定义一一对应TS_SELENIUM_BASE_URL在 BASE_TEST_CONSTANTS.ts 中定义默认http://sample-url且会自动去除末尾/TS_PLATFORM默认openshift该文件还导出了Platform枚举TS_SELENIUM_OCP_USERNAME、TS_OCP_LOGIN_PAGE_PROVIDER_TITLE、TS_SELENIUM_K8S_USERNAME均在 OAUTH_CONSTANTS.ts 中定义。Phase 1探索页面——以可访问性树为纲使用 Playwright MCP 工具系统化地探索目标页面使用browser_navigate导航到目标页面使用browser_snapshot捕获完整可访问性树accessibility tree识别所有可交互元素按钮、链接、表单、下拉框、开关、标签页、模态框逐个探索每个可交互元素点击标签页/导航项以发现子页面打开下拉框查看选项悬停元素发现 tooltip 或隐藏 UI检查条件性 UI随状态出现/消失的元素边探索边记录页面结构页面布局与区块、导航流什么通向哪里、表单字段必填/可选、校验规则、操作按钮及其效果、UI 中可见的错误状态与边界场景。关键要点以browser_snapshot可访问性树作为主要探索手段用browser_click、browser_fill_form、browser_hover与元素交互页面加载耗时较长时使用browser_wait_for每次交互之后都要重新browser_snapshot观察结果状态不要使用截图screenshots——快照snapshots提供结构化数据更适合后续转化为定位器。Phase 2记录交互——结构化的功能档案探索完成后将功能以结构化形式记录。推荐的记录模板如下## Page: [Page Name] URL: [full URL or route] ### UI Elements | Element | Type | Locator Strategy | Behavior | | ----------------------- | ---------- | ----------------------------------------------- | ----------------------------- | | Create Workspace button | button | By.xpath(//button[text()Create Workspace]) | Opens workspace creation form | | Git Repo URL input | text input | By.id(git-repo-url) | Accepts git repository URL | | ... | ... | ... | ... | ### User Workflows 1. [Workflow Name]例如 Create workspace from git repo - Step 1: [action] → [expected result] - Step 2: [action] → [expected result] - ... 2. [Workflow Name]例如 Cancel workspace creation - Step 1: ... ### Edge Cases Error States - [What happens when invalid input is provided] - [What happens when network is slow] - [Empty states, loading states]这一阶段产出的 UI Elements 表格其Locator Strategy列正是后续生成 Selenium 定位器时的直接输入。以仓库中真实的 CreateWorkspace.ts 为例其中FACTORY_URL使用By.id(git-repo-url)、CREATE_AND_OPEN_BUTTON使用By.id(create-and-open-button)与模板表格中的示例高度一致——说明该模板来源于真实的测试实践。Phase 3制定测试计划——按优先级组织用例基于已记录的交互创建全面的测试计划按优先级对测试场景分类P1高必须正常工作的核心 happy-path 工作流P2中替代流程、输入校验、错误处理P3低边界情况、外观检查、可访问性。测试用例结构Test ID: [CATEGORY_LETTER][NUMBER] Title: [descriptive title] Type: positive | negative Priority: high | medium | low Preconditions: [what must be true before the test] Steps: 1. [action] → Expected: [result] 2. [action] → Expected: [result]分组与审批按功能领域或工作流将测试分组为套件suite将测试计划呈现给用户并获得批准后再进入代码生成阶段。用户可能要求增删测试用例、调整优先级、修改 scope、拆分为多个 spec。Phase 4生成 E2E 测试代码用户批准测试计划后进入生产级测试代码生成阶段。Step 4.1阅读必需的参考文件写任何代码之前先阅读以下文件以理解现有模式CODE_STYLE.md # 编码规范 configs/inversify.types.ts # 现有类注册表 configs/inversify.config.ts # 现有 DI 绑定 constants/TIMEOUT_CONSTANTS.ts # 可用的超时常量注以上路径均相对于仓库tests/e2e/目录即 CODE_STYLE.md、configs/inversify.types.ts、configs/inversify.config.ts、constants/TIMEOUT_CONSTANTS.ts。同时阅读 12 个与你要生成的内容相近的现有 spec 和 page object以精确对齐代码风格。从源码看configs/inversify.types.ts 维护了TYPESSymbol 令牌用于Driver、CheLogin、OcpLogin、WorkspaceUtil等接口绑定与CLASSES字符串键用于DriverHelper、Dashboard、CreateWorkspace、LoginTests、WorkspaceHandlingTests等具体类configs/inversify.config.ts 则创建e2eContainer: Container并通过e2eContainer.bind...(...).to(...)完成所有绑定如TYPES.Driver → ChromeDriver、CLASSES.DriverHelper → DriverHelper。生成新 Page Object 时必须同时更新这两个文件。Step 4.2生成 Page Object如需要每个需要交互的新页面或组件都应创建对应的 Page Object文件pageobjects/category/NewPage.ts/** ******************************************************************* * copyright (c) 2026 Red Hat, Inc. * * This program and the accompanying materials are made * available under the terms of the Eclipse Public License 2.0 * which is available at https://www.eclipse.org/legal/epl-2.0/ * * SPDX-License-Identifier: EPL-2.0 **********************************************************************/ import { inject, injectable } from inversify; import reflect-metadata; import { By } from selenium-webdriver; import { CLASSES } from ../../configs/inversify.types; import { DriverHelper } from ../../utils/DriverHelper; import { Logger } from ../../utils/Logger; import { TIMEOUT_CONSTANTS } from ../../constants/TIMEOUT_CONSTANTS; injectable() export class NewPage { private static readonly ELEMENT_LOCATOR: By By.xpath(//...); constructor(inject(CLASSES.DriverHelper) private readonly driverHelper: DriverHelper) {} async waitPage(timeout: number TIMEOUT_CONSTANTS.TS_COMMON_DASHBOARD_WAIT_TIMEOUT): Promisevoid { Logger.debug(); await this.driverHelper.waitVisibility(NewPage.ELEMENT_LOCATOR, timeout); } private getDynamicLocator(name: string): By { return By.xpath(//div[text()${name}]); } }Page Object 必须遵守的规则类上使用injectable()装饰器每个公开方法开头调用Logger.debug()静态定位器声明为private static readonly NAME: By动态定位器声明为返回By的private方法构造器使用带inject()装饰器的注入参数所有方法必须有显式返回类型公开方法不要写public关键字以 XPath 作为主要定位策略与现有模式一致超时值一律使用 TIMEOUT_CONSTANTS 中的常量禁止硬编码。以仓库真实的 CreateWorkspace.ts 为例它完全遵循上述规则injectable()类、静态定位器private static readonly FACTORY_URL: By By.id(git-repo-url)、动态定位器私有getSampleLocator(sampleName)方法返回By、所有公开方法带Logger.debug()与显式返回类型、超时默认值取自TIMEOUT_CONSTANTS。Step 4.3生成测试 Spec文件specs/category/NewFeature.spec.ts/** ******************************************************************* * copyright (c) 2026 Red Hat, Inc. * * This program and the accompanying materials are made * available under the terms of the Eclipse Public License 2.0 * which is available at https://www.eclipse.org/legal/epl-2.0/ * * SPDX-License-Identifier: EPL-2.0 **********************************************************************/ import { e2eContainer } from ../../configs/inversify.config; import { CLASSES, TYPES } from ../../configs/inversify.types; import { LoginTests } from ../../tests-library/LoginTests; import { WorkspaceHandlingTests } from ../../tests-library/WorkspaceHandlingTests; import { BASE_TEST_CONSTANTS } from ../../constants/BASE_TEST_CONSTANTS; // ... other imports suite(New Feature ${BASE_TEST_CONSTANTS.TEST_ENVIRONMENT}, function (): void { const loginTests: LoginTests e2eContainer.get(CLASSES.LoginTests); // ... other DI injections suiteSetup(Login, async function (): Promisevoid { await loginTests.loginIntoChe(); }); test(Test case description, async function (): Promisevoid { // test implementation }); suiteTeardown(Cleanup, async function (): Promisevoid { // cleanup code }); });Test Spec 必须遵守的规则使用 Mocha TDD 风格suite()、test()、suiteSetup()、suiteTeardown()绝不在 Mocha 声明中使用箭头函数在suite()函数体内通过e2eContainer.get(...)获取 DI 实例suiteSetup中必须包含登录loginsuiteTeardown中必须包含清理cleanup所有回调使用function (): void而非箭头函数。仓库中的真实 spec 完美印证了这些规则。以 CustomOpenVSXRegistry.spec.ts 为例它在suite()内通过e2eContainer.get(CLASSES.LoginTests)等获取实例suiteSetup中调用loginTests.loginIntoChe()各test()按步骤实现功能验证suiteTeardown中执行删除 secret、恢复 CheCluster CR、删除工作区等清理逻辑。此外tests-library/LoginTests.ts 中loginIntoChe()的源码显示它会先检查当前 URL 是否已包含TS_SELENIUM_BASE_URL若已登录则直接等待 Dashboard 页面否则调用productLoginPage.login(userName, password)完成登录——因此登录 hook 具备幂等性可安全地在每个套件中重复使用。Step 4.4注册新组件若创建了新的 Page Object需要更新两处configs/inversify.types.ts—— 将类名添加到CLASSES对象configs/inversify.config.ts—— 添加 import 及e2eContainer.bind()调用。Step 4.5生成 Polarion 测试用例 Markdown可选若用户希望将测试用例同步到 Polarion还需在 test-cases 仓库中生成 Markdown 文件文件test-cases-repo/tests/functional|operational/category/id-title.md--- arch: - value: x86_64 assignee: ask user caseposneg: positive | negative caseautomation: automated caseimportance: high | medium | low customerscenario: false estimate: 1h --- # ID - Test Title ## Description - Test script: link to the generated spec file in GitHub生成后使用 test-cases 仓库的npm run rename命令校验文件名合法性。Phase 5验证——确保代码达标生成全部代码后执行以下验证步骤TypeScript 编译运行npm run tsc捕获类型错误。从 package.json 的脚本定义看tsc会先执行configs/sh-scripts/generateIndex.sh再执行tsc -p .并将产物输出到dist目录Lint 检查运行npm run lint即eslint --fix .捕获风格违规Prettier 格式化运行npm run prettier修复格式问题对照 CODE_STYLE.md 复核生成的代码向用户呈现总结列出创建/修改的文件、测试用例及其优先级、需要人工执行的步骤如运行测试、更新 Polarion。补充说明完整的本地测试运行命令为npm run test其内部会先执行initDefaultValues.sh、lint、tsc再通过mocha --config dist/configs/mocharc.js运行。测试选择由 configs/mocharc.ts 与 MOCHA_CONSTANTS.ts 驱动MOCHA_DIRECTORY指定目录、USERSTORY即MOCHA_USERSTORY指定单个 spec 文件、MOCHA_SUITE指定套件、MOCHA_GREP按名称过滤用例——因此按 CODE_STYLE.md 的建议不需要为每个测试单独创建 npm script而是用mocha --spec或mocha --grep参数运行特定测试。Locator Strategy Guide从 Playwright 快照翻译到 Selenium 定位器将 Playwright MCP 快照元素转换为 Selenium 定位器时遵循以下对照表Playwright SnapshotSelenium Locatorrolebutton nameCreateBy.xpath(//button[text()Create])roletextbox nameURLBy.xpath(//input[aria-labelURL])rolelink nameSettingsBy.xpath(//a[text()Settings])roletab nameGit RepoBy.xpath(//button[roletab and text()Git Repo])data-testidworkspace-nameBy.css([data-testidworkspace-name])idinput-fieldBy.id(input-field)推荐定位器优先级稳定性从高到低data-testid属性最稳定id属性带文本内容的 XPath适用于按钮、链接带aria-label的 XPath适用于输入框、表单字段基于结构路径的 XPath最后手段——脆弱。该优先级与仓库既有 Page Object 的实践高度一致例如 DexLoginPage.ts 大量使用By.id()login、password、submit-login而 WorkspaceHandlingTests.ts 中则混用了文本 XPath//h1[contains(.,Starting workspace )]与 CSSspan[class*label__content]。示例调用explore and generate tests for /#/create-workspace explore /#/user-preferences and write E2E tests for the settings page generate tests for the new workspace sharing feature at /#/workspaces小结这套探索 → 记录 → 规划 → 生成 → 验证的 E2E 测试生成工作流将 Playwright MCP 的页面探索能力与 Eclipse Che E2E 测试工程的 inversify DI、Mocha TDD、Selenium 定位器体系无缝衔接。对开发者而言其核心价值在于以可访问性树为事实来源完成页面建模以 CODE_STYLE 为准则保证生成代码与既有测试库tests-library、pageobjects、utils风格一致并通过npm run tsc npm run lint npm run prettier三重校验确保提交质量。无论你是要为新功能补充回归测试还是为工厂factory、仪表盘dashboard、IDE 等现有模块扩展覆盖都可以直接复用本文的工作流与模板快速产出符合规范的测试代码。赞分享开发工具云原生【免费下载链接】cheKubernetes based Cloud Development Environments for Enterprise Teams项目地址https://gitcode.com/gh_mirrors/ch/che点击查看免费下载相关推荐Handsontable 测试录制指南使用 Playwright CLI 生成并重构 E2E 测试Handsontable 测试录制指南使用 Playwright CLI 生成并重构 E2E 测试 当你面对网格grid、右键菜单、拖拽选择这类用鼠标点前端UI组件Eclipse Che 7 E2E 测试实战tests/e2e 模块的配置、运行与调试指南Eclipse Che 7 E2E 测试实战tests/e2e 模块的配置、运行与调试指南 本文以 Che 仓库中 tests/e2e/README.md h开发工具云原生Handsontable 测试生成评估框架实战用 unasserted-capture 信号写出有意义的 Playwright E2E 回归测试Handsontable 测试生成评估框架实战用 unasserted capture 信号写出有意义的 Playwright E2E 回归测试 本篇技术指南前端UI组件创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价 →
↑