基于 test/monaco 的 Monaco Editor 冒烟测试指南：Bundle、编译与 Playwright 验证

开发工具IDE代码编辑器后端【免费下载链接】openvscode-serverRun upstream VS Code on a remote machine with access through a modern web browser from any device, anywhere.项目地址https://gitcode.com/gh_mirrors/op/openvscode-server点击查看免费下载本指南以 test/monaco/README.md 为核心系统讲解 openvscode-server 仓库中 Monaco Editor 分发包distribution冒烟测试的完整流程从依赖安装、Webpack 打包、TypeScript 编译到基于 Playwright 与 Mocha 的真实浏览器集成测试。读完本文你将掌握这套测试体系的目录结构、每个脚本的作用与关键参数并能独立复现编辑、撤销、多光标、无障碍Accessibility等核心场景的验证过程。一、这套测试在仓库中的定位openvscode-server 是基于 VS Code 源码构建的远程开发方案其核心编辑器组件正是 Monaco Editor。仓库用build/gulpfile.editor.ts中的editor-distro任务把src/vs/editor等源码抽取、编译、打包成独立的out-monaco-editor-core目录即 Monaco Editor 的发行产物而test/monaco目录下的脚本则专门用于对该发行产物做冒烟测试smoke test确保打包后的编辑器在真实浏览器中依然可用。整个测试目录只有十余个文件职责非常清晰test/monaco/ ├── README.md # 官方操作说明本文主题文档 ├── core.js # 被测页面入口创建 Monaco 编辑器实例 ├── monaco.test.ts # Playwright Mocha 集成测试用例 ├── runner.js # 测试运行器静态服务器 启动浏览器测试 ├── webpack.config.js # 打包配置产出 core.bundle.js 等 ├── tsconfig.json # 测试代码的 TypeScript 编译配置 ├── package.json # npm 脚本定义 └── esm-check/ # 额外的 ESM 产物校验脚本esm-check二、前置准备确保 Monaco 发行产物已生成test/monaco的打包与测试都依赖仓库构建产物out-monaco-editor-core该目录通常不在源码树中需要先构建。产物由仓库根目录的 gulp 任务生成# 在仓库根目录执行 npm run gulp editor-distro对应任务定义在 build/gulpfile.editor.tsgulp.task(editor-distro, task.series( task.parallel( util.rimraf(out-editor-src), util.rimraf(out-monaco-editor-core), ), extractEditorSrcTask, // 抽取 editor 源码并做 tree-shaking compileEditorESMTask, // 编译为 ESM输出到 out-monaco-editor-core/esm finalEditorResourcesTask // 复制 LICENSE、monaco.d.ts、package.json 等 ) );其中extract-editor-src的入口点包括vs/editor/editor.main.ts、vs/editor/editor.worker.start.ts与vs/editor/common/services/editorWebWorkerMain.ts见 build/gulpfile.editor.ts这些入口在后续的 Webpack 打包中会被再次引用。如果你跳过这一步直接运行测试Webpack 的resolve.alias指向的../../out-monaco-editor-core/esm/vs/editor/editor.main.js将不存在构建会直接失败。三、Setup 与 Bundle安装依赖并打包被测页面按照 test/monaco/README.md 的第一步操作# 在 test/monaco 目录下 npm i npm run bundle3.1 依赖安装npm i会安装 test/monaco/package.json 中声明的开发依赖主要包括types/chai、chai断言库及其类型定义axe-playwright在 Playwright 页面中注入 axe-core用于无障碍审计warnings-to-errors-webpack-plugin把 Webpack 警告升级为错误保证打包质量。注意该package.json是独立于仓库根目录package.json的根目录的 monaco 相关脚本只有monaco-compile-check见 package.json所以需要在test/monaco目录内单独执行npm i。由于测试用到的typescript、webpack、playwright、mocha、yaserver等运行时依赖均来自仓库根目录的node_modules请确保根目录依赖已安装完整npm install或yarn install已完成。3.2 bundleWebpack 生产打包npm run bundle实际执行的是node ../../node_modules/webpack/bin/webpack --config ./webpack.config.js --bail见 test/monaco/package.json。--bail表示遇到第一个错误立即终止配合 webpack.config.js 的关键配置module.exports { mode: production, entry: { core: ./core.js, editorWebWorkerMain: ../../out-monaco-editor-core/esm/vs/editor/common/services/editorWebWorkerMain.js, }, output: { globalObject: self, filename: [name].bundle.js, path: path.resolve(__dirname, ./dist) }, resolve: { alias: { monaco-editor-core: path.resolve(__dirname, ../../out-monaco-editor-core/esm/vs/editor/editor.main.js), } }, plugins: [ new WarningsToErrorsPlugin() ], optimization: { // Without it, CI fails, which indicates a webpack minification bug. minimize: false, }, };要点解读两个入口core.js是测试页面逻辑editorWebWorkerMain.js是编辑器的 Web Worker 入口被打包为editorWebWorkerMain.bundle.js供MonacoEnvironment.getWorkerUrl返回使用路径别名所有import * as monaco from monaco-editor-core都指向out-monaco-editor-core/esm/vs/editor/editor.main.js这是 Monaco 编辑器面向第三方集成的统一入口资源规则CSS 走style-loadercss-loader字体文件woff/ttf/eot/svg用file-loader输出到dist/fonts/警告升级错误WarningsToErrorsPlugin让任何 Webpack 警告都导致构建失败这是 CI 质量门禁的一部分关闭压缩minimize: false是刻意为之——配置注释明确指出不开压缩会令 CI 失败这暴露了一个 Webpack 压缩 bugwebpack.config.js所以这里宁可牺牲体积也要保证产物稳定。3.3 被测页面长什么样core.js 是打包后页面dist/core.html的业务逻辑它在页面加载后创建一个 Python 语言示例编辑实例并把实例挂到window.instance上供测试脚本调用self.MonacoEnvironment { getWorkerUrl: function (moduleId, label) { return ./editorWebWorkerMain.bundle.js; } }; window.instance monaco.editor.create(document.getElementById(container), { value: [ from banana import *, , class Monkey:, # Bananas the monkey can eat., capacity 10, def eat(self, N):, \\\Make the monkey eat N bananas!\\\, capacity capacity - N*banana.size, , def feeding_frenzy(self):, eat(9.25), return Yum yum, ].join(\n), language: python });注意这段示例文本正是后面monaco.test.ts中断言所依赖的基准内容例如第一行是from banana import *。MonacoEnvironment.getWorkerUrl把 Web Worker 指向打包产物确保语法高亮等服务在真实 Worker 环境中运行这正是分发包冒烟测试的核心目的验证打包后的 ESM/Worker 链路是否完好。四、编译测试用例npm run compilenpm run compile该命令执行node ../../node_modules/typescript/bin/tsc即复用仓库根目录的 TypeScript按照 test/monaco/tsconfig.json 把monaco.test.ts编译到out/目录{ compilerOptions: { module: commonjs, target: es2016, strict: true, noUnusedParameters: false, noUnusedLocals: true, outDir: out, sourceMap: true, skipLibCheck: true, declaration: true, lib: [esnext, dom] }, exclude: [node_modules, out, tools] }几个要点module: commonjs让编译产物能被 Node 侧的mocha直接加载运行器会执行out/*.test.jsstrict: truenoUnusedLocals: true保证测试代码本身的质量lib包含esnext与dom注释标注esnext是为 issue #201187 提供较新的内置类型编译输出为out/monaco.test.js运行阶段由 runner.js 通过out/*.test.js通配符找到它。五、运行测试npm run test 与 runner.jsnpm run test这一步是整套体系的执行核心由 runner.js 完成整体流程如下。5.1 启动本地静态服务器runner.js使用yaserver以test/monaco目录为根目录创建静态服务器并在127.0.0.1:8563端口监听const PORT 8563; yaserver.createServer({ rootDir: __dirname }).then((staticServer) { const server http.createServer((request, response) { return staticServer.handle(request, response); }); server.listen(PORT, 127.0.0.1, () { ... }); });固定端口8563与测试用例中的APP http://127.0.0.1:8563/dist/core.html保持一致见 monaco.test.ts。只用回环地址监听避免测试服务器被局域网其他设备访问。5.2 顺序执行各浏览器测试服务器就绪后调用runTests()function runTests() { return ( runTest(chromium) .then(() runTest(firefox)) // .then(() runTest(webkit)) ); } function runTest(browser) { return new Promise((resolve, reject) { const proc cp.spawn(node, [../../node_modules/mocha/bin/mocha, out/*.test.js, --headless], { env: { BROWSER: browser, ...process.env }, stdio: inherit }); proc.on(error, reject); proc.on(exit, (code) { if (code 0) { resolve(); } else { reject(code); } }); }); }关键机制通过BROWSER环境变量告诉测试进程当前要跑哪个浏览器测试代码里const browserType process.env.BROWSER || chromiummonaco.test.ts据此调用playwright[browserType].launch(...)当前默认执行chromium与firefox两个浏览器webkit被注释停用保留以便将来启用每个浏览器都传了--headless测试以无头模式运行子进程退出码非 0 即视为该浏览器测试失败整个npm run test返回非零方便 CI 感知失败。5.3 通过后输出两个浏览器都通过后runner.js打印All good并以退出码 0 结束任一失败则打印错误并以退出码 1 结束便于脚本/CI 判断。六、测试用例详解monaco.test.tsmonaco.test.ts 是整个冒烟测试的断言主体。它用 Playwright 打开真实浏览器页面通过page.evaluate在页面上下文中直接操作window.instance即core.js创建的编辑器实例再用 chai 断言结果。6.1 测试框架与生命周期const TIMEOUT 20 * 1000; const APP http://127.0.0.1:${PORT}/dist/core.html; before(async function () { this.timeout(TIMEOUT); browser await playwright[browserType].launch({ headless: process.argv.includes(--headless) }); });before/after负责启动与关闭浏览器实例每个用例前创建 800×600 视口的页面并跳转到APP每个用例后关闭页面并把测试期间收集到的所有页面异常pageerror重新抛出monaco.test.ts即任何未捕获的 JS 运行时错误都会让对应用例失败——这是冒烟测试页面不能有报错的核心保障。6.2 API 集成测试用例用例 1monaco不应暴露为全局变量it(monaco is not exposed as global, async function () { assert.strictEqual(await page.evaluate(typeof monaco), undefined); });验证打包后页面没有把monaco泄漏到window全局从侧面确认打包隔离正确。用例 2聚焦并输入Focus and Typeawait page.evaluate( (function () { instance.focus(); instance.trigger(keyboard, cursorHome); instance.trigger(keyboard, type, { text: a }); })() ); assert.strictEqual(await page.evaluate(instance.getModel().getLineContent(1)), afrom banana import *);先聚焦编辑器触发cursorHome把光标移到行首再模拟键盘输入a随后断言第一行变成afrom banana import *。它验证了键盘事件管线instance.trigger(keyboard, ...)与底层编辑模型getModel().getLineContent(1)的真实联动。用例 3输入并撤销Type and Undo在同样的输入动作后调用instance.getModel().undo()断言第一行回到from banana import *。这一用例验证了撤销栈undo stack在键盘输入链路中的正确性。用例 4多光标Multi Cursorinstance.trigger(keyboard, editor.action.insertCursorBelow); // 重复 5 次 instance.trigger(keyboard, type, { text: # });连续插入 5 个下方光标后输入#断言前 7 行分别被注释为# from banana import *、#、# class Monkey:……monaco.test.ts。该用例验证多光标编辑这一编辑器核心能力在打包产物中可用。6.3 无障碍Accessibility测试这是该测试集中最重量级的部分全部通过axe-playwright的injectAxe(page)在页面注入 axe-core 后执行WCAG 关键违规检查以runOnly.type tag限定运行wcag2a、wcag2aa、wcag21a、wcag21aa、best-practice标签的规则统计impact critical的违规数并断言为 0monaco.test.ts。同时会打印每个违规元素的选择器与规则描述便于定位。颜色对比度检查以runOnly.type rule单独运行color-contrast规则同样要求 critical 违规数为 0monaco.test.ts。ARIA 语义检查编辑器容器.monaco-editor必须存在role属性必须存在aria-label属性页面内所有button必须有可访问名称aria-label或文本内容否则断言失败。这些用例说明 Monaco Editor 在发版前对无障碍WCAG、ARIA有明确的质量门槛是冒烟测试覆盖非功能需求的典型代表。七、附加校验ESM 产物检查esm-check除了 Webpack 打包链路目录下的 esm-check/esm-check.js 提供了另一条独立校验路径通过npm run esm-check见 test/monaco/package.json触发把out-monaco-editor-core/esm下所有.js文件复制到esm-check/out/并剥除所有import ...css语句因为原生 ESM 浏览器不支持裸 CSS 导入见extractSourcesWithoutCSS()在127.0.0.1:8562起一个静态服务器用 Playwright 启动 headless Chromium 访问index.html页面通过script typemodule srcindex.js以原生 ES Module 方式加载./out/vs/editor/editor.main.js并创建编辑器若 HTTP 状态非 200 或出现任何pageerror立即以退出码 1 结束。对应页面在 esm-check/index.html入口逻辑在 esm-check/index.js。这条链路验证的是不经打包器、浏览器直接加载 ESM 产物的场景与 Webpack 冒烟测试互为补充。八、与仓库其他部分的关系产物生成out-monaco-editor-core由 build/gulpfile.editor.ts 的editor-distro任务产出compileEditorESMTask把编译输出定位到out-monaco-editor-core/esmbuild/gulpfile.editor.tsfinalEditorResourcesTask负责补全monaco.d.ts、package.json、version.txt与 README发布流程build/monaco/README.md 描述了发版步骤生成monaco.d.ts、提升build/monaco/package.json版本、运行gulp editor-distro、在out-monaco-editor-core内npm publish与本测试配套形成构建 → 冒烟 → 发布的完整链路类型检查仓库根目录还提供monaco-compile-check脚本tsgo --project src/tsconfig.monaco.json --noEmit见 package.json对 Monaco 相关源码做类型级把关。九、常见问题排查现象可能原因与对策npm run bundle报找不到out-monaco-editor-core/esm/...尚未生成发行产物先在仓库根目录运行npm run gulp editor-distro详见 build/gulpfile.editor.tsnpm run compile提示找不到typescript根目录node_modules未就绪先在仓库根目录完成依赖安装test/monaco的脚本统一引用../../node_modules/...npm run test退出码 1 且打印页面错误页面存在未捕获 JS 异常monaco.test.ts的afterEach会把pageerror重新抛出导致失败可先单独运行node out/monaco.test.js --headless并配合浏览器 DevTools 定位无障碍用例失败属于分发包质量门禁存在 WCAG critical 违规或 ARIA 属性缺失需回到编辑器源码侧修复后重新editor-distro再测想临时只跑单个浏览器修改 runner.js 中runTests()的调用列表如只保留runTest(chromium)或临时放开webkit注释十、小结test/monaco以四条命令npm i→npm run bundle→npm run compile→npm run test串起了打包 → 编译 → 真实浏览器集成验证的完整冒烟测试流程再辅以esm-check的原生 ESM 校验。它覆盖了 Monaco Editor 分发包最关键的几类风险打包产物能否在浏览器正常加载、键盘编辑链路是否完好、多光标等核心功能是否可用、无障碍与 ARIA 是否符合规范、页面是否存在未捕获异常。对于任何基于 VS Code/Monaco 构建远程编辑产品的开发者这套测试的目录结构与实现思路都值得直接借鉴。赞分享开发工具IDE代码编辑器后端【免费下载链接】openvscode-serverRun upstream VS Code on a remote machine with access through a modern web browser from any device, anywhere.项目地址https://gitcode.com/gh_mirrors/op/openvscode-server点击查看免费下载相关推荐react-motion 发布验证指南基于 test/integration 的发布后冒烟测试实操react motion 发布验证指南基于 test/integration 的发布后冒烟测试实操 本指南围绕 react motion 仓库中的 test/前端UI组件Dolt 与 Hibernate ORM 兼容性验证基于 Maven 的 Hibernate 冒烟测试ORM Smoke Test实战指南Dolt 与 Hibernate ORM 兼容性验证基于 Maven 的 Hibernate 冒烟测试ORM Smoke Test实战指南 本文以 Dol数据库关系型数据库后端CLIyaml.js在CI/CD中的应用自动化配置文件转换终极指南yaml.js在CI/CD中的应用自动化配置文件转换终极指南 在现代软件开发中 yaml.js 作为一款独立的JavaScript YAML 1.2解析器和上一篇FreeMove不重装、不破坏快捷方式把C盘软件整目录搬走的免费神器下一篇NCM转MP3终极指南免费开源ncmdump拖一下就把网易云音乐取回来创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考