使用企业微信在线文档对测试用例进行管理，存在以下问题，比如新建版本，每次都要设置下执行测试用例那一栏，要提供通过、失败、阻塞等选项，操作异常繁琐，比如版本管理问题，多个版本之后，想要追溯老版本测试了哪些功能，很难进行筛选，比如测试用例越来越多，文档打开慢的问题等等。

2. 调研

为了解决以上问题，调研了市面上的一些平台，发现有些平台功能过多，有些平台需要付费，现阶段，显然不太合适，然后发现了AgileTC，它是一套敏捷的测试用例管理平台，以脑图方式编辑可快速上手，有以下几个优势：

1. 可新建多个用例集，用例可以设置优先级；
2. 可基于用例集，创建执行测试任务，并且可跟进优先级筛选进行测试；
3. 版本管理问题，多个版本管理不会有问题，创建执行测试任务就是一个版本，比如V1.0研发自测，就是一条执行测试任务；
4. 可搜索快速定位到要查看的功能模块，并且其他功能模块收起；
5. 可以设置前置条件、执行步骤、预期结果标签；
6. 左侧有菜单，可快速查看其他项目；
7. 离开当前页，可以自动保存；
8. 学习成本很低，而且是开源免费的；
9. 可以导出执行测试结果为xmind文件，用于项目提测时，给到测试组。

基于以上原因，计划使用AgileTC系统，在线管理各项目的测试用例。

3. 基本使用

3.1 准备环境

1. mac/linux/windows
1. java 1.8
1. mysql 服务端

3.2 下载

git clone https://github.com/didi/AgileTC.git

3.3 create database case_manager

使用命令 create database case_manager在 MySQL Workbench 中创建依赖数据库。

3.4 运行 case-server.sql 脚本内容

1. 拷贝 ./AgileTC/case-server/sql/case-server.sql 文件内容，在 MySQL Workbench 中运行。
2. 双击 case_manager ，选中当前依赖数据库。
3. 点击闪电图标执行。

3.5 修改 application-dev.properties 文件

修改 ./AgileTC/case-server/src/main/resources/application-dev.properties 文件，如下所示：

spring.datasource.url=jdbc:mysql://localhost:3306/case_manager?serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=12345678

3.6 运行命令 mvn spring-boot:run

1. 在case-server目录下执行命令mvn spring-boot:run。
2. 使用浏览器打开 http://localhost:8094/case/caseList/1。

Sentry是一个开源的监控系统，可以收集项目中的异常信息，便于开发人员第一时间发现问题，定位问题，解决问题。当前文档基于Sentry 23.11.2进行说明。

2. 系统搭建

虽然Sentry官方提供了在线系统，但是因为需要翻墙，加上如果是公司项目，考虑到安全问题，还是倾向于私有化部署，在Github上有一个开源项目用于部署Sentry，可以使用该项目进行部署：

git clone https://github.com/getsentry/onpremise.git

因为这个项目涉及很多后端的技术知识，Sentry搭建最好是后端人员来做，然后部署到服务器上面去。

3. 创建项目

Sentry搭建成功，部署到服务器，比如当前Sentry在线系统为https://123.11.22.133，使用账号test001登录，一开始默认是英文显示，如果想要切换为中文，只需要在左上角的User settings里的Language选项选择Simplified Chinese即可，然后创建项目，其他平台同理，如下图所示：

4. Vue3项目引入Sentry

项目创建完成后，会跳转至 Vue SDK 配置的说明文档，默认勾选三个监控模块，并且提供Vue3和Vue2版本的引入方式，如下图所示：

三个监控模块的简单功能说明，如下所示：

• Error Monitoring： 自动报告项目错误和异常。
• Performance Monitoring： 通过性能监控，Sentry跟踪你的软件性能，测量吞吐量和延迟等指标，并显示错误对多个系统的影响。Sentry捕获由事务和span组成的分布式跟踪，这些跟踪测量单个服务以及这些服务中的单个操作。在分布式跟踪中了解更多关于我们的模型的信息。
• Session Replay： 会话重播通过像视频一样重现用户浏览器在错误发生前、发生中、发生后的情况，帮助你更快地找到错误或延迟问题的根本原因。受浏览器开发者工具的启发，你可以在一个组合的UI中回放应用程序的DOM状态，并查看关键的用户交互，如鼠标点击、滚动、网络请求和控制台条目。

