{"id":22511293,"url":"https://github.com/matmanjs/matman-vscode-extensions","last_synced_at":"2025-07-11T04:03:44.325Z","repository":{"id":84686734,"uuid":"286953962","full_name":"matmanjs/matman-vscode-extensions","owner":"matmanjs","description":null,"archived":false,"fork":false,"pushed_at":"2021-05-18T01:44:44.000Z","size":2009,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T00:44:24.145Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matmanjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-12T08:02:40.000Z","updated_at":"2021-05-18T01:38:43.000Z","dependencies_parsed_at":"2023-04-09T18:34:26.134Z","dependency_job_id":null,"html_url":"https://github.com/matmanjs/matman-vscode-extensions","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/matmanjs/matman-vscode-extensions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matmanjs%2Fmatman-vscode-extensions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matmanjs%2Fmatman-vscode-extensions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matmanjs%2Fmatman-vscode-extensions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matmanjs%2Fmatman-vscode-extensions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matmanjs","download_url":"https://codeload.github.com/matmanjs/matman-vscode-extensions/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matmanjs%2Fmatman-vscode-extensions/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264726769,"owners_count":23654494,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-07T02:10:51.983Z","updated_at":"2025-07-11T04:03:44.308Z","avatar_url":"https://github.com/matmanjs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# matman for web 端对端测试（E2E，End-to-End Testing）\n\n本插件为基于 [matman](https://matmanjs.github.io/matman/) 做 web 端对端测试（E2E，End-to-End Testing）的辅助插件，功能包含：\n\n- 代码片段补齐(code snippets)，支持 `mocha`、`chai`、`matman`、`mockstar` 等框架常见场景\n- 代码覆盖率染色查看，支持合并计算多个 `lcov.info` 文件的全量覆盖率和增量覆盖率\n- 支持直接执行 `.js` 和 `.ts` 文件\n\n\u003e [matman](https://matmanjs.github.io/matman/) 是一个可用于做 web 端对端测试（E2E，End-to-End Testing）的框架，十分适合 web 前端开发人员来编写端对端测试。\n\n\n\n## 1. 安装插件\n\n本插件已经发布到插件商店（[地址](https://marketplace.visualstudio.com/items?itemName=matmanjs.matman)），因此可以直接在 VSCode 的 `Extensions` 中搜索 `matman` ，点击安装(`Install`) 即可。\n\n注意，安装完成之后，需要重启 VSCode，可以在 `Extensions` 中查看状况，如有，则说明安装成功。\n\n![](assets/extensions-matman-installed.png)\n\n\n## 2. 使用插件\n\n### 2.1 代码覆盖率染色查看\n\n`command(ctrl)+shift+P` 打开 VSCode 的命令面板，输入 `matman`，可以看到如下命令：\n\n![](assets/panel-all-matman-cmd.png)\n\n\n- 仅支持 `lcov.info` 覆盖率文件\n- 不支持多个工作区\n- 代码覆盖率染色时，左侧文件树无法区别是否有覆盖，待优化\n\n\n#### 2.1.1 显示全量覆盖率\n\n选择 `matman: Show FullCoverage（显示全量覆盖率）`，接下来会需要选择哪些 `lcov.info` 文件。支持多选！支持多选！支持多选！如果选择多个 `lcov.info` 文件，会自动进行合并。\n\n![](assets/panel-full-select-lcov.png)\n\n运行之后在 VSCode 左下角状态栏有覆盖率数值：\n![](assets/panel-full-bar-result.png)\n\n当你打开文件时，也可以看到代码有染色，其中绿色代表已覆盖，红色代表未覆盖：\n\n![](assets/panel-local-coverage-color.png)\n\n也有可能本项目中不存在 `lcov.info` 文件，那么请先运行自动化测试生成该文件，此时 VSCode 右下角会进行错误提示。\n\n![](assets/panel-no-lcov.png)\n\n\n#### 2.1.2 隐藏全量覆盖率\n\n选择 `matman: Hide FullCoverage（隐藏全量覆盖率）` 即可以取消全量覆盖率时的代码染色。\n\n#### 2.1.3 显示增量覆盖率\n\n选择 `matman: Show IncrementCoverage（显示增量覆盖率）`，接下来会需要选择哪些 `lcov.info` 文件。支持多选！支持多选！支持多选！如果选择多个 `lcov.info` 文件，会自动进行合并。\n\n![](assets/panel-full-select-lcov.png)\n\n运行之后在 VSCode 左下角状态栏有覆盖率数值：\n![](assets/panel-full-bar-result.png)\n\n当你打开文件时，也可以看到代码有染色，其中绿色代表已覆盖，红色代表未覆盖。\n\n\n#### 2.1.4 隐藏增量覆盖率\n\n选择 `matman: Hide IncrementCoverage（隐藏增量覆盖率）` 即可以取消增量覆盖率时的代码染色。\n\n\n\n### 2.2 执行 js 或 ts 文件\n\n在 TS 或者 JS 文件中点击右键，可以看到：\n\n\u003cimg src=\"assets/run-file.png\" style=\"zoom:33%;\" /\u003e\n\n可以方便的执行当前文件。\n\n### 2.3 代码片段补齐(code snippets)\n\n支持 `mocha`、`chai`、`matman`、`mockstar` 等框架常见场景.\n\n#### 2.3.1 matman.code-snippets\n\n| 指令 |  描述 |\n| --- | --- |\n| `m-matman-case-v0` | matman case modules 模板 v0，单文件形式 |\n| `m-matman-case-v1` | matman case modules 模板 v1，使用 helpers 工厂模式创建 PageDriver |\n| `m-matman-case-v2` | matman case modules 模板 v2，使用 helpers 工厂模式创建 PageDriver，使用 env 定义常量 |\n| `m-matman-helper-init` | matman helper 模板 |\n| `m-matman-case-action` | matman case module 增加 addAction |\n| `m-matman-case-debug` | matman case module 增加 debug 代码 |\n| `m-matman-crawler-init` | matman crawler 爬虫脚本模板 |\n| `m-matman-config-init` | matman.config.js 模板 |\n\n#### 2.3.2 mocha.code-snippets\n\n| 指令 |  描述 |\n| --- | --- |\n| `m-mocha-describe` | mocha 新建 describe |\n| `m-mocha-it` | mocha 新建 it |\n| `m-mocha-e2e-tpl` | mocha e2e 新建测试文件 |\n| `m-mocha-e2e-describe` | mocha e2e 新建 describe |\n\n#### 2.3.3 chai.code-snippets\n\n| 指令 |  描述 |\n| --- | --- |\n| `m-chai-s-type` | 是否为 string 类型 |\n| `m-chai-s-equal` | string 是否相等 |\n| `m-chai-s-not-equal` | string 是否不相等 |\n| `m-chai-s-length` | string 的长度 |\n| `m-chai-n-type` | 是否为 number 类型 |\n| `m-chai-n-equal` | number 是否相等 |\n| `m-chai-n-not-equal` | number 是否不相等 |\n| `m-chai-n-above` | number 是否大于某个数 |\n| `m-chai-n-at-least` | number 是否大于或等于某个数 |\n| `m-chai-array-type` | 是否为 array 类型 |\n| `m-chai-array-eql` | array 是否相等 |\n| `m-chai-array-not-eql` | array 是否不相等 |\n| `m-chai-array-include` | array 是否包含某个元素 |\n| `m-chai-array-length` | array 的元素个数 |\n| `m-chai-o-type` | 是否为 object 类型 |\n| `m-chai-o-eql` | object 是否相等 |\n| `m-chai-o-not-eql` | object 是否不相等 |\n| `m-chai-o-have-property` | object 包含某个属性 |\n| `m-chai-o-have-and-equal` | object 包含某个属性且值等于指定值 |\n| `m-chai-is-undefined` | 是否为 undefined |\n| `m-chai-is-null` | 是否为 null |\n| `m-chai-is-true` | 是否为 true |\n| `m-chai-is-empty` | 是否为 empty（[]、''、{}都算 empty） |\n\n#### 2.3.4 dwt.code-snippets\n\n| 指令 |  描述 |\n| --- | --- |\n| `m-dwt-testbase` | DWT testBase 注解 |\n\n## 3. Known Issues\n\n欢迎大家提交 [issue](https://github.com/matmanjs/vscode-plugin/issues/new)。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatmanjs%2Fmatman-vscode-extensions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatmanjs%2Fmatman-vscode-extensions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatmanjs%2Fmatman-vscode-extensions/lists"}