UI自动化测试平台工程搭建

技术栈

前端

vite5 + React18 + KDesign + chrome插件开发

服务端

egg.js + mongodb + ejs模版

自动化测试

Cypress.js + mochawesome

阅读前准备

1、了解react技术栈开发

2、了解nodejs框架koa、egg.js

3、了解mongodb

4、了解chrome插件开发

5、了解Cypress.js自动化测试框架

工程搭建

需要创建两个项目，一个开发chrome插件，一个开发服务端，cypress.js直接集成到服务端项目里。

• 前端

使用Vite创建一个React项目

npm create vite@latest

选择 react 和 TS

安装crxjs/vite-plugin插件

npm i @crxjs/vite-plugin@beta -D

创建 Manifest.json 文件

{
  "manifest_version": 3,
  "name": "CRXJS React Vite Example",
  "version": "1.0.0",
  "action": {
    "default_popup": "index.html"
  }
}

修改 Vite.config.ts 配置文件

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    crx({ manifest }),
  ],
})

运行 pnpm run dev 命令

可以看到多了个 dist 文件夹，这个就是构建好的插件安装包

.
├── dist
│   ├── assets
│   │   └── loading-page-1924caaa.js
│   ├── index.html
│   ├── manifest.json
│   ├── service-worker-loader.js
│   └── vite.svg

安装插件

打开浏览器输入：chrome://extensions，点击【加载已解压的扩展程序】选择 dist 文件夹进行安装

以上是使用crxjs/vite快速搭建一个chrome插件开发的项目工程的过程

• 服务端

使用脚手架快速创建egg.js项目

mkdir egg-example && cd egg-example
npm init egg --type=simple
npm i

Egg.js 目录结构如下：

egg-example
├── app
|   ├── router.js
│   ├── controller
│   ├── service (可选)
│   ├── middleware (可选)
│   ├── schedule (可选)
│   ├── public (可选)
├── config
|   ├── plugin.js
|   ├── config.default.js
│   ├── config.prod.js
└── test
    ├── middleware
    |   └── response_time.test.js
    └── controller
        └── home.test.js

• cypress.js

服务端项目录下通过npm安装cypress.js

cd egg-example
npm i cypress --save-dev

在package.json添加启动命令

 "scripts": {
    "cypress": "cypress run open"
  }

运行npm run cypress启动cypress程序，会弹出窗口进行初始化操作

选择E2E Testing后会自动在当前项目目录下创建cypress目录，里面已初始化好示例代码，目录结构如下

工程目录

上面创建工程后我们先初始化下项目目录文件，目录结构如下（具体目录文件功能后面会详细介绍）

• 前端chrome插件项目目录

• 服务端项目目录

Chrome插件实现

这部分开发分以下几个部分

1、插件名称图标等公共配置

2、插件权限配置

3、创建调试面板入口文件，并添加页签

4、devtool页面管理测试用例功能开发

5、插件与页面交互

• 修改插件名称及图标

// manifest.json

"name": "精斗云开发测试小工具",
  "description": "精斗云开发测试小工具",
  "version": "1.0.1",
  "action": {
    "default_title": "精斗云开发测试小工具",
    "default_icon": "src/assets/logo.png",
    "default_popup": "index.html"
  },