DevOps与工具

1. 背景 使用企业微信在线文档对测试用例进行管理，存在以下问题，比如新建版本，每次都要设置下执行测试用例那一栏，要提供通过、失败、阻塞等选项，操作异常繁琐，比如版本管理问题，多个版本之后，想要追溯老版本测试了哪些功能，很难进行筛选，比如测试用例越来越多，文档打开慢的问题等等。 2. 调研 为了解决以上问题，调研了市面上的一些平台，发现有些平台功能过多，有些平台需要付费，现阶段，显然不太合适，然后发现了AgileTC，它是一套敏捷的测试用例管理平台，以脑图方式编辑可快速上手，有以下几个优势： 可新建多个用例集，用例可以设置优先级； 可基于用例集，创建执行测试任务，并且可跟进优先级筛选进行测试； 版本管理问题，多个版本管理不会有问题，创建执行测试任务就是一个版本，比如V1.0研发自测，就是一条执行测试任务； 可搜索快速定位到要查看的功能模块，并且其他功能模块收起； 可以设置前置条件、执行步骤、预期结果标签； 左侧有菜单，可快速查看其他项目； 离开当前页，可以自动保存； 学习成本很低，而且是开源免费的； 可以导出执行测试结果为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 脚本内容 拷贝 ./AgileTC/case-server/sql/case-server.sql 文件内容，在 MySQL Workbench 中运行。 双击 case_manager ，选中当前依赖数据库。 点击闪电图标执行。 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 在case-server目录下执行命令mvn spring-boot:run。 使用浏览器打开 http://localhost:8094/case/caseList/1。 ...

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系统了，如下所示： ...

1. 前言 当使用SonarQube对Vue项目进行代码质量审查时，可能会遭遇因Vue特有的deep选择器（旨在实现样式深度穿透）而触发的错误或警告。由于SonarQube默认并不识别这一Vue特有的语法，这些错误报告可能会成为审查过程中的干扰项。为了优化审查体验，并专注于更实际的代码质量问题，我们可以通过自定义SonarQube的质量配置文件来忽略这些针对deep选择器的错误。 以下是具体的操作步骤，基于SonarQube的通用界面和《How to include a pseudo class selector in Sonar rules (deep - Vue)》社区讨论中的指导。 2. 创建自定义CSS质量配置文件 登录到SonarQube的Web界面。 导航到Quality Profiles页面。 点击页面上的Create按钮，选择Copy an existing quality profile作为创建方式。 在弹出的对话框中，设置以下选项： Language：选择CSS。 Profile to copy：选择Sonar Way作为基础配置文件，因为它包含了SonarQube推荐的CSS最佳实践。 Name：输入自定义配置文件的名称，例如CustomVueCSS。 点击Create完成配置文件的创建。 3. 设置自定义配置文件为默认 回到Quality Profiles页面，在CSS语言下，你应该能看到刚才创建的CustomVueCSS配置文件。 在CustomVueCSS配置文件旁的Actions列中，点击Set as Default按钮，将其设置为默认的质量配置文件。 4. 修改配置文件以忽略deep选择器 在Quality Profiles页面，找到并点击刚设置为默认的CustomVueCSS配置文件名称，进入配置文件的详细设置页面。 在该页面中，找到并定位到Pseudo-class selectors should be valid这条规则。 点击这条规则，定位到Quality Profiles，点击CustomVueCSS配置文件名称右侧的Change按钮，进入规则的详细配置界面。 在ignorePseudoClasses字段中，添加deep作为要忽略的伪类选择器。这样，SonarQube在检查CSS代码时将不再报告deep选择器为无效或错误。 点击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的一些内容，内容如下所示： 安装依赖 # Using yarn yarn add @sentry/vue @sentry/tracing # Using npm npm install --save @sentry/vue @sentry/tracing 在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> 在项目页面，我们可以看到，在浏览器控制台，确实有报错信息生成，如下图所示： ...