首先，我们需要依照文档进行配置，安装依赖

# Using npm
npm install --save @sentry/vue

# Using yarn
yarn add @sentry/vue

然后，在main.ts里引入Sentry.init()，如下所示：

import { createApp } from "vue";
import { createRouter } from "vue-router";
import * as Sentry from "@sentry/vue";

const app = createApp({
  // ...
});
const router = createRouter({
  // ...
});

Sentry.init({
  app,
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [
    Sentry.browserTracingIntegration({ router }),
    Sentry.replayIntegration(),
  ],

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for tracing.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,

  // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],

  // Capture Replay for 10% of all sessions,
  // plus for 100% of sessions with an error
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

app.use(router);
app.mount("#app");

此时，只要项目在本地运行或部署至线上，打开项目，然后打开浏览器控制台，查看Network列表，会发现很多类似这样的请求，并没有报错，这就意味着当前已经正常上报到Sentry系统了，如下所示：

/api/6/envelope/?sentry_key=485eee5b72d4758f53483e6ee56c43ed&sentry_version=7&sentry_client=sentry.javascript.vue%2F7.85.0

5. 异常报错示例

为了真实验证Sentry的功能，现以一个真实场景来演示，在项目中添加一个按钮，然后设置点击事件之后，触发打印console，sentryTest并未定义，所以会报错，代码如下所示：

<template>
    <el-button @click="sentryClicked">Sentry测试</el-button>
</template>
<script setup lang="ts">
import { defineComponent, ref } from 'vue'

function sentryClicked() {
    console.log('sentryClicked: ', sentryTest);
}

</script>

在项目页面，我们可以看到，在浏览器控制台，确实有报错信息生成，如下图所示：

然后，我们到Sentry在线系统查看，确实有收到报错信息，如下图所示：

里面指明了报错原因是 sentryTest is not defined ，然后还提交了用户的IP、浏览器版本以及版本号、平台系统等等信息，便于分析异常错误。还可以使用Session Replay重现用户浏览器在错误发生前、发生中、发生后的情况，如下所示：

6. 上传SourceMap文件

通常Sentry在线系统上面的信息，也是可以排查解决BUG的，比如sentryTest is not defined，我们只需要在项目中搜索sentryTest就可以定位到代码报错的位置，但是如果是一些比较通用的，或者信息比较含糊的，是没办法精准定位代码位置的，这个时候，就可能有想法了，怎么让才能在Sentry在线系统看到，到底是执行到哪一步的时候，报错了呢？

这就是本节所需要实现功能，这就需要 SourceMap 文件，什么是 SourceMap 文件呢？

因为使用Vite打包之后，所有代码都压缩在一起，很难从中定位到异常代码的位置，Sentry通过.map文件中的映射关系将编译后的代码行映射回源代码行，从而提供准确的错误定位信息。可以帮助开发人员更轻松地理解和修复生产环境中的错误。

首先，需要在Vue3项目的 vite.config.ts 里进行设置，如下所示：

export default defineConfig({
  build: {
    sourcemap: true, // Source map generation must be turned on
  },
})

然后运行 npm run build 命令，在生成的 dist/assets/里就会发现后缀为.map的文件，如下图所示：

然后我们需要把.map文件上传到 Sentry 在线系统。

6.1 通过sentry-wizard自动上传至Sentry【推荐】

在官方提供的 Configure Vue SDK页面中已经推荐使用sentry-wizard来自动上传SourceMap至Sentry，具体实现步骤如下所示：

1. 安装依赖

   npx @sentry/wizard@latest -i sourcemaps
   

2. 会在终端生成很多提示，提示信息都很清晰，依次选择即可，分别有：

   1. Do you want to continue anyway? (Yes)
   2. Are you using Sentry SaaS or self-hosted Sentry? (Self-hosted/on-premise/single-tenant)
   3. Please enter the URL of your self-hosted Sentry instance. (https://123.11.22.133)
   4. Do you already have a Sentry account? (Yes)
   5. Select your Sentry project. (test)
   6. Which framework, bundler or build tool are you using? （Vite）
   7. The @sentry/vite-plugin package is already installed. (Yes)
   8. Updated @sentry/vite-plugin with NPM.
   9. Added the Sentry Vite plugin to vite.config.ts and enabled.
   10. Added auth token to .env.sentry-build-plugin
   11. Added .env.sentry-build-plugin to .gitignore.
   12. Are you using a CI/CD tool to build and deploy your application? (No)

3. 然后我们会看到vite.config.ts里@sentry/vite-plugin插件的配置，如下所示：

   import { sentryVitePlugin } from "@sentry/vite-plugin";
   export default defineConfig({
     plugins: [
       sentryVitePlugin({
         org: "sentry",
         project: "project-template-vue",
         url: "https://123.11.22.133"
     })],
   

   此时需注意，因在设置self-hosted Sentry时，输入的是https://123.11.22.133，但是sentry-wizard自动在vite.config.ts中生成填写的url值为https://123.11.22.133/，需要去掉/，避免运行npm run build时报错：

   error: Two different url values supplied: `https://123.11.22.133` (from token), `https://123.11.22.133/`.
   

4. 在源码目录下，还自动生成了文件.env.sentry-build-plugin，并且.gitignore.里进行忽略。

   

   

5. 运行npm run build打包上传，如下所示，当上传SourceMap完成之后，会有相应详细的信息进行说明。

   

6. 通过在Sentry上面查看项目的SourceMap页面，查看Releases的值为a8b55844dbd5417cefcc00231df0b7df59fec973，来确定本次上传的版本，如下图所示，已经上次成功。

   

7. 验证 sentryTest is not defined异常报错示例，我们可以看到在异常详情页，会直接定位到源码报错的位置，如下所示：

   

6.2 通过Sentry Cli上传至Sentry

登录Sentry在线系统，以mac环境为例，在终端输入如下：

# mac
sentry-cli --url http://123.11.22.133:211/login

# windows, 在 node_modules 里找到 sentry-cli.exe，右键Copy Path.
~\node_modules\@sentry\cli-win32-x64\bin\sentry-cli.exe --url https://123.11.22.133:211/ login

然后会提示输入token，如下所示：

dstweihao@weihao-mac-mini vue % sentry-cli --url http://123.11.22.133:211/ login
This helps you signing in your sentry-cli with an authentication token.
If you do not yet have a token ready we can bring up a browser for you
to create a token now.

Sentry server: 123.11.22.133
Open browser now? [y/n] n
Enter your token: 

token是在Sentry在线系统生成的，如下图所示：

这时，只要复制token到终端，就可以完成登录流程了，如下所示，就是成功登录了Sentry在线系统：

Enter your token: 104e37d1d6b8ac962205719ef8380981ecbaaf587c166566c7df20372d0d72de
Valid token for user test001

Stored token in /Users/weihao/.sentryclirc
dstweihao@weihao-mac-mini vue % 

1. 上传SourceMap到Sentry在线系统，登录成功之后，就需要将SourceMap文件上传到Sentry在线系统，首先，需要在项目里新建一个.sentryclirc文件，里面的内容，如下所示：

   [defaults]
   url=http://123.11.22.133:211/
   org=sentry
   project=test
   [auth]
   token=104e37d1d6b8ac962205719ef8380981ecbaaf587c166566c7df20372d0d72de
   

   然后使用以下命令：

   sentry-cli releases -o sentry -p test files test@1.0.0 upload-sourcemaps './dist/assets/' --url-prefix '~/test/js'
   

   这里需要对该命令一些参数说明一下：

   sentry：组织名

   test：项目名

   1.0.0：版本号，需和main.ts里的release: 'test@1.0.0'一致。

   ./dist/assets/：项目打包生成的dist里.map文件所在目录

   ~/test/js：如果部署在服务器上面，不是部署在主目录，而是在test文件夹下面，那就需要加上

   在终端显示如下，就表示已经上传成功：

   > Found 2 release files
   > Analyzing 2 sources
   > Analyzing completed in 0.47s
   > Rewriting sources
   > Rewriting completed in 0.534s
   > Adding source map references
   > Bundling files for upload... ~/test/js/index-o3HPk7Oz.js.map
   > Bundling completed in 0.855s
   > Optimizing completed in 0.017s
   > Uploading completed in 12.873s
   > Uploaded release files to Sentry
   > Processing completed in 0.129s
   > File upload complete (processing pending on server)
   
   Source Map Upload Report
     Minified Scripts
       ~/test/js/index-o3HPk7Oz.js (sourcemap at index-o3HPk7Oz.js.map)
     Source Maps
       ~/test/js/index-o3HPk7Oz.js.map
   

   此时，我们可以在Sentry在线系统上面查看到上传的sourcemap文件，如下图所示：

   

7. 其他

1. 中英文切换：设置 — 账户 — 详细信息 — 账户详情 — 语言 — Simplified Chinese
2. 时区设置：设置 — 账户 — 详细信息 — 账户详情 — 时区 — Shanghai

当使用SonarQube对Vue项目进行代码质量审查时，可能会遭遇因Vue特有的deep选择器（旨在实现样式深度穿透）而触发的错误或警告。由于SonarQube默认并不识别这一Vue特有的语法，这些错误报告可能会成为审查过程中的干扰项。为了优化审查体验，并专注于更实际的代码质量问题，我们可以通过自定义SonarQube的质量配置文件来忽略这些针对deep选择器的错误。

以下是具体的操作步骤，基于SonarQube的通用界面和《How to include a pseudo class selector in Sonar rules (deep - Vue)》社区讨论中的指导。

2. 创建自定义CSS质量配置文件

1. 登录到SonarQube的Web界面。
2. 导航到Quality Profiles页面。
3. 点击页面上的Create按钮，选择Copy an existing quality profile作为创建方式。
4. 在弹出的对话框中，设置以下选项：
   • Language：选择CSS。
   • Profile to copy：选择Sonar Way作为基础配置文件，因为它包含了SonarQube推荐的CSS最佳实践。
   • Name：输入自定义配置文件的名称，例如CustomVueCSS。
5. 点击Create完成配置文件的创建。

3. 设置自定义配置文件为默认

1. 回到Quality Profiles页面，在CSS语言下，你应该能看到刚才创建的CustomVueCSS配置文件。
2. 在CustomVueCSS配置文件旁的Actions列中，点击Set as Default按钮，将其设置为默认的质量配置文件。

4. 修改配置文件以忽略deep选择器

1. 在Quality Profiles页面，找到并点击刚设置为默认的CustomVueCSS配置文件名称，进入配置文件的详细设置页面。

2. 在该页面中，找到并定位到Pseudo-class selectors should be valid这条规则。

3. 点击这条规则，定位到Quality Profiles，点击CustomVueCSS配置文件名称右侧的Change按钮，进入规则的详细配置界面。

4. 在ignorePseudoClasses字段中，添加deep作为要忽略的伪类选择器。这样，SonarQube在检查CSS代码时将不再报告deep选择器为无效或错误。

5. 点击Save按钮保存更改。

Sentry是一个开源的监控系统，可以收集项目中的异常信息，便于开发人员第一时间发现问题，定位问题，解决问题。

二、系统搭建

虽然Sentry官方提供了在线系统，但是因为需要翻墙，加上如果是公司项目，考虑到安全问题，还是倾向于私有化部署，在Github上有一个开源项目用于部署Sentry，可以使用该项目进行部署：

git clone https://github.com/getsentry/onpremise.git

因为这个项目涉及很多后端的技术知识，Sentry搭建最好是后端人员来做，然后部署到服务器上面去。

三、创建项目

Sentry搭建成功，部署到服务器，比如当前Sentry在线系统为https://123.11.22.133:211，使用账号test001登录，一开始默认是英文显示，如果想要切换为中文，只需要在左上角的User settings里的Language选项选择Simplified Chinese即可，然后创建项目，如下图所示：

四、Vue项目引入Sentry

项目创建完成后，会跳转至Vue配置的说明文档，主要是Vue项目如何引入Sentry的一些内容，内容如下所示：

1. 安装依赖

   # Using yarn
   yarn add @sentry/vue @sentry/tracing
   
   # Using npm
   npm install --save @sentry/vue @sentry/tracing
   

2. 在main.js里引入

   import Vue from "vue";
   import * as Sentry from "@sentry/vue";
   import { Integrations } from "@sentry/tracing";
   
   Sentry.init({
     Vue,
     dsn: "http://cd7f733c2e1e4641bdeb11ba0811d9aa@123.11.22.133:211/12",
     integrations: [new Integrations.BrowserTracing()],
   
     // Set tracesSampleRate to 1.0 to capture 100%
     // of transactions for performance monitoring.
     // We recommend adjusting this value in production
     tracesSampleRate: 1.0,
     // 上报console异常信息
     logErrors: true
   });
   

此时，只要项目正常部署在线上，打开项目，然后打开浏览器控制台，查看Network列表，会发现很多类似这样的请求，并没有报错，这就意味着当前已经正常上报到Sentry系统了，如下所示：

?sentry_key=cd7f733c2e1e4641bdeb11ba0811d9aa&sentry_version=7

五、异常报错示例

为了真实验证Sentry的功能，现以一个真实场景来演示，在项目中添加一个按钮，然后设置点击事件之后，触发打印console，sentryTest并未定义，所以会报错，代码如下所示：

<template>
 <div>
  <el-button @click="sentryClicked">Sentry测试</el-button>
 </div>
</template>
<script>
export default {
  methods:{
    sentryClicked(){
      console.log('sentryClicked: ', sentryTest);
    }
  }
}
</script>

在项目页面，我们可以看到，在浏览器控制台，确实有报错信息生成，如下图所示：

然后，我们到Sentry在线系统查看，确实有收到报错信息，如下图所示：

里面指明了报错原因是sentryTest is not defined，然后还提交了用户的IP、浏览器版本以及版本号、平台系统等等信息，便于分析异常错误。

六、上传SourceMap文件

通常Sentry在线系统上面的信息，也是可以排查解决BUG的，比如sentryTest is not defined，我们只需要在项目中搜索sentryTest就可以定位到代码报错的位置，但是如果是一些比较通用的，或者信息比较含糊的，是没办法精准定位代码位置的，这个时候，就可能有想法了，怎么让才能在Sentry在线系统看到，到底是执行到哪一步的时候，报错了呢？

这就是本节所需要实现功能，这就需要SourceMap文件，什么是SourceMap文件呢？

因为使用webpack打包之后，所有代码都压缩在一起，很难从中定位到异常代码的位置，而SourceMap就是源码，有了它，就可以定位到具体位置，所以需要提供SourceMap文件到Sentry在线系统。

首先，需要将vue项目下config/index.js里的productionSourceMap设置为true，然后运行npm run build命令，在生成的dist/static/js里就会发现很多后缀为.map的文件，如下图所示：

然后我们需要把.map文件上传到Sentry在线系统，具体步骤如下：

1. 登录Sentry在线系统，在终端输入如下：

   sentry-cli --url http://123.11.22.133:211/ login
   

   然后会提示输入token，如下所示：

   dstweihao@weihao-mac-mini vue % sentry-cli --url http://123.11.22.133:211/ login
   This helps you signing in your sentry-cli with an authentication token.
   If you do not yet have a token ready we can bring up a browser for you
   to create a token now.
   
   Sentry server: 123.11.22.133
   Open browser now? [y/n] n
   Enter your token: 
   

   token是在Sentry在线系统生成的，如下图所示：

   

   这时，只要复制token到终端，就可以完成登录流程了，如下所示，就是成功登录了Sentry在线系统：

   Enter your token: 4e6488262fb849ef93c6217ac8bc8e9a2d635572eb584fa3b69b859e0edc5104
   Valid token for user test001
   
   Stored token in /Users/weihao/.sentryclirc
   dstweihao@weihao-mac-mini vue % 
   

2. 上传SourceMap到Sentry在线系统

   登录成功之后，就需要将SourceMap文件上传到Sentry在线系统，首先，需要在项目里新建一个.sentryclirc文件，里面的内容，如下所示：

   [defaults]
   url=http://123.11.22.133:211/
   org=dst
   project=test
   [auth]
   token=4e6488262fb849ef93c6217ac8bc8e9a2d635572eb584fa3b69b859e0edc5104
   

   然后使用以下命令：

   sentry-cli releases -o dst -p test files test@1.0.0 upload-sourcemaps './dist/static/js/' --url-prefix '~/test/js' 
   

   这里需要对该命令一些参数说明一下：

   dst：组织名

   test：项目名

   1.0.0：版本号，需和main.js里的release: 'test@1.0.0'一致

   ./dist/static/js/：项目打包生成的dist里.map文件所在目录

   ~/test/js：如果部署在服务器上面，不是部署在主目录，而是在test文件夹下面，那就需要加上

   在终端显示如下，就表示已经上传成功：

   dstweihao@weihao-mac-mini vue % sentry-cli releases -o dst -p test files 1.0.0 upload-sourcemaps './dist/static/js/' --url-prefix '~/test/js' 
   > Found 20 release files
   > Analyzing 20 sources
   > Analyzing completed in 0.238s
   > Rewriting sources
   > Rewriting completed in 0.252s
   > Adding source map references
   > Bundling files for upload... ~/test/js/vendor.331b4cf7bdabb46a7655.js.map
   > Bundling completed in 0.373s
   > Optimizing completed in 0.01s
   > Uploading completed in 0.337s
   > Uploaded release files to Sentry
   > Processing completed in 0.114s
   > File upload complete (processing pending on server)
   
   Source Map Upload Report
     Minified Scripts
       ~/test/js/0.5578cfbb7e2e6688ddf5.js (sourcemap at 0.5578cfbb7e2e6688ddf5.js.map)
       ~/test/js/1.08ce936a2efe46fada3a.js (sourcemap at 1.08ce936a2efe46fada3a.js.map)
       ~/test/js/2.21a7baf07c2e2f7e0e2e.js (sourcemap at 2.21a7baf07c2e2f7e0e2e.js.map)
       ~/test/js/3.31b60f7af161be6ebdd9.js (sourcemap at 3.31b60f7af161be6ebdd9.js.map)
       ~/test/js/4.fb6e7da7da26fad2df3a.js (sourcemap at 4.fb6e7da7da26fad2df3a.js.map)
       ~/test/js/5.ee4c344db81fc2458f9c.js (sourcemap at 5.ee4c344db81fc2458f9c.js.map)
       ~/test/js/6.9079b1090416a666a327.js (sourcemap at 6.9079b1090416a666a327.js.map)
       ~/test/js/app.ad01bb777553f9efe703.js (sourcemap at app.ad01bb777553f9efe703.js.map)
       ~/test/js/manifest.380384094e7763635655.js (sourcemap at manifest.380384094e7763635655.js.map)
       ~/test/js/vendor.331b4cf7bdabb46a7655.js (sourcemap at vendor.331b4cf7bdabb46a7655.js.map)
     Source Maps
       ~/test/js/0.5578cfbb7e2e6688ddf5.js.map
       ~/test/js/1.08ce936a2efe46fada3a.js.map
       ~/test/js/2.21a7baf07c2e2f7e0e2e.js.map
       ~/test/js/3.31b60f7af161be6ebdd9.js.map
       ~/test/js/4.fb6e7da7da26fad2df3a.js.map
       ~/test/js/5.ee4c344db81fc2458f9c.js.map
       ~/test/js/6.9079b1090416a666a327.js.map
       ~/test/js/app.ad01bb777553f9efe703.js.map
       ~/test/js/manifest.380384094e7763635655.js.map
       ~/test/js/vendor.331b4cf7bdabb46a7655.js.map
   zlgweihao@zlgweihao-mac-mini vue % 
   

   此时，我们可以在Sentry在线系统上面查看到上传的sourcemap文件，如下图所示：