【项目测试报告】博客系统 + 在线聊天室

﹏ヽ暗。殇╰゛Y 2023-10-15 11:01 59阅读 0赞

### 文章目录 ###

*  一、项目介绍
 *   *  1.1 核心技术
     *  1.2 核心功能
     *  1.3 技术亮点
     *  1.4 前端页面设计
     *   *  登录页面
         *  注册页面
         *  博客广场页面
         *  搜索结果页面
         *  个人博客页面
         *  个人中心页面
         *  我的关注/粉丝页面
         *  聊天室页面
         *  写博客页面
         *  我的草稿
         *  修改博客页面
         *  博客详情页
         *  他人博客主页
 *  二、功能测试
 *   *  2.1 登录测试用例
     *  2.2 注册测试用例
     *  2.3 博客广场测试用例
     *  2.4 新增博客测试用例
     *  2.5 个人博客页面测试用例
     *  2.6 其他用户博客主页测试用例
     *  2.7 草稿列表页面测试用例
     *  2.8 搜索功能测试用例
     *  2.9 我的关注/粉丝页面测试用例
     *  2.10 聊天室页面测试用例
     *  2.11 个人中心页面测试用例
     *  2.12 博客详情页面测试用例
     *  2.13 评论模块测试用例
 *  三、自动化测试
 *   *  3.1 单例驱动工具类
     *  3.2 注册页面自动化测试
     *  3.3 登录页面自动化测试
     *  3.4 博客管理自动化测试
     *  3.5 搜索功能自动化测试
     *  3.6 我的关注/粉丝页面自动化测试
     *  3.7 聊天室自动化测试
     *  3.8 博客详情页 + 评论功能自动化测试
     *  3.9 Junit 测试套件
     *  3.10 自动化测试总结
 *  四、性能测试
 *   *  4.1 LoadRunner 工具说明
     *  4.2 录制登录测试脚本
     *  4.3 在测试脚本中增加事务、集合点、参数化
     *  4.4 创建性能测试场景
     *  4.5 生成并分析测试报告

--------------------

# 一、项目介绍 #

本项目是一个小型的 Web 项目，包括了博客系统和在线聊天室两个主要模块。其中博客系统主要用于文章的发布、管理和浏览博客文章等；而在线聊天室则提供实时的双向通信功能，使得互相关注的作者之间能够实时的进行交流。

## 1.1 核心技术 ##

> Spring Boot、Spring MVC、MyBatis、Java 8、MySQL、Lombok、WebSocket、Redis、Git、HTML、CSS、Javascript、JQuery 等

## 1.2 核心功能 ##

**博客系统模块：**

> 1.  用户注册、登录、注销。
> 2.  已登录用户可以新增、保存草稿、定时发布、修改、删除自己的博客、修改自己的个人资料，也可以查看其他作者发布的博客、根据标题搜索博客、其他作者的博客主页、在具体的博客下面查看、发表评论以及删除自己的评论、关注其他作者、查看自己关注的作者和粉丝、与互相关注的作者发起在线聊天。
> 3.  未登录用户可以注册、登录、查看所有作者发布的博客、查看具体博客下面的评论。

**在线聊天模块（面向已登录）：**

> 1.  在聊天室中查看已经建立会话（互相关注）的会话列表。
> 2.  查看与具体用户之间的历史消息。
> 3.  与在线的用户进行实时交流。

## 1.3 技术亮点 ##

> 1.  对用户的密码实现了自定义的加盐加密算法，一定程度上保证了用户信息的安全性。
> 2.  使用 Hutool 工具，实现了登录时的图形验证码验证，增加了系统的安全性。
> 3.  登录后使用 Redis 实现对 HttpSession 的分布式储存，一定程度上提升了程序的性能。
> 4.  具体博客下查看、发表评论以及对自己评论的删除。
> 5.  实现了文章保存草稿、定时发布（线程池优化）等。
> 6.  实现了用户互相关注功能，查看自己的关注列表、粉丝列表。
> 7.  用户个人中心：使用 MultipartFile 实现头像的上传、设置昵称、 Gitee 地址等。
> 8.  使用统一异常的处理。
> 9.  使用 ResponseBodyAdvice 实现统一数据格式返回。
> 10. 使用 HandlerInterceptor 实现统一登录的拦截器。
> 11. 登录输入密码错误次数超过三次，冻结该用户一段时间（线程池优化）。

## 1.4 前端页面设计 ##

**整个系统的前端页面分为页面：**

>  *  登录页面（任意用户）
>  *  注册页面（任意用户）
>  *  博客广场页面（任意用户）
>  *  搜索结果页面（任意用户）
>  *  个人博客页面（当前登录用户）
>  *  个人中心页面（当前登录用户）
>  *  我的关注/粉丝页面（当前登录用户）
>  *  聊天室页面（当前登录用户）
>  *  写博客页面（当前登录用户）
>  *  我的草稿页面（当前登录用户）
>  *  修改博客页面（当前登录用户）
>  *  博客详情页面（任意用户）
>  *  他人博客主页页面（任意用户）

### 登录页面 ###

![dfadba691ad24a229d3c02c77a3700e9.png][]

*  该页面用于用户登录，登录需要输入用户名、密码、验证码。
 *  当其中任意一个没有输入的时候都会弹窗提醒输入；
 *  如果登录失败，则会提示相应的失败原因；
 *  如果密码错误次数超过三次，就会将该用户冻结一段时间；
 *  登录时会根据数据库中的用户信息进行对比，并且输入的密码会被加密解密算法中的解密算法解密，然后再进行对比；
 *  如果正确则登录成功，并且会将 Session 持久化存储到 Redis 中；
 *  登录成功后，会跳转至个人博客页面。

### 注册页面 ###

![ad3c6e38e6b544a58fbc48cd45bfc394.png][]

*  该页面用于注册，包含用户名、密码和确认密码；
 *  注册的时候要求用户名不少于四位，密码不少于六位，并且均为数字或者字母，如果不符合要求则会弹窗提示；
 *  注册的时候如果用户名已经存在于数据库中，则提示“注册失败！该用户已存在”。
 *  如果密码和确认密码不同，则会弹窗提醒；
 *  注册提交的密码会进行加盐加密操作；
 *  注册成功后会调整至登录页面。

### 博客广场页面 ###

**未登录：**  
![56f406be3fca44efb8cb0114417ced34.png][]

*  未登录时可以查看所有用户发布的博客；
 *  所有的博客列表分页显示，分为首页、上一页、下一页和末页，中间显示当前页码；
 *  当进入该页面的时候默认显示首页；
 *  如果已经在首页了，点击首页和上一页则会弹窗提示“当前已经在首页了！”;
 *  如果已经在末页了，点击下一页和末页则会弹窗提示“当前已经是末页了！”；
 *  每篇博客会显示其标题、发布时间、摘要；
 *  可以点击“查看全文”查看具体博客的内容；
 *  可根据文章标题进行模糊搜索；
 *  可根据上方的导航栏选择登录和注册。

**登录后：**  
![6b7cfbff6cb64c9d913894ff2d8b7b75.png][]

*  登录后除了未登录时的功能之外，导航栏增加了已登录才能使用的功能；
 *  如个人博客、个人中心、我的关注/粉丝、聊天室、我的草稿、写博客、注销；
 *  点击其中的任意一个则会调整至相应的页面。

### 搜索结果页面 ###

搜索结果页面同样也会因为登录和未登录显示不同的导航栏状态，除此之外显示的内容一样，以登录后为例：  
**搜索到结果：**  
![9ed972f93ab24564a4def9edd7bded60.png][]  
**无结果：**

![2ad7365bb95749388a5fa77106991594.png][]

*  搜索时会根据输入的内容模糊匹配数据库中的文章标题；
 *  如果存在，则按发布时间由上到下依次展示；
 *  展示内容包括标题、发布时间、文章摘要；
 *  可选择想要查看的文章，点击“查看全文”查看具体的文章内容；
 *  若无搜索结果，则在页面显示“无搜索结果”；
 *  可在搜索框中继续属于要搜索的内容进行搜索。

### 个人博客页面 ###

![c9e1ff538e5a4db1ac6e596c331d44cb.png][]

*  个人博客页面导航栏显示了主页功能，点击则跳转至对应页面；
 *  该页面左侧显示了个人的基本信息，如头像、昵称、我的关注/粉丝按钮、gitee地址、文章总数、总访问量、获得的评论数量；
 *  右侧展示了个人的所有博客，按照发布时间由上到下展示；
 *  每篇博客显示了标题、发布时间、摘要、查看全文、删除、修改按钮；

### 个人中心页面 ###

![a23afd77e3db4cfa898b81c7e1846fe1.png][]

*  个人中心页面包含导航栏和个人信息的显示；
 *  显示了用户的头像，点击头像可进行修改；
 *  显示了用户名、昵称和 Gitee 地址；
 *  可对昵称和 Gitee 地址进行修改。

### 我的关注/粉丝页面 ###

这个页面主要分为两部分：我的关注和粉丝。  
**我的关注：**  
![c109fa287d1d458eaac14d0d2763ea14.png][]  
**我的粉丝：**  
![9e7a7f6efcdc4e60b4c104173be54100.png][]

*  两个页面的右侧展示了自己的个人信息；
 *  我的关注页面展示了自己关注的作者列表；
 *  粉丝页面则展示了关注自己的粉丝列表；
 *  列表的每条信息展示了关注/粉丝的头像、用户名、关注按钮和更多；
 *  点击右侧的按钮，可以实现对用户的取消关注和关注；
 *  点击更多，则可以向互相关注的作者发起在线聊天。

### 聊天室页面 ###

![f6f0f28fd4394063aa8fc00a9b849056.png][]

*  该页面左侧展示了自己的头像和昵称以及已经存在的会话列表；
 *  点击列表中的一个就可以产看到历史消息以及发起会话；
 *  如果对方在线，则可以实时接收到发送的消息；
 *  并且自己也能实时接收到别人发送的消息。

### 写博客页面 ###

![140c57a1260d4135a11cc53b6b1c2fd9.png][]

*  该页面用来编辑博客，只有包含标题部分，内容部分，定时发布、发布文章、保存草稿三个按钮；
 *  当提交博客内容给后端时，标题和正文部分都不能为空，否则就会弹窗提示；
 *  定时发布的博客会在指定的时间自动发布；
 *  发布的文章会被展示到博客广场和自己博客列表中；
 *  保存草稿则会展示到草稿页面中。

### 我的草稿 ###

**有草稿：**  
![866ca8c3c3ef4dd79f91151026eba2d9.png][]  
**无草稿：**  
![3e541bdc605d49f7a78bd365830e5e05.png][]

*  该页面展示了所有的草稿列表；
 *  列表中的每条记录都有标题、保存时间、继续编写和删除按钮；
 *  点击继续编写则会跳转到博客编辑页；
 *  点击删除按钮则会从数据库中删除对应草稿文章记录；
 *  数据库中无草稿时，则会在页面显示 “暂无草稿！”。

### 修改博客页面 ###

![8389511453d94bfea5b22bdc9a9a10ce.png][]

*  该页面和新增博客页面类似；
 *  同样标题和正文不能为空；
 *  可以保存草稿，也可以发布文章。

### 博客详情页 ###

**未登录：**

![dc1b8e8c89a741769c13ff4bfa2e9a78.png][]

**已登录：**

![1ce00c92bbcb4e54b4a2dc744dd74aac.png][]

*  该页面显示的是具体的博客内容，左边是作者信息，右边则是文章内容；
 *  文章内容显示了标题、作者、阅读量、发布时间、文章正文；
 *  文章内容过长，会进行折叠，展开更多之后，也可以点击收起；
 *  文章内容下面显示了所有用户最该文章的评论，登录和未登录用户都可以查看；
 *  未登录和已登录的区别在于导航栏的显示不同、已登录用户可关注该作者；
 *  已登录还可以发表评论、删除自己的评论。

### 他人博客主页 ###

在博客详情页面点击作者的头像或者用户名则会跳转到该作者的博客主页，同样存在未登录和已登录的差别，其差别基本上与博客详情页相同，这里以已登录为例：  
![f915c5f0eb78491dbca06abad732a1d0.png][]

*  除了导航栏之外，左侧显示了作者的基本信息；
 *  右侧显示的是该作者的所有文章列表，根据发布的时间从上到下排列；
 *  每条记录包含了改文章的标题、发布时间、摘要、查看全文按钮；

# 二、功能测试 #

## 2.1 登录测试用例 ##

![61e587f4a3084c149b33fd2e56feded1.png][]

**输入正确的用户名、密码、验证码：**

![5cb1925287c74e9d91d2196f7a8aa69c.png][]  
![8571d7519ff943b3b4de93e1a1bb8d75.png][]

**用户名/密码/验证码为空：**  
![77bff3b6d6f245448a9c4c69e3897458.png][]  
![f2407dd92f2640e7bf38bbacacdc0d07.png][]  
![304e0d4a386948cca9870e65837e533f.png][]  
**用户名密码出现中文或其他符号：**  
![208a7f20af464acbab45866570c311a4.png][]  
**用户名/密码输入错误：**  
![7c67fcb2189e4a92b8ec7c1fb6375403.png][]

![463f66edf86e483dbb53a9c5df158252.png][]  
**验证码输入错误：**  
![460de14b69b8449da12b7d4089d3348e.png][]  
**密码连续错误三次：**  
![2d94b8f529f94ad8a61eca59cad6c12e.png][]

![357679ffd5d64c31a7c707299168a1eb.png][]

## 2.2 注册测试用例 ##

![8a19253f28b640eaa43b0f6362012e92.png][]  
**注册成功：**  
![4dda3fcbf346457289292271a9efe0f5.png][]  
![bcfcb6975ffa47b9ab135c3c4fdc358a.png][]

**用户名/密码/确认密码为空：**

![3dcd7d0484204cea90dc455aa24e9cf0.png][]  
![bce1b784467e4e858a0a7ed4e9a1599e.png][]

![602b78fa24a04908b6efa26226866878.png][]

**用户名或密码中包含中文或其他字符：**

![76f6956435b343729ca3b38773623a6f.png][]  
**用户名长度小于4，密码长度小于6：**  
![3661ed6d1a404e669a591407c8a022f6.png][]  
![9f96e3ba9d4042b9ad22b0f1745d49ce.png][]

**用户名在数据库中已经存在：**  
![99faa74213694387be492019e9a66f43.png][]  
**密码和确认密码不同：**  
![9d041e68d54947148516a540443877f6.png][]

## 2.3 博客广场测试用例 ##

![2e553ec7a3434ff483985a104444231e.png][]  
**已登录和未登录：**  
![7c7322416dff47f586674eac883cd30a.png][]  
![88b6af89ce9d4da9bca3e32f8f64001f.png][]  
**位于首页时点击首页和上一页：**

![03174ea931184d3da200b942d1b6fccb.png][]

![e891d97a43fb43f6a5f6b367619c8517.png][]

**位于末页时点击末页和下一页：**

![11a770ebe52e45cdae9c8747dd1ff8b0.png][]  
![e243511e21014114a3feb8714d63a3aa.png][]

![5d10f59fe0fe4bcbb81445d1c5eec83e.png][]  
![06968eb2c7164afb803ac6571c7bca49.png][]

## 2.4 新增博客测试用例 ##

![8294616ce4bb45ecaa7387bd919a8d96.png][]

**输入标题或正文为空：**  
![8c9e6fa66f7e4a98ba5811469fc8033d.png][]

![0ba4b0b997774c10ae9bcc3dcc4662b9.png][]  
**定时发布：**

![17f5657b1628492a9965c781c0823118.png][]  
![2d0575a6c9624af894e0bf284fe9d8bc.png][]  
![d720a0f570c942cbba72b7e13308ab64.png][]  
**保存草稿：**  
![c7dac5611955471fa9f98b05fbca1349.png][]  
![1bf3b535061440eeb284082148cb39a4.png][]  
**发布文章：**  
![9276c834bedf49398af01ac1f59ca1e1.png][]  
![1e58a6417b3d4afa9e46a52f55d5e477.png][]  
![d1403cc142f54a48ad33487b40d228d7.png][]

## 2.5 个人博客页面测试用例 ##

![78205b0bd1eb43e99b82407c69c406f7.png][]  
**页面信息展示：**  
![29f1fcf4e4e94100be8bdda054213e4b.png][]  
**查看全文按钮：**  
![59695c30db8d4ec2b25a39fd9747591a.png][]  
![c1d34377a04941ea831873cdcf65781c.png][]  
**修改按钮：**  
![a1f668e734de4b448a14f58c33998d4a.png][]  
![5b717b90474d4e2d9a096e2cdd315ecf.png][]

**删除按钮：**

![e9a456c6e06f49da81cfec6eae3fb26a.png][]  
![68b3624328ef482083d74237a1ed5d5a.png][]  
![22f32c2629314ad5b0dfe252c64f5b58.png][]

## 2.6 其他用户博客主页测试用例 ##

![e056a09b2381478aa17f1f1faadad895.png][]

**未登录：**  
![b4f63e009ac545928987b28254786d98.png][]  
**已登录，且作者是本人：**  
![a6053687363b405ebc0db7e55c773d2e.png][]

**已登录，作者是其他人：**  
![53295cd311374e9aaa42fa3aa2582104.png][]  
**关注功能相关按钮——作者是本人：**  
![44b122c5ddb9403f92f21196acad6781.png][]

**关注功能相关按钮——作者是其他人：**  
![d962843e5c2c4b9998c91276f4837142.png][]

## 2.7 草稿列表页面测试用例 ##

![ef944a5c31cc44229680edf8071cc51f.png][]  
**页面展示：**  
![73513cd178444d19a2f9c10d2463d27b.png][]  
**继续编写：**  
![424f405240ea4201ab11fb6b634513cf.png][]

**删除：**  
![db64da69b84543249e23073ef3911704.png][]

## 2.8 搜索功能测试用例 ##

![31e737d94c48450c89290fce371999b5.png][]  
**能够搜索到结果：**

![c4d7c42c5a9e42a6a48e130ca3f1a8e5.png][]

**不能搜索到结果：**  
![39cb6321a1fe44ee9b65377fe5259e27.png][]

## 2.9 我的关注/粉丝页面测试用例 ##

![22c35e6c9b664f678a9d418ef53e82dd.png][]  
**访问我的关注和我的粉丝页面结果展示：**  
![73f799333a2a4555b508fc135d530d54.png][]  
**关注功能相关按钮功能测试：**  
![afc5fb240e864bd9854499ce633b88fe.png][]

![e6ba4db3f01e4e7dbf1c678e36dff635.png][]  
**点击用户名跳转至对应用户博客主页功能测试：**  
![d9c7522a42ef4ddbb6a1a1cca597874f.png][]  
**发送私信按钮测试：**  
![499cdd26d9ad4e10ab8d3a7802286511.png][]  
![1101834ec04143b197970078d1830fc6.png][]

## 2.10 聊天室页面测试用例 ##

![3d0fbd6d043144e09c4a28b1e8089f23.png][]

**进入聊天室后显示的页面：**  
![ef37dd41b1f54c319aa8b60fc40067b4.png][]  
**点击任一会话显示的页面：**  
![27b85f9494a94f3aad41456e3baffc8b.png][]  
**发送功能测试：**  
![f7afa98090a545df8e4a584f570181b7.png][]

## 2.11 个人中心页面测试用例 ##

![eb57826d7fa1453b860bdc6ce2ec7cd8.png][]  
**进行个人中心页面显示内容：**  
![f026515b0960468a8ab65b73c7bd4f11.png][]  
**修改头像——上传非图片文件：**

![a3fe2db73c9842f5903fddb123dc37e9.png][]  
**修改头像——上传图片文件：**  
![aa73b087ccda400d8f9bbe1e5b437ff2.png][]  
**修改昵称——内容为空：**  
![6b45c0130f924228b938ed133cf67a58.png][]  
**修改昵称——内容不为空：**  
![f6f81291272b48009defe92b79d53f65.png][]

## 2.12 博客详情页面测试用例 ##

![540128554cfc4e9db1658f72c3a450b5.png][]  
**已登录详情页展示：**  
![01d709765ba3492391f186924b36111e.png][]  
![2ceeadf090924c2eae4f22dbce9b4619.png][]

**未登录详情页展示：**  
![f231e4de28b44ebfbcad9f083815b43f.png][]

## 2.13 评论模块测试用例 ##

![0092a412cf824793aee39751db8420a7.png][]  
**未登录评论区显示内容：**

![f84e8444caab4aefa77ae5e650965b9f.png][]

**已登录评论区显示内容：**

![1a7329b20e374c4f8f8d84e087a60163.png][]

**发表评论功能测试：**  
![363b411a055d413b9be7a1844df259dd.png][]  
![a76c20e850e0447ca77b6d1dbf4d4ef1.png][]

**删除评论功能测试：**

![4ebab74ee9c148a4a9b63f7b7d07c4b2.png][]

# 三、自动化测试 #

## 3.1 单例驱动工具类 ##

由于在自动化程序中会非常频繁地使用到浏览器驱动类，如果每个测试类中都频繁地创建和销毁驱动对象的话，会给系统带来大量的资源消耗，因此我们可以定义一个懒汉模式的单例驱动类，从而避免了不必要的系统开销。这个工具类的主要功能有获取单例驱动对象、获取网页截图、关闭浏览器等，后续的测试类可通过继承该类获取这些功能。

**获取单例驱动：** 在这个类中，定义了一个静态未初始化的 `WebDriver` 对象，以及获取这个对象的方法 `getWebDriver` ，如果单例对象未被创建，将在第一次调用这个方法的时候进行创建。此外，这个单例使用了 `双重 if 判断 + synchronized + volatile` 解决了线程安全问题。

**获取屏幕截图：** 在页面加载完成之后，通过`getScreenshotAs`获取当前页面的截图，并一个时间 + 类名作为图片存放包名以及文件名。在其他测试类中，只有在合适的时间调用该方法，并传入其类名即可进行截图操作。

import org.apache.commons.io.FileUtils;
    import org.openqa.selenium.OutputType;
    import org.openqa.selenium.TakesScreenshot;
    import org.openqa.selenium.WebDriver;
    import org.openqa.selenium.chrome.ChromeDriver;
    import org.openqa.selenium.chrome.ChromeOptions;
    
    import java.awt.*;
    import java.io.File;
    import java.io.IOException;
    import java.text.SimpleDateFormat;
    import java.util.ArrayList;
    import java.util.List;
    import java.util.concurrent.TimeUnit;
    
    /**
     * 单例浏览器驱动类
     */
    public class WebDriverSingleton {
        
        private static volatile WebDriver webDriver;
    
        private static final Object locker = new Object();
    
        /**
         * 获取 单例的 WebDriver
         * @return WebDriver
         */
        public static WebDriver getWebDriver() {
        
            // 处理多线程并发问题
            if (webDriver == null) {
        
                synchronized (locker) {
        
                    if (webDriver == null) {
        
                        // 配置Chrome WebDriver 选项
                        ChromeOptions options = new ChromeOptions();
                        // options.setHeadless(true); // 无头模式
    
                        // 获取当前屏幕分辨率
                        Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
                        int screenWidth = (int) screenSize.getWidth();
                        int screenHeight = (int) screenSize.getHeight();
    
                        // 设置浏览器窗口大小为屏幕大小
                        options.addArguments("--window-size=" + screenWidth + "," + screenHeight);
    
                        // 创建 Chrome WebDriver 实例
                        webDriver = new ChromeDriver(options);
                        // 设置等待时间
                        webDriver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
                    }
                }
            }
            return webDriver;
        }
    
        public void getScreenShot(String src) throws IOException {
        
    
            // 获取时间
            List<String> times = getTime();
            // 构建文件路径 + 文件名
            String fileName = "./src/out/" + times.get(0) + "/" + src + "/" + times.get(1) + ".png";
    
            // 获取屏幕截图
            File srcFile = ((TakesScreenshot) getWebDriver()).getScreenshotAs(OutputType.FILE);
            // 保存图片
            FileUtils.copyFile(srcFile, new File(fileName));
        }
    
        /**
         * 获取当前时间
         * @return 日期 + 时间
         */
        private List<String> getTime(){
        
            // 保存目录名格式：年月日
            SimpleDateFormat sdf1 = new SimpleDateFormat("yyyyMMdd");
            // 保存文件名格式：年月日+具体时间
            SimpleDateFormat sdf2 = new SimpleDateFormat("yyyyMMdd-HHmmssSS");
    
            // 目录名
            String dirName = sdf1.format(System.currentTimeMillis());
            // 文件名
            String filename = sdf2.format(System.currentTimeMillis());
    
            List<String> list = new ArrayList<>();
            list.add(dirName);
            list.add(filename);
            return list;
        }
    
        /**
         * 关闭浏览器
         */
        public static void shutWebDriver(){
        
            if(webDriver != null){
        
                webDriver.quit();
                webDriver = null;
            }
        }
    }

## 3.2 注册页面自动化测试 ##

`RegTest` 类的作用是完成注册页面的自动化测试，这个类首先继承了 `WebDriverSingleton` 类并获取了单例驱动对象。另外通过`@TestMethodOrder`注解，设置其中的测试方法按照 `@Order` 注解指定的顺序执行。

**`@BeforeAll` 和 `@AfterAll` 注解：** 其中 `@BeforeAll` 注解的 `openWebpage` 方法用于打开网页，该方法会在该类中的所有的测试方法执行之前执行；`@AfterAll` 注解的方法则用于关闭当前测试类打开的页面，会在所有的测试方法执行完成之间执行。

**`webpageComp`方法：** 该方法用于打开页面之间进行截图操作，可通过截取得到的图片来判断页面是否正常打开。

**`regTest`方法：** 该方法用户测试注册功能，通过 `@ParameterizedTest` 注解实现参数化，并通过`@CsvSource` 注解设置多组参数进行测试。

## 3.3 登录页面自动化测试 ##

`LoginTest`类实现了对登录功能的自动化测试，在该测试类中设置了三个测试方法，分别是`webpageComp`验证页面是否正常打开、`abnormalLoginTest`异常登录测试，`normalLoginTest`正常登录测试。

在异常登录测试中，使用`@ParameterizedTest`注解实现参数化，并且通过`@CsvSource`注解设置了多组参数，测试对象分别有验证码错误、用户名出现中文、密码为空。

在正常登录测试中，为了方便测试，在后端程序中增加了一个`admin`的特殊用户，将其验证码`code`也设置为了`admin`以方便进行测试。

import com.myblog.utils.WebDriverSingleton;
    import org.junit.jupiter.api.*;
    import org.junit.jupiter.params.ParameterizedTest;
    import org.junit.jupiter.params.provider.CsvSource;
    import org.openqa.selenium.Alert;
    import org.openqa.selenium.By;
    import org.openqa.selenium.WebDriver;
    import org.openqa.selenium.WebElement;
    
    import java.io.IOException;
    import java.util.concurrent.TimeUnit;
    
    /**
     * 登录页面自动化测试
     */
    
    // 设置执行顺序按 @Order 注解设置的顺序执行
    @TestMethodOrder(MethodOrderer.OrderAnnotation.class)
    public class LoginTest extends WebDriverSingleton {
        
        // 获取单例驱动
        private static final WebDriver webDriver = getWebDriver();
    
        /**
         * 打开登录页面
         */
        @BeforeAll
        public static void openWebPage(){
        
            webDriver.get("http://8.130.52.26:8081/login.html");
            // 设置等待时间
            webDriver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
        }
    
        /**
         * 验证登录页面是否打开成功
         */
        @Test
        @Order(1)
        public void webpageComp() throws IOException, InterruptedException {
        
            // 等待验证码加载完毕
            Thread.sleep(1000);
            // 验证页面是否能找到这些元素
            webDriver.findElement(By.cssSelector("#username"));
            webDriver.findElement(By.cssSelector("body > div.login-container > div > div:nth-child(3) > span"));
            webDriver.findElement(By.cssSelector("body > div.login-container > div > div:nth-child(4) > span"));
            webDriver.findElement(By.xpath("//*[@id=\"submit\"]"));
    
            // 获取当前页面截图
            getScreenShot(getClass().getSimpleName());
        }
    
        /**
         * 异常登录测试
         * @param username 用户名
         * @param password 密码
         * @param confirmCode 验证码
         */
        @Order(2)
        @ParameterizedTest
        @CsvSource({
        "zhangsan, 123457, abcde", "李四, 123456, abcde", "wangwu, '', 123456"})
        public void abnormalLoginTest(String username, String password, String confirmCode) throws InterruptedException, IOException {
        
            // 获取元素
            WebElement inputUsername = webDriver.findElement(By.cssSelector("#username"));
            WebElement inputPassword = webDriver.findElement(By.cssSelector("#password"));
            WebElement inputConfirmCode = webDriver.findElement(By.cssSelector("#code"));
            WebElement submit = webDriver.findElement(By.cssSelector("#submit"));
            // 清除用户名、密码、验证码
            inputUsername.clear();
            inputPassword.clear();
            inputConfirmCode.clear();
            // 输入用户名、密码、验证码
            inputUsername.sendKeys(username);
            inputPassword.sendKeys(password);
            inputConfirmCode.sendKeys(confirmCode);
            // 提交
            submit.click();
    
            // 处理弹窗
            // 等待弹窗加载完毕
            Thread.sleep(1000);
            Alert alert = webDriver.switchTo().alert();
            System.out.println("弹窗内容：" + alert.getText());
            alert.accept();
    
            // 截图
            getScreenShot(getClass().getSimpleName());
        }
    
    
        /**
         * 正常登录成功测试
         * @param username 用户名
         * @param password 密码
         * @param confirmCode 验证码
         * @throws IOException
         * @throws InterruptedException
         */
        @Order(3)
        @ParameterizedTest
        @CsvSource("admin, 123456, admin")
        public void normalLoginTest(String username, String password, String confirmCode) throws IOException, InterruptedException {
        
            // 获取元素
            WebElement inputUsername = webDriver.findElement(By.cssSelector("#username"));
            WebElement inputPassword = webDriver.findElement(By.cssSelector("#password"));
            WebElement inputConfirmCode = webDriver.findElement(By.cssSelector("#code"));
            WebElement submit = webDriver.findElement(By.cssSelector("#submit"));
            // 清除用户名、密码、验证码
            inputUsername.clear();
            inputPassword.clear();
            inputConfirmCode.clear();
            // 输入用户名、密码、验证码
            inputUsername.sendKeys(username);
            inputPassword.sendKeys(password);
            inputConfirmCode.sendKeys(confirmCode);
    
            // 获取页面截图
            Thread.sleep(1000);
            getScreenShot(getClass().getSimpleName());
    
            // 提交
            submit.click();
    
            // 设置等待时间
            Thread.sleep(1000);
    
            // 获取截图
            getScreenShot(getClass().getSimpleName());
        }
    }

## 3.4 博客管理自动化测试 ##

`CtrlBlogTest`测试类基本实现了对文章操作的整体流程，在这个测试类中设置的测试方法流程为：

新增文章 =》修改文章 =》保存草稿 =》继续编写 =》发布文章 =》删除文章

其中没一个流程就代表了一个测试方法，按照顺序依次执行，完成测试需求。

import com.myblog.utils.WebDriverSingleton;
    import org.junit.jupiter.api.*;
    import org.openqa.selenium.Alert;
    import org.openqa.selenium.By;
    import org.openqa.selenium.WebDriver;
    
    import java.io.IOException;
    import java.util.concurrent.TimeUnit;
    
    /**
     * 博客管理自动化测试
     * 测试内容：
     * 新增文章 =》修改文章 =》保存草稿 =》继续编写 =》发布文章 =》删除文章
     */
    
    // 设置方法执行顺序
    @TestMethodOrder(MethodOrderer.OrderAnnotation.class)
    public class CtrlBlogTest extends WebDriverSingleton {
        
        // 获取单例驱动
        private static final WebDriver webDriver = getWebDriver();
    
        /**
         * 打开个人博客页面
         * 由于登录测试运行过，已经存在 Session，不必再登录
         */
        @BeforeAll
        public static void openWebpage(){
        
            webDriver.get("http://8.130.52.26:8081/myblog_list.html");
        }
    
        /**
         * 检查当前页面是否打开成功
         */
        @Test
        @Order(1)
        public void webpageComp() throws IOException, InterruptedException {
        
            // 等待页面加载完成
            Thread.sleep(1000);
            // 验证在当前页面是否能够找到下面的元素
            webDriver.findElement(By.cssSelector("body > div.nav > a:nth-child(5)"));
            webDriver.findElement(By.cssSelector("body > div.nav > a:nth-child(6)"));
            webDriver.findElement(By.xpath("//*[@id=\"author2\"]"));
            webDriver.findElement(By.xpath("/html/body/div[2]/div[1]/div/button[1]"));
    
            // 截图
            getScreenShot(getClass().getSimpleName());
        }
    
        /**
         * 新增文章
         */
        @Test
        @Order(2)
        public void addBlogTest() throws IOException, InterruptedException {
        
            // 找到写博客连接，并点击
            webDriver.findElement(By.cssSelector("body > div.nav > a:nth-child(10)")).click();
            // 等待页面加载完毕
            webDriver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
            // 获取当前页面截图
            getScreenShot(getClass().getSimpleName());
    
            // 获取标题输入框并输入内容
            webDriver.findElement(By.cssSelector("#title")).sendKeys("Test");
    
            Thread.sleep(1000);
            // 截取当前页面
            getScreenShot(getClass().getSimpleName());
    
            // 获取发布按钮，并发布
            webDriver.findElement(By.cssSelector("body > div.blog-edit-container > div.title > button:nth-child(4)")).click();
    
            // 处理弹窗
            Thread.sleep(1000);
            Alert alert = webDriver.switchTo().alert();
            System.out.println("弹窗内容：" + alert.getText());
            alert.dismiss();
    
            Thread.sleep(1000);
            // 获取当前页面截图
            getScreenShot(getClass().getSimpleName());
        }
    
        /**
         * 修改文章
         */
        @Test
        @Order(3)
        public void alterBlogTest() throws InterruptedException, IOException {
        
            // 获取修改文章按钮并点击
            webDriver.findElement(By.cssSelector("#artlist > div:nth-child(1) > a:nth-child(5)")).click();
            // 等待页面加载
            Thread.sleep(1000);
            // 获取截图
            getScreenShot(getClass().getSimpleName());
    
            // 获取标题按钮并修改
            webDriver.findElement(By.cssSelector("#title")).clear();
            webDriver.findElement(By.cssSelector("#title")).sendKeys("Test2");
    
            Thread.sleep(1000);
            // 获取当前页面截图
            getScreenShot(getClass().getSimpleName());
        }
    
        /**
         * 保存草稿
         */
        @Test
        @Order(4)
        public void saveDraftTest() throws InterruptedException, IOException {
        
            // 获取保存草稿按钮并点击
            webDriver.findElement(By.cssSelector("body > div.blog-edit-container > div.title > button:nth-child(2)")).click();
            // 处理弹窗
            Thread.sleep(1000);
            Alert alert = webDriver.switchTo().alert();
            System.out.println("弹窗内容：" + alert.getText());
            alert.accept();
    
            // 获取当前页面截图
            Thread.sleep(1000);
            getScreenShot(getClass().getSimpleName());
        }
    
    
        /**
         * 继续编写
         */
        @Test
        @Order(5)
        public void continueEditBlogTest() throws InterruptedException, IOException {
        
            // 找到继续编写按钮并点击
            webDriver.findElement(By.cssSelector("#artlist > div > a:nth-child(4)")).click();
            // 获取页面截图
            Thread.sleep(1000);
            getScreenShot(getClass().getSimpleName());
    
            // 获取标题按钮并修改
            webDriver.findElement(By.cssSelector("#title")).clear();
            webDriver.findElement(By.cssSelector("#title")).sendKeys("Test3");
    
            // 获取页面截图
            Thread.sleep(1000);
            getScreenShot(getClass().getSimpleName());
        }
    
    
        /**
         * 发布文章
         */
        @Test
        @Order(6)
        public void postBlogTest() throws InterruptedException, IOException {
        
            // 找到发布按钮并点击
            webDriver.findElement(By.cssSelector("body > div.blog-edit-container > div.title > button:nth-child(3)")).click();
            // 处理弹窗
            Thread.sleep(1000);
            Alert alert = webDriver.switchTo().alert();
            System.out.println("弹窗内容：" + alert.getText());
            alert.accept();
    
            // 获取页面截图
            Thread.sleep(1000);
            getScreenShot(getClass().getSimpleName());
        }
    
        /**
         * 删除文章
         */
        @Test
        @Order(7)
        public void delBlogTest() throws InterruptedException, IOException {
        
            // 找到删除按钮并点击
            webDriver.findElement(By.cssSelector("#artlist > div:nth-child(1) > a:nth-child(6)")).click();
    
            // 处理弹窗
            // 确认删除弹窗
            Thread.sleep(1000);
            Alert alert = webDriver.switchTo().alert();
            System.out.println("弹窗内容：" + alert.getText());
            alert.accept();
    
            // 删除成功弹窗
            Thread.sleep(1000);
            alert = webDriver.switchTo().alert();
            System.out.println("弹窗内容：" + alert.getText());
            alert.accept();
    
            // 获取页面截图
            Thread.sleep(1000);
            getScreenShot(getClass().getSimpleName());
    
        }
    }

## 3.5 搜索功能自动化测试 ##

`SearchTest` 测试类的作用是对搜索功能进行测试，在该测试类中同样设置了三个测试方法：`webpageComp`验证页面是否正常打开、`searchEmptyTest`当输入框内容为空时的搜索测试、`searchTest`输入框中存在内容的搜索测试。

在 `searchTest` 同样使用了`@ParameterizedTest` 注解实现参数化，通过`@CsvSource`注解设置了多组参数，其中包含了可以搜到和搜索不到结果的搜索关键字。

在搜索功能中值得注意的一点是，当点击搜索按钮的时候，会创建一个**新的标签页**来展示搜索结果。因此在该测试方法中，首先通过 `WebDriver` 中的 `getWindowHandle` 方法获取了当前标签页的句柄 `currentHandle`，然后通过 `getWindowHandles` 的方法获取所有的标签页句柄，循环判断，如果遍历到的句柄值不等于`currentHandle`，则为新打开的标签页，然后通过`webDriver.switchTo().window(handle)` 切换至这个新标签页，在搜索结果页面中截图之后，关闭这个页面，再切回`currentHandle`原标签页。

import com.myblog.utils.WebDriverSingleton;
    import org.junit.jupiter.api.*;
    import org.junit.jupiter.params.ParameterizedTest;
    import org.junit.jupiter.params.provider.CsvSource;
    import org.openqa.selenium.Alert;
    import org.openqa.selenium.By;
    import org.openqa.selenium.WebDriver;
    import org.openqa.selenium.WebElement;
    
    import java.io.IOException;
    import java.util.Set;
    import java.util.concurrent.TimeUnit;
    
    /**
     * 搜索功能自动化测试
     */
    
    // 设置测试方法的运行顺序
    @TestMethodOrder(MethodOrderer.OrderAnnotation.class)
    public class SearchTest extends WebDriverSingleton {
        
        // 获取单例驱动
        private static final WebDriver webDriver = getWebDriver();
    
        /**
         * 打开博客页面
         */
        @BeforeAll
        public static void openWebpage() {
        
            webDriver.get("http://8.130.52.26:8081/blog_list.html");
            // 等待页面加载完毕
            webDriver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
        }
    
        /**
         * 判断页面是否正常打开
         */
        @Test
        @Order(1)
        public void webpageComp() throws IOException {
        
            // 如果在当前页面找到以下元素，则测试通过
            webDriver.findElement(By.cssSelector("#pageDiv > button:nth-child(1)"));
            webDriver.findElement(By.cssSelector("#pageDiv > button:nth-child(5)"));
            // 使用断言判断当前页面的标题是否是 “博客列表”
            boolean flag = webDriver.getTitle().equals("博客列表");
            Assertions.assertTrue(flag);
    
            // 截取当前页面
            getScreenShot(getClass().getSimpleName());
        }
    
    
        /**
         * 搜索框中无内容
         */
        @Test
        @Order(2)
        public void searchEmptyTest() throws InterruptedException, IOException {
        
            // 获取搜索输入框
            WebElement searchInput = webDriver.findElement(By.cssSelector("#search-input"));
            // 获取搜索按钮
            WebElement button = webDriver.findElement(By.cssSelector("body > div.nav > div > button"));
    
            // 清除输入框内容
            searchInput.clear();
            // 输入内容
            searchInput.sendKeys("");
            // 点击搜索按钮
            button.click();
    
            // 处理弹窗
            Thread.sleep(1000);
            Alert alert = webDriver.switchTo().alert();
            System.out.println("弹窗内容：" + alert.getText());
            alert.accept();
    
        }
    
        /**
         * 搜索框中输入内容。
         * 实现多参数，每次搜索都会打开新页面，先获得当前页面以及所有页面的句柄，先切换至新页面，截图后关闭该页面，然后再切换回原页面
         * @param searchKey 搜索关键字
         */
    
        @ParameterizedTest
        @CsvSource({
        "Java", "123", "Spring"})
        @Order(3)
        public void searchTest(String searchKey) throws InterruptedException, IOException {
        
            // 获取搜索输入框
            WebElement searchInput = webDriver.findElement(By.cssSelector("#search-input"));
            // 获取搜索按钮
            WebElement button = webDriver.findElement(By.cssSelector("body > div.nav > div > button"));
    
            // 清除输入框内容
            searchInput.clear();
            // 输入内容
            searchInput.sendKeys(searchKey);
            // 点击搜索按钮
            button.click();
    
            // 获取当前窗口句柄
            String currentHandle = webDriver.getWindowHandle();
    
    
            // 获取所有窗口句柄
            Set<String> allHandles = webDriver.getWindowHandles();
    
            // 遍历窗口句柄，找到新标签页的句柄
            for (String handle : allHandles) {
        
                if (!handle.equals(currentHandle)) {
        
                    webDriver.switchTo().window(handle);
                    // 搜索结果截图
                    Thread.sleep(1000);
                    getScreenShot(getClass().getSimpleName());
    
                    // 关闭这个新窗口
                    webDriver.close();
    
                    // 切换会原窗口
                    webDriver.switchTo().window(currentHandle);
                }
            }
        }
    }

## 3.6 我的关注/粉丝页面自动化测试 ##

`FollowRelationTest` 该测试类的作用是实现对我的关注/粉丝页面的测试，主要实现了四个测试方法：`webpageComp`测试页面是否正常打开、`switchToFollowsTest`切换至粉丝页面测试、`switchBackToFollowingTest`切换会关注页面测试、`gotoOtherPageTest`前往其他用户博客主页测试。

在通过点击用户名前往对应用户博客主页的功能中，同样会打开一个新的标签页，这里的处理方法和上述搜索功能测试时的做法一样。

import com.myblog.utils.WebDriverSingleton;
    import org.junit.jupiter.api.*;
    import org.openqa.selenium.By;
    import org.openqa.selenium.WebDriver;
    
    import java.io.IOException;
    import java.util.Set;
    
    /**
     * 我的关注和粉丝页面自动化测试
     */
    @TestMethodOrder(MethodOrderer.OrderAnnotation.class)
    public class FollowRelationTest extends WebDriverSingleton {
        
    
        // 获取单例驱动对象
        private static final WebDriver webDriver = getWebDriver();
    
        /**
         * 打开页面
         */
        @BeforeAll
        public static void openWebpage() {
        
            webDriver.get("http://8.130.52.26:8081/my_relation_following.html");
        }
    
    
        /**
         * 验证页面是否正常打开
         */
        @Test
        @Order(1)
        public void webpageComp() throws InterruptedException, IOException {
        
            // 如果获取到下面的元素，则说明页面正常打开了
            webDriver.findElement(By.cssSelector("#relationship > div.relation-tab > div.following-tab"));
            webDriver.findElement(By.cssSelector("#relationship > div.relation-tab > div.follows-tab.active"));
            // 判断网页标题
            boolean flag = webDriver.getTitle().equals("我的关注");
            Assertions.assertTrue(flag);
    
            // 获取截图
            Thread.sleep(1000);
            getScreenShot(getClass().getSimpleName());
        }
    
        /**
         * 切换至粉丝页面测试
         */
        @Test
        @Order(2)
        public void switchToFollowsTest() throws InterruptedException, IOException {
        
            // 点击我的粉丝按钮
            webDriver.findElement(By.cssSelector("#relationship > div.relation-tab > div.follows-tab.active")).click();
    
            // 判断页面标题
            boolean flag = webDriver.getTitle().equals("我的粉丝");
            Assertions.assertTrue(flag);
    
            // 获取当前页面截图
            Thread.sleep(1000);
            getScreenShot(getClass().getSimpleName());
        }
    
        /**
         * 切换会我的关注页面测试
         */
        @Test
        @Order(3)
        public void switchBackToFollowingTest() throws InterruptedException, IOException {
        
            // 点击我的关注按钮
            webDriver.findElement(By.cssSelector("#relationship > div.relation-tab > div.following-tab.active")).click();
            // 判断页面标题
            boolean flag = webDriver.getTitle().equals("我的关注");
            Assertions.assertTrue(flag);
    
            // 获取页面截图
            Thread.sleep(1000);
            getScreenShot(getClass().getSimpleName());
        }
    
        /**
         * 点击一个关注用户的用户名，跳转至其主页测试
         */
        @Test
        @Order(4)
        public void gotoOtherPageTest() throws IOException, InterruptedException {
        
            // 点击关注列表中的第一个用户的用户名或昵称
            webDriver.findElement(By.cssSelector("#following-list > div:nth-child(1) > h3")).click();
    
            // 获取当前页面句柄
            String currentHandle = webDriver.getWindowHandle();
            // 获取所有页面句柄
            Set<String> handles = webDriver.getWindowHandles();
    
            // 切换至新页面截图，然后关闭该页面并跳转回原页面
            for (String handle : handles) {
        
                if (!handle.equals(currentHandle)) {
        
                    webDriver.switchTo().window(handle);
    
                    // 获取当前页面截图
                    Thread.sleep(1000);
                    getScreenShot(getClass().getSimpleName());
    
                    // 关闭当前页面
                    webDriver.close();
                    // 切换会原页面
                    webDriver.switchTo().window(currentHandle);
                }
            }
        }
    }

## 3.7 聊天室自动化测试 ##

`ChatOnlineTest` 测试类的作用是完成对聊天室的自动化测试。在该测试类中，实现了三个测试方法：`webpageComp`测试页面是否正常打开、`clickSessionTest`测试会话列表的切换功能、`postMessageTest`测试消息的发送功能。

在`postMessageTest`测试方法中，使用了 `@ParameterizedTest` 注解实现参数化，并通过 `@CsvSource` 注解以实现发送一组消息。

import com.myblog.utils.WebDriverSingleton;
    import org.junit.jupiter.api.*;
    import org.junit.jupiter.params.ParameterizedTest;
    import org.junit.jupiter.params.provider.CsvSource;
    import org.openqa.selenium.By;
    import org.openqa.selenium.WebDriver;
    import org.openqa.selenium.WebElement;
    
    import java.io.IOException;
    
    /**
     * 在线聊天室自动化测试
     */
    
    @TestMethodOrder(MethodOrderer.OrderAnnotation.class)
    public class ChatOnlineTest extends WebDriverSingleton {
        
        // 获取单例驱动对象
        private static final WebDriver webDriver = getWebDriver();
    
        /**
         * 打开网页
         */
        @BeforeAll
        public static void openWebpage(){
        
            webDriver.get("http://8.130.52.26:8081/private_message.html");
        }
    
        /**
         * 验证页面是否正常打开
         */
        @Test
        @Order(1)
        public void webpageComp() throws InterruptedException, IOException {
        
            // 如果找到下面元素则说明打开页面成功
            String text = webDriver.findElement(By.cssSelector("body > div.chat-container > div > div.right > div.title")).getText();
            Assertions.assertEquals("在线聊天室", text);
            webDriver.findElement(By.cssSelector("#author"));
    
            // 获取页面截图
            Thread.sleep(1000);
            getScreenShot(getClass().getSimpleName());
        }
    
        /**
         * 点击会话列表测试
         */
        @Test
        @Order(2)
        public void clickSessionTest() throws InterruptedException, IOException {
        
            // 点击会话列表中的第二个会话
            webDriver.findElement(By.cssSelector("#session-list > li:nth-child(2)")).click();
            // 获取并判断会话列表中的用户名与会话标题是否相等
            String sessionUsername = webDriver.findElement(By.cssSelector("#session-list > li:nth-child(2) > h3")).getText();
            String sessionTitle = webDriver.findElement(By.cssSelector("body > div.chat-container > div > div.right > div.title")).getText();
            Assertions.assertEquals(sessionTitle, sessionUsername);
    
            // 获取截图
            Thread.sleep(1000);
            getScreenShot(getClass().getSimpleName());
    
            // 点击会话列表中的第一个会话
            webDriver.findElement(By.cssSelector("#session-list > li:nth-child(1)")).click();
    
            // 获取页面截图
            Thread.sleep(1000);
            getScreenShot(getClass().getSimpleName());
        }
    
        /**
         * 发送消息测试
         */
        @ParameterizedTest
        @CsvSource({
        "在的！", "怎么了？", "还不睡觉。"})
        @Order(3)
        public void postMessageTest(String message) throws InterruptedException, IOException {
        
            // 获取聊天输入框
            WebElement textareaInput = webDriver.findElement(By.cssSelector("body > div.chat-container > div > div.right > textarea"));
            // 输入消息内容
            textareaInput.sendKeys(message);
            // 获取发送按钮并发送
            Thread.sleep(1000);
            webDriver.findElement(By.cssSelector("body > div.chat-container > div > div.right > div.ctrl > button")).click();
    
            // 获取页面截图
            Thread.sleep(1000);
            getScreenShot(getClass().getSimpleName());
        }
    }

## 3.8 博客详情页 + 评论功能自动化测试 ##

`BlogContentAndCommentTest`测试类的功能是对博客详情页和评论区相关功能进行自动化测试，在该类中实现了4个测试方法：`webpageComp`测试页面是否正常打开，`checkFirstBlogTest`测试博客广场中的第一篇博客内容以及该博客的评论区展示，`postCommentTest`测试评论的发表功能，`deleteCommentTest`测试当前用户发表的评论的删除功能。

在`checkFirstBlogTest`测试方法中，获取评论区截图时首先需要使用 Javascript 将页面右侧详情部分滑动到最底部，再进行页面内容的截取；在`postCommentTest`测试方法中，使用`@ParameterizedTest`注解实现参数化，通过 `@CsvSource` 注解传递多个参数。

import com.myblog.utils.WebDriverSingleton;
    import org.junit.jupiter.api.*;
    import org.junit.jupiter.params.ParameterizedTest;
    import org.junit.jupiter.params.provider.CsvSource;
    import org.openqa.selenium.*;
    
    import java.io.IOException;
    import java.util.concurrent.TimeUnit;
    
    /**
     * 博客详情页 + 评论功能自动化测试
     */
    
    @TestMethodOrder(MethodOrderer.OrderAnnotation.class)
    public class BlogContentAndCommentTest extends WebDriverSingleton {
        
        // 获取单例驱动对象
        private static final WebDriver webDriver = getWebDriver();
    
        // 打开博客列表页
        @BeforeAll
        public static void openWebpage() {
        
            webDriver.get("http://8.130.52.26:8081/blog_list.html");
            // 等待页面加载完毕
            webDriver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
        }
    
        /**
         * 测试页面是否打开成功
         */
        @Test
        @Order(1)
        public void webpageComp() throws InterruptedException, IOException {
        
            // 如果找到了以下元素，则说明打开页面成功
            webDriver.findElement(By.cssSelector("#userLoginElement > a:nth-child(1)"));
            webDriver.findElement(By.cssSelector("#pageDiv > button:nth-child(1)"));
            // 验证页面标题
            boolean flag = webDriver.getTitle().equals("博客广场");
            Assertions.assertTrue(flag);
    
            // 获取当前页面截图
            Thread.sleep(1000);
            getScreenShot(getClass().getSimpleName());
        }
    
        /**
         * 点击查看第一篇博客
         */
        @Test
        @Order(2)
        public void checkFirstBlogTest() throws InterruptedException, IOException {
        
            // 点击查看全文
            webDriver.findElement(By.cssSelector("#artlist > div:nth-child(1) > a")).click();
    
            // 等待页面加载
            webDriver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
    
    
            // 获取页面截图
            Thread.sleep(1000);
            getScreenShot(getClass().getSimpleName());
    
            // 找到右侧内容区域的元素
            WebElement rightContentElement = webDriver.findElement(By.cssSelector(".container-right"));
    
            // 创建一个 JavascriptExecutor 对象
            JavascriptExecutor jsExecutor = (JavascriptExecutor) webDriver;
    
            // 使用 JavaScript 将右侧内容滚动到最底部
            jsExecutor.executeScript("arguments[0].scrollTo(0, arguments[0].scrollHeight);", rightContentElement);
    
            // 获取评论区截图
            Thread.sleep(1000);
            getScreenShot(getClass().getSimpleName());
        }
    
        /**
         * 评论区发表评论测试
         */
        @ParameterizedTest
        @CsvSource({
        "666", "泰裤辣！"})
        @Order(3)
        public void postCommentTest(String comment) throws InterruptedException, IOException {
        
            // 获取评论输入框
            webDriver.findElement(By.cssSelector("#inputText")).sendKeys(comment);
    
            // 获取发表评论按钮并点击
            webDriver.findElement(By.cssSelector("#userLoginElement2 > div > div > button")).click();
    
            // 获取截图
            Thread.sleep(1000);
            getScreenShot(getClass().getSimpleName());
        }
    
    
        /**
         * 删除评论自动化测试
         */
        @Test
        @Order(4)
        public void deleteCommentTest() throws InterruptedException, IOException {
        
            // 获取删除按钮
            webDriver.findElement(By.cssSelector("#commentList > div:nth-child(4) > div.delete > button")).click();
    
            // 处理弹窗
            Thread.sleep(1000);
            Alert alert = webDriver.switchTo().alert();
            System.out.println("弹窗内容：" + alert.getText());
            alert.accept();
    
            // 获取页面截图
            Thread.sleep(1000);
            getScreenShot(getClass().getSimpleName());
        }
    }

## 3.9 Junit 测试套件 ##

`RunSuite`是一个 Junit 测试套件，用于将上面的测试类组织在一起。在进行自动化测试时，只需要运行这个测试套件，就能够运行到所有的自动化测试代码。该类通过 `@Suite` 注解和 `@SelectClasses` 指定测试代码的顺序按照测试类的顺序来执行，这种方式有助于组织和管理多个测试类，可以一次性运行它们，以确保你的应用程序在不同方面都正常工作。

import com.myblog.test.*;
    import org.junit.platform.suite.api.SelectClasses;
    import org.junit.platform.suite.api.Suite;
    
    /**
     * 测试套件
     */
    @Suite
    @SelectClasses({
        
            RegTest.class, LoginTest.class, CtrlBlogTest.class, SearchTest.class,
            FollowRelationTest.class, ChatOnlineTest.class, BlogContentAndCommentTest.class,
            QuitDriveTest.class})
    public class RunSuite {
        }

## 3.10 自动化测试总结 ##

**测试结果：**

![0260cc2a04224e7483448dce20368411.png][]  
![33e9027c3dcd48db90380287b6c03b2c.png][]  
![486228e820514c5385b61a6881504c3d.png][]

通过运行 `RunSuite` 套件，最终发现，上面所有的测试方法通过了测试，并且获取了相应页面的截图，方便对测试结果进行对比。

**在上述的测试过程中：**

1.  通过创建单例驱动对象的方式，只创建了一次浏览器驱动对象，保持了代码的简洁性，同时也一定程度上减少了系统不必要的开销。
2.  使用 Junit5 编写和管理测试用例，相比于 Junit4 拥有更多的注解功能、更简单的参数化方法、更灵活的断言等等。
3.  在自动化测试中，部分测试使用了参数化，使得代码更加整洁、具有更高的可读性。
4.  使用隐式等待，这种智能化等待方式提高自动化运行的效率和稳定性。
5.  使用了屏幕截图，方便在测试之后，与预期结果进行对比，方便溯源。

# 四、性能测试 #

## 4.1 LoadRunner 工具说明 ##

LoadRunner 是一款性能测试工具，用于测试应用程序、网站和服务的性能和可伸缩性。它由三个主要组件组成，每个组件都有其特定的功能和用途：  
![d941fd26f88a4b59952e3b32677b59ac.png][]

1.  **Virtual User Generator (VUGen)**：
    
     *  VUGen 是 LoadRunner 中的第一个组件，用于创建虚拟用户脚本。虚拟用户脚本定义了用户在应用程序上执行的操作，包括浏览网页、填写表单、执行搜索等。VUGen 提供了一个录制功能，可以录制用户在应用程序上的操作，并将其转化为脚本。还可以手动编写脚本，以模拟不同的用户行为。
2.  **Controller**：
    
     *  Controller 是 LoadRunner 的第二个组件，用于管理和执行性能测试。可以在 Controller 中创建测试场景，将多个虚拟用户脚本组合在一起，并模拟多个用户同时访问应用程序。Controller 还允许配置虚拟用户的数量、设置测试持续时间、调整负载模式，并监视测试的性能指标。一旦测试场景配置完成，可以启动测试并收集性能数据。
3.  **Analysis**：
    
     *  Analysis 是 LoadRunner 的第三个组件，用于分析和可视化性能测试结果。一旦性能测试完成，Analysis 允许导入和分析收集的性能数据，以便评估应用程序的性能表现。可以生成图表、报告和趋势分析，以帮助识别性能瓶颈和问题。Analysis 提供了丰富的工具和选项，用于深入了解应用程序在不同负载下的行为。

这三个组件共同组成了 LoadRunner 的核心功能，能够创建、执行和分析性能测试，以评估应用程序在不同负载下的性能和可伸缩性。LoadRunner 还提供了许多其他功能，如监控、自动化、报告生成等，以支持更复杂的性能测试需求。

## 4.2 录制登录测试脚本 ##

1.  创建测试项目

由于现在需要测试的是一个Web项目，因此在创建测试脚本的时候，选择的协议是 `Web-HTTP/HTML`：

![c238c3f097dd48d982309ed3485a3456.png][]

1.  当创建好测试项目之后，点击录制，配置录制相关规则  
    ![94daf4ec49054f92ac8b84c883830fcb.png][]
2.  点击开始录制，进行录制脚本  
    其实所谓的录制脚本，就是监视电脑上的网络流量并记录与应用程序的交互，以便后续能够模拟这个场景进行性能测试。这些记录包括HTTP请求、响应、页面浏览以及其他用户与应用程序的交互操作。一旦录制完成，就可以使用这些记录生成性能测试脚本，然后在不同的负载条件下运行这些脚本，以评估应用程序的性能和稳定性。

在此处，我录制的是登录这个场景，将录制结果裁剪掉不必要的代码后如下所示：

Action()
    {
        
    	web_url("login.html", 
    		"URL=http://8.130.52.26:8081/login.html", 
    		"Resource=0", 
    		"Referer=", 
    		"Snapshot=t53.inf", 
    		"Mode=HTML", 
    		EXTRARES, 
    		"Url=/login.html", ENDITEM, 
    		"Url=/image/d6bfc596-1b3c-41aa-ac57-0c59e8f5fbbe.png", ENDITEM, 
    		LAST);
    
    
    	web_custom_request("getcode", 
    		"URL=http://8.130.52.26:8081/user/getcode", 
    		"Method=POST", 
    		"Resource=0", 
    		"RecContentType=application/json", 
    		"Referer=http://8.130.52.26:8081/login.html", 
    		"Snapshot=t56.inf", 
    		"Mode=HTML", 
    		"EncType=", 
    		EXTRARES, 
    		"Url=http://t.wg.360-api.cn/api/helpgame?app=hotrank", "Referer=", ENDITEM, 
    		"Url=http://t.wg.360-api.cn/ap/tips/browse?cver=&mid=9202afc53bcc84de173ca76f798bad1c", "Referer=", ENDITEM, 
    		"Url=http://t.wg.360-api.cn/ap/tips/guess?sence=browse_ai&mid=9202afc53bcc84de173ca76f798bad1c&cver=9.1.2.1018&gver=", "Referer=", ENDITEM, 
    		LAST);
    
    
    	web_submit_data("login", 
    		"Action=http://8.130.52.26:8081/user/login", 
    		"Method=POST", 
    		"RecContentType=application/json", 
    		"Referer=http://8.130.52.26:8081/login.html", 
    		"Snapshot=t57.inf", 
    		"Mode=HTML", 
    		ITEMDATA, 
    		"Name=username", "Value=admin", ENDITEM, 
    		"Name=password", "Value=123456", ENDITEM, 
    		"Name=code", "Value=q43py", ENDITEM, 
    		LAST);
    
    
    	web_url("myblog_list.html", 
    		"URL=http://8.130.52.26:8081/myblog_list.html", 
    		"Resource=0", 
    		"Referer=http://8.130.52.26:8081/login.html", 
    		"Snapshot=t61.inf", 
    		"Mode=HTML", 
    		LAST);
    
    
    	web_custom_request("getuserinfo", 
    		"URL=http://8.130.52.26:8081/user/getuserinfo", 
    		"Method=POST", 
    		"Resource=0", 
    		"RecContentType=application/json", 
    		"Referer=http://8.130.52.26:8081/myblog_list.html", 
    		"Snapshot=t63.inf", 
    		"Mode=HTML", 
    		"EncType=", 
    		LAST);
    
    	web_custom_request("mylist", 
    		"URL=http://8.130.52.26:8081/art/mylist", 
    		"Method=POST", 
    		"Resource=0", 
    		"RecContentType=application/json", 
    		"Referer=http://8.130.52.26:8081/myblog_list.html", 
    		"Snapshot=t64.inf", 
    		"Mode=HTML", 
    		"EncType=", 
    		LAST);
    
    
    	web_submit_data("get_total_rcount_and_comment", 
    		"Action=http://8.130.52.26:8081/user/get_total_rcount_and_comment", 
    		"Method=POST", 
    		"RecContentType=application/json", 
    		"Referer=http://8.130.52.26:8081/myblog_list.html", 
    		"Snapshot=t67.inf", 
    		"Mode=HTML", 
    		ITEMDATA, 
    		"Name=uid", "Value=3", ENDITEM, 
    		LAST);
    
    	return 0;
    }

## 4.3 在测试脚本中增加事务、集合点、参数化 ##

为了更好地在进行性能测试的时候收集相关数据，因此我们在录制的脚步中增加一些额外的东西：

*  **事务：** 事务的响应时间和每秒事务通过数是衡量服务器性能的重要指标；
 *  **集合点：** 让所有的虚拟用户的都运行到集合点后，再一起运行。插入集合点是为了衡量在加重负载的情况下服务器的性能情况。
 *  **参数化：** 提供参数化可以传递不同的用户数据，同时也可以使得脚本运动更多的次数。

下面的修改的脚本代码：

Action()
    {
        
    
    	// 开启关于整个登录的事务	
    	lr_start_transaction("login_transaction");
    
    	web_url("login.html", 
    		"URL=http://8.130.52.26:8081/login.html", 
    		"Resource=0", 
    		"Referer=", 
    		"Snapshot=t53.inf", 
    		"Mode=HTML", 
    		EXTRARES, 
    		"Url=/login.html", ENDITEM, 
    		"Url=/image/d6bfc596-1b3c-41aa-ac57-0c59e8f5fbbe.png", ENDITEM, 
    		LAST);
    
    
    	web_custom_request("getcode", 
    		"URL=http://8.130.52.26:8081/user/getcode", 
    		"Method=POST", 
    		"Resource=0", 
    		"RecContentType=application/json", 
    		"Referer=http://8.130.52.26:8081/login.html", 
    		"Snapshot=t56.inf", 
    		"Mode=HTML", 
    		"EncType=", 
    		EXTRARES, 
    		"Url=http://t.wg.360-api.cn/api/helpgame?app=hotrank", "Referer=", ENDITEM, 
    		"Url=http://t.wg.360-api.cn/ap/tips/browse?cver=&mid=9202afc53bcc84de173ca76f798bad1c", "Referer=", ENDITEM, 
    		"Url=http://t.wg.360-api.cn/ap/tips/guess?sence=browse_ai&mid=9202afc53bcc84de173ca76f798bad1c&cver=9.1.2.1018&gver=", "Referer=", ENDITEM, 
    		LAST);
    
    	// 设置登录集合点
    	lr_rendezvous("login_rendezvous");
    
    	
    	// 开启登录操作事务
    	lr_start_transaction("input_transaction");
    
    	web_submit_data("login", 
    		"Action=http://8.130.52.26:8081/user/login", 
    		"Method=POST", 
    		"RecContentType=application/json", 
    		"Referer=http://8.130.52.26:8081/login.html", 
    		"Snapshot=t57.inf", 
    		"Mode=HTML", 
    		ITEMDATA, 
    		// 用户名和密码参数化
    		"Name=username", "Value={username}", ENDITEM, 
    		"Name=password", "Value={password}", ENDITEM, 
    		"Name=code", "Value=q43py", ENDITEM, 
    		LAST);
    	
    	// 结束登录操作事务
    	lr_end_transaction("input_transaction", LR_AUTO);
    
    	// 结束登录事务
    	lr_end_transaction("login_transaction", LR_AUTO);
    
    
    	web_url("myblog_list.html", 
    		"URL=http://8.130.52.26:8081/myblog_list.html", 
    		"Resource=0", 
    		"Referer=http://8.130.52.26:8081/login.html", 
    		"Snapshot=t61.inf", 
    		"Mode=HTML", 
    		LAST);
    
    
    	web_custom_request("getuserinfo", 
    		"URL=http://8.130.52.26:8081/user/getuserinfo", 
    		"Method=POST", 
    		"Resource=0", 
    		"RecContentType=application/json", 
    		"Referer=http://8.130.52.26:8081/myblog_list.html", 
    		"Snapshot=t63.inf", 
    		"Mode=HTML", 
    		"EncType=", 
    		LAST);
    
    	web_custom_request("mylist", 
    		"URL=http://8.130.52.26:8081/art/mylist", 
    		"Method=POST", 
    		"Resource=0", 
    		"RecContentType=application/json", 
    		"Referer=http://8.130.52.26:8081/myblog_list.html", 
    		"Snapshot=t64.inf", 
    		"Mode=HTML", 
    		"EncType=", 
    		LAST);
    
    
    	web_submit_data("get_total_rcount_and_comment", 
    		"Action=http://8.130.52.26:8081/user/get_total_rcount_and_comment", 
    		"Method=POST", 
    		"RecContentType=application/json", 
    		"Referer=http://8.130.52.26:8081/myblog_list.html", 
    		"Snapshot=t67.inf", 
    		"Mode=HTML", 
    		ITEMDATA, 
    		"Name=uid", "Value=3", ENDITEM, 
    		LAST);
    
    	return 0;
    }

**通过运行可以发现：**

![92206815884d40acb7adcc876f557886.png][]

## 4.4 创建性能测试场景 ##

创建性能测试场景使用到的工具是 Controller，设置步骤如下：

**1. 设置别发数量**  
![68ee15b299b04b4e97e57be145540fd8.png][]  
**2. 初始化虚拟用户**

![e5de417522e247b8ad36fefcb825bf0b.png][]

**3. 设置开始运行的虚拟用户**

![8b8745be227c48a6aaabcd7af9aa4ef9.png][]  
**4. 设置运行时间**  
![1cb335132bc14a28870a42eeddab44e0.png][]  
**5. 设置结束策略**

![626de7dd01d64de9a10c6696f528fb0d.png][]

**当设置完所有的策略之后，可以发现右侧的交互式进度图如下图所示：**  
![b1adec05d47b49b280d9f4b29a45d550.png][]  
前面部分上升梯形代码虚拟用户陆续上台运行，而后面的下降梯形则代表虚拟用户陆续退出运行，每个间隔大概是3s，而中间平稳的线条则代表每个虚拟用户运行的时长，大概是5分钟。

**运行场景：**

当所有策略设置完成之后，切换至 `Run`，然后点击 `Start Scenario` 运行，然后等待结束：  
![4de44495a7384524b65313fda8e3a7af.png][]

**场景运行结果：**  
![733414d817f04d3f881080c1377a2111.png][]

## 4.5 生成并分析测试报告 ##

但这种的场景结束之后，可以通过 Analysis 工具自动生成性能测试报告。

**1. 总体报告**

![0a3a9291afda406dbcf86f4d05e5fa29.png][]

**2. 运行虚拟用户数**  
![ad328f881df94553b93287053780b291.png][]  
通过显示的虚拟用户数量可以判断出哪个时间段服务器负载最大（上图00:25 ~ 05:20负载最大）。

**3. 每秒点击数折线图**

![d89f6a2f5c874c3f9081bbfd45d3abf3.png][]  
每秒点击数代表用户每秒向 Web 服务器提交的 HTTP 请求数。点击率越大，服务器压力越大。这里的点击并不是鼠标的一次点击，一次点击可能有多次 HTTP 请求。

**4. 吞吐量折现图**

![5a9b5206085f4ac5a62f81390e80441b.png][]  
吞吐量曲线的走势大致无点击数走势相同，原因是点击之后就会产生请求与响应，通过吞吐量就可以判断出服务器的承受能力。

**5. 总体事务图示**  
![040ea4f18b2745bf89aa594b856d19fe.png][]

**6. 平均每秒事务**  
![a23c6e5624df4eed8b09b7e282e4562d.png][]  
TPS 是指每秒系统能够处理的事务数。它是衡量系统处理能力的重要指标。当压力加大时，TPS曲线如果变化缓慢或者有平坦的趋势，很有可能是服务器开始出现瓶颈了。如果环境没有发生大的变化，对于同一系统会存在一个最大处理事务能力，它并不随着并发用户的增减而改  
变。

**7. 平均事务响应时间**  
![f2f97f4cc48a4a4385bf8f4c26e25c5d.png][]  
平均事务响应时间反应了系统处理事务的能力，同样也是衡量系统性能的重要指标。

**8. HTTP每秒响应**

![f55271dd1adc47c1906ed7f1a5a32012.png][]  
HTTP 每秒响应数量展示了系处理任务并返回数据的能力，同时是衡量系统性能的重要指标。

[dfadba691ad24a229d3c02c77a3700e9.png]: https://img-blog.csdnimg.cn/dfadba691ad24a229d3c02c77a3700e9.png
[ad3c6e38e6b544a58fbc48cd45bfc394.png]: https://img-blog.csdnimg.cn/ad3c6e38e6b544a58fbc48cd45bfc394.png
[56f406be3fca44efb8cb0114417ced34.png]: https://img-blog.csdnimg.cn/56f406be3fca44efb8cb0114417ced34.png
[6b7cfbff6cb64c9d913894ff2d8b7b75.png]: https://img-blog.csdnimg.cn/6b7cfbff6cb64c9d913894ff2d8b7b75.png
[9ed972f93ab24564a4def9edd7bded60.png]: https://img-blog.csdnimg.cn/9ed972f93ab24564a4def9edd7bded60.png
[2ad7365bb95749388a5fa77106991594.png]: https://img-blog.csdnimg.cn/2ad7365bb95749388a5fa77106991594.png
[c9e1ff538e5a4db1ac6e596c331d44cb.png]: https://img-blog.csdnimg.cn/c9e1ff538e5a4db1ac6e596c331d44cb.png
[a23afd77e3db4cfa898b81c7e1846fe1.png]: https://img-blog.csdnimg.cn/a23afd77e3db4cfa898b81c7e1846fe1.png
[c109fa287d1d458eaac14d0d2763ea14.png]: https://img-blog.csdnimg.cn/c109fa287d1d458eaac14d0d2763ea14.png
[9e7a7f6efcdc4e60b4c104173be54100.png]: https://img-blog.csdnimg.cn/9e7a7f6efcdc4e60b4c104173be54100.png
[f6f0f28fd4394063aa8fc00a9b849056.png]: https://img-blog.csdnimg.cn/f6f0f28fd4394063aa8fc00a9b849056.png
[140c57a1260d4135a11cc53b6b1c2fd9.png]: https://img-blog.csdnimg.cn/140c57a1260d4135a11cc53b6b1c2fd9.png
[866ca8c3c3ef4dd79f91151026eba2d9.png]: https://img-blog.csdnimg.cn/866ca8c3c3ef4dd79f91151026eba2d9.png
[3e541bdc605d49f7a78bd365830e5e05.png]: https://img-blog.csdnimg.cn/3e541bdc605d49f7a78bd365830e5e05.png
[8389511453d94bfea5b22bdc9a9a10ce.png]: https://img-blog.csdnimg.cn/8389511453d94bfea5b22bdc9a9a10ce.png
[dc1b8e8c89a741769c13ff4bfa2e9a78.png]: https://img-blog.csdnimg.cn/dc1b8e8c89a741769c13ff4bfa2e9a78.png
[1ce00c92bbcb4e54b4a2dc744dd74aac.png]: https://img-blog.csdnimg.cn/1ce00c92bbcb4e54b4a2dc744dd74aac.png
[f915c5f0eb78491dbca06abad732a1d0.png]: https://img-blog.csdnimg.cn/f915c5f0eb78491dbca06abad732a1d0.png
[61e587f4a3084c149b33fd2e56feded1.png]: https://img-blog.csdnimg.cn/61e587f4a3084c149b33fd2e56feded1.png
[5cb1925287c74e9d91d2196f7a8aa69c.png]: https://img-blog.csdnimg.cn/5cb1925287c74e9d91d2196f7a8aa69c.png
[8571d7519ff943b3b4de93e1a1bb8d75.png]: https://img-blog.csdnimg.cn/8571d7519ff943b3b4de93e1a1bb8d75.png
[77bff3b6d6f245448a9c4c69e3897458.png]: https://img-blog.csdnimg.cn/77bff3b6d6f245448a9c4c69e3897458.png
[f2407dd92f2640e7bf38bbacacdc0d07.png]: https://img-blog.csdnimg.cn/f2407dd92f2640e7bf38bbacacdc0d07.png
[304e0d4a386948cca9870e65837e533f.png]: https://img-blog.csdnimg.cn/304e0d4a386948cca9870e65837e533f.png
[208a7f20af464acbab45866570c311a4.png]: https://img-blog.csdnimg.cn/208a7f20af464acbab45866570c311a4.png
[7c67fcb2189e4a92b8ec7c1fb6375403.png]: https://img-blog.csdnimg.cn/7c67fcb2189e4a92b8ec7c1fb6375403.png
[463f66edf86e483dbb53a9c5df158252.png]: https://img-blog.csdnimg.cn/463f66edf86e483dbb53a9c5df158252.png
[460de14b69b8449da12b7d4089d3348e.png]: https://img-blog.csdnimg.cn/460de14b69b8449da12b7d4089d3348e.png
[2d94b8f529f94ad8a61eca59cad6c12e.png]: https://img-blog.csdnimg.cn/2d94b8f529f94ad8a61eca59cad6c12e.png
[357679ffd5d64c31a7c707299168a1eb.png]: https://img-blog.csdnimg.cn/357679ffd5d64c31a7c707299168a1eb.png
[8a19253f28b640eaa43b0f6362012e92.png]: https://img-blog.csdnimg.cn/8a19253f28b640eaa43b0f6362012e92.png
[4dda3fcbf346457289292271a9efe0f5.png]: https://img-blog.csdnimg.cn/4dda3fcbf346457289292271a9efe0f5.png
[bcfcb6975ffa47b9ab135c3c4fdc358a.png]: https://img-blog.csdnimg.cn/bcfcb6975ffa47b9ab135c3c4fdc358a.png
[3dcd7d0484204cea90dc455aa24e9cf0.png]: https://img-blog.csdnimg.cn/3dcd7d0484204cea90dc455aa24e9cf0.png
[bce1b784467e4e858a0a7ed4e9a1599e.png]: https://img-blog.csdnimg.cn/bce1b784467e4e858a0a7ed4e9a1599e.png
[602b78fa24a04908b6efa26226866878.png]: https://img-blog.csdnimg.cn/602b78fa24a04908b6efa26226866878.png
[76f6956435b343729ca3b38773623a6f.png]: https://img-blog.csdnimg.cn/76f6956435b343729ca3b38773623a6f.png
[3661ed6d1a404e669a591407c8a022f6.png]: https://img-blog.csdnimg.cn/3661ed6d1a404e669a591407c8a022f6.png
[9f96e3ba9d4042b9ad22b0f1745d49ce.png]: https://img-blog.csdnimg.cn/9f96e3ba9d4042b9ad22b0f1745d49ce.png
[99faa74213694387be492019e9a66f43.png]: https://img-blog.csdnimg.cn/99faa74213694387be492019e9a66f43.png
[9d041e68d54947148516a540443877f6.png]: https://img-blog.csdnimg.cn/9d041e68d54947148516a540443877f6.png
[2e553ec7a3434ff483985a104444231e.png]: https://img-blog.csdnimg.cn/2e553ec7a3434ff483985a104444231e.png
[7c7322416dff47f586674eac883cd30a.png]: https://img-blog.csdnimg.cn/7c7322416dff47f586674eac883cd30a.png
[88b6af89ce9d4da9bca3e32f8f64001f.png]: https://img-blog.csdnimg.cn/88b6af89ce9d4da9bca3e32f8f64001f.png
[03174ea931184d3da200b942d1b6fccb.png]: https://img-blog.csdnimg.cn/03174ea931184d3da200b942d1b6fccb.png
[e891d97a43fb43f6a5f6b367619c8517.png]: https://img-blog.csdnimg.cn/e891d97a43fb43f6a5f6b367619c8517.png
[11a770ebe52e45cdae9c8747dd1ff8b0.png]: https://img-blog.csdnimg.cn/11a770ebe52e45cdae9c8747dd1ff8b0.png
[e243511e21014114a3feb8714d63a3aa.png]: https://img-blog.csdnimg.cn/e243511e21014114a3feb8714d63a3aa.png
[5d10f59fe0fe4bcbb81445d1c5eec83e.png]: https://img-blog.csdnimg.cn/5d10f59fe0fe4bcbb81445d1c5eec83e.png
[06968eb2c7164afb803ac6571c7bca49.png]: https://img-blog.csdnimg.cn/06968eb2c7164afb803ac6571c7bca49.png
[8294616ce4bb45ecaa7387bd919a8d96.png]: https://img-blog.csdnimg.cn/8294616ce4bb45ecaa7387bd919a8d96.png
[8c9e6fa66f7e4a98ba5811469fc8033d.png]: https://img-blog.csdnimg.cn/8c9e6fa66f7e4a98ba5811469fc8033d.png
[0ba4b0b997774c10ae9bcc3dcc4662b9.png]: https://img-blog.csdnimg.cn/0ba4b0b997774c10ae9bcc3dcc4662b9.png
[17f5657b1628492a9965c781c0823118.png]: https://img-blog.csdnimg.cn/17f5657b1628492a9965c781c0823118.png
[2d0575a6c9624af894e0bf284fe9d8bc.png]: https://img-blog.csdnimg.cn/2d0575a6c9624af894e0bf284fe9d8bc.png
[d720a0f570c942cbba72b7e13308ab64.png]: https://img-blog.csdnimg.cn/d720a0f570c942cbba72b7e13308ab64.png
[c7dac5611955471fa9f98b05fbca1349.png]: https://img-blog.csdnimg.cn/c7dac5611955471fa9f98b05fbca1349.png
[1bf3b535061440eeb284082148cb39a4.png]: https://img-blog.csdnimg.cn/1bf3b535061440eeb284082148cb39a4.png
[9276c834bedf49398af01ac1f59ca1e1.png]: https://img-blog.csdnimg.cn/9276c834bedf49398af01ac1f59ca1e1.png
[1e58a6417b3d4afa9e46a52f55d5e477.png]: https://img-blog.csdnimg.cn/1e58a6417b3d4afa9e46a52f55d5e477.png
[d1403cc142f54a48ad33487b40d228d7.png]: https://img-blog.csdnimg.cn/d1403cc142f54a48ad33487b40d228d7.png
[78205b0bd1eb43e99b82407c69c406f7.png]: https://img-blog.csdnimg.cn/78205b0bd1eb43e99b82407c69c406f7.png
[29f1fcf4e4e94100be8bdda054213e4b.png]: https://img-blog.csdnimg.cn/29f1fcf4e4e94100be8bdda054213e4b.png
[59695c30db8d4ec2b25a39fd9747591a.png]: https://img-blog.csdnimg.cn/59695c30db8d4ec2b25a39fd9747591a.png
[c1d34377a04941ea831873cdcf65781c.png]: https://img-blog.csdnimg.cn/c1d34377a04941ea831873cdcf65781c.png
[a1f668e734de4b448a14f58c33998d4a.png]: https://img-blog.csdnimg.cn/a1f668e734de4b448a14f58c33998d4a.png
[5b717b90474d4e2d9a096e2cdd315ecf.png]: https://img-blog.csdnimg.cn/5b717b90474d4e2d9a096e2cdd315ecf.png
[e9a456c6e06f49da81cfec6eae3fb26a.png]: https://img-blog.csdnimg.cn/e9a456c6e06f49da81cfec6eae3fb26a.png
[68b3624328ef482083d74237a1ed5d5a.png]: https://img-blog.csdnimg.cn/68b3624328ef482083d74237a1ed5d5a.png
[22f32c2629314ad5b0dfe252c64f5b58.png]: https://img-blog.csdnimg.cn/22f32c2629314ad5b0dfe252c64f5b58.png
[e056a09b2381478aa17f1f1faadad895.png]: https://img-blog.csdnimg.cn/e056a09b2381478aa17f1f1faadad895.png
[b4f63e009ac545928987b28254786d98.png]: https://img-blog.csdnimg.cn/b4f63e009ac545928987b28254786d98.png
[a6053687363b405ebc0db7e55c773d2e.png]: https://img-blog.csdnimg.cn/a6053687363b405ebc0db7e55c773d2e.png
[53295cd311374e9aaa42fa3aa2582104.png]: https://img-blog.csdnimg.cn/53295cd311374e9aaa42fa3aa2582104.png
[44b122c5ddb9403f92f21196acad6781.png]: https://img-blog.csdnimg.cn/44b122c5ddb9403f92f21196acad6781.png
[d962843e5c2c4b9998c91276f4837142.png]: https://img-blog.csdnimg.cn/d962843e5c2c4b9998c91276f4837142.png
[ef944a5c31cc44229680edf8071cc51f.png]: https://img-blog.csdnimg.cn/ef944a5c31cc44229680edf8071cc51f.png
[73513cd178444d19a2f9c10d2463d27b.png]: https://img-blog.csdnimg.cn/73513cd178444d19a2f9c10d2463d27b.png
[424f405240ea4201ab11fb6b634513cf.png]: https://img-blog.csdnimg.cn/424f405240ea4201ab11fb6b634513cf.png
[db64da69b84543249e23073ef3911704.png]: https://img-blog.csdnimg.cn/db64da69b84543249e23073ef3911704.png
[31e737d94c48450c89290fce371999b5.png]: https://img-blog.csdnimg.cn/31e737d94c48450c89290fce371999b5.png
[c4d7c42c5a9e42a6a48e130ca3f1a8e5.png]: https://img-blog.csdnimg.cn/c4d7c42c5a9e42a6a48e130ca3f1a8e5.png
[39cb6321a1fe44ee9b65377fe5259e27.png]: https://img-blog.csdnimg.cn/39cb6321a1fe44ee9b65377fe5259e27.png
[22c35e6c9b664f678a9d418ef53e82dd.png]: https://img-blog.csdnimg.cn/22c35e6c9b664f678a9d418ef53e82dd.png
[73f799333a2a4555b508fc135d530d54.png]: https://img-blog.csdnimg.cn/73f799333a2a4555b508fc135d530d54.png
[afc5fb240e864bd9854499ce633b88fe.png]: https://img-blog.csdnimg.cn/afc5fb240e864bd9854499ce633b88fe.png
[e6ba4db3f01e4e7dbf1c678e36dff635.png]: https://img-blog.csdnimg.cn/e6ba4db3f01e4e7dbf1c678e36dff635.png
[d9c7522a42ef4ddbb6a1a1cca597874f.png]: https://img-blog.csdnimg.cn/d9c7522a42ef4ddbb6a1a1cca597874f.png
[499cdd26d9ad4e10ab8d3a7802286511.png]: https://img-blog.csdnimg.cn/499cdd26d9ad4e10ab8d3a7802286511.png
[1101834ec04143b197970078d1830fc6.png]: https://img-blog.csdnimg.cn/1101834ec04143b197970078d1830fc6.png
[3d0fbd6d043144e09c4a28b1e8089f23.png]: https://img-blog.csdnimg.cn/3d0fbd6d043144e09c4a28b1e8089f23.png
[ef37dd41b1f54c319aa8b60fc40067b4.png]: https://img-blog.csdnimg.cn/ef37dd41b1f54c319aa8b60fc40067b4.png
[27b85f9494a94f3aad41456e3baffc8b.png]: https://img-blog.csdnimg.cn/27b85f9494a94f3aad41456e3baffc8b.png
[f7afa98090a545df8e4a584f570181b7.png]: https://img-blog.csdnimg.cn/f7afa98090a545df8e4a584f570181b7.png
[eb57826d7fa1453b860bdc6ce2ec7cd8.png]: https://img-blog.csdnimg.cn/eb57826d7fa1453b860bdc6ce2ec7cd8.png
[f026515b0960468a8ab65b73c7bd4f11.png]: https://img-blog.csdnimg.cn/f026515b0960468a8ab65b73c7bd4f11.png
[a3fe2db73c9842f5903fddb123dc37e9.png]: https://img-blog.csdnimg.cn/a3fe2db73c9842f5903fddb123dc37e9.png
[aa73b087ccda400d8f9bbe1e5b437ff2.png]: https://img-blog.csdnimg.cn/aa73b087ccda400d8f9bbe1e5b437ff2.png
[6b45c0130f924228b938ed133cf67a58.png]: https://img-blog.csdnimg.cn/6b45c0130f924228b938ed133cf67a58.png
[f6f81291272b48009defe92b79d53f65.png]: https://img-blog.csdnimg.cn/f6f81291272b48009defe92b79d53f65.png
[540128554cfc4e9db1658f72c3a450b5.png]: https://img-blog.csdnimg.cn/540128554cfc4e9db1658f72c3a450b5.png
[01d709765ba3492391f186924b36111e.png]: https://img-blog.csdnimg.cn/01d709765ba3492391f186924b36111e.png
[2ceeadf090924c2eae4f22dbce9b4619.png]: https://img-blog.csdnimg.cn/2ceeadf090924c2eae4f22dbce9b4619.png
[f231e4de28b44ebfbcad9f083815b43f.png]: https://img-blog.csdnimg.cn/f231e4de28b44ebfbcad9f083815b43f.png
[0092a412cf824793aee39751db8420a7.png]: https://img-blog.csdnimg.cn/0092a412cf824793aee39751db8420a7.png
[f84e8444caab4aefa77ae5e650965b9f.png]: https://img-blog.csdnimg.cn/f84e8444caab4aefa77ae5e650965b9f.png
[1a7329b20e374c4f8f8d84e087a60163.png]: https://img-blog.csdnimg.cn/1a7329b20e374c4f8f8d84e087a60163.png
[363b411a055d413b9be7a1844df259dd.png]: https://img-blog.csdnimg.cn/363b411a055d413b9be7a1844df259dd.png
[a76c20e850e0447ca77b6d1dbf4d4ef1.png]: https://img-blog.csdnimg.cn/a76c20e850e0447ca77b6d1dbf4d4ef1.png
[4ebab74ee9c148a4a9b63f7b7d07c4b2.png]: https://img-blog.csdnimg.cn/4ebab74ee9c148a4a9b63f7b7d07c4b2.png
[0260cc2a04224e7483448dce20368411.png]: https://img-blog.csdnimg.cn/0260cc2a04224e7483448dce20368411.png
[33e9027c3dcd48db90380287b6c03b2c.png]: https://img-blog.csdnimg.cn/33e9027c3dcd48db90380287b6c03b2c.png
[486228e820514c5385b61a6881504c3d.png]: https://img-blog.csdnimg.cn/486228e820514c5385b61a6881504c3d.png
[d941fd26f88a4b59952e3b32677b59ac.png]: https://img-blog.csdnimg.cn/d941fd26f88a4b59952e3b32677b59ac.png
[c238c3f097dd48d982309ed3485a3456.png]: https://img-blog.csdnimg.cn/c238c3f097dd48d982309ed3485a3456.png
[94daf4ec49054f92ac8b84c883830fcb.png]: https://img-blog.csdnimg.cn/94daf4ec49054f92ac8b84c883830fcb.png
[92206815884d40acb7adcc876f557886.png]: https://img-blog.csdnimg.cn/92206815884d40acb7adcc876f557886.png
[68ee15b299b04b4e97e57be145540fd8.png]: https://img-blog.csdnimg.cn/68ee15b299b04b4e97e57be145540fd8.png
[e5de417522e247b8ad36fefcb825bf0b.png]: https://img-blog.csdnimg.cn/e5de417522e247b8ad36fefcb825bf0b.png
[8b8745be227c48a6aaabcd7af9aa4ef9.png]: https://img-blog.csdnimg.cn/8b8745be227c48a6aaabcd7af9aa4ef9.png
[1cb335132bc14a28870a42eeddab44e0.png]: https://img-blog.csdnimg.cn/1cb335132bc14a28870a42eeddab44e0.png
[626de7dd01d64de9a10c6696f528fb0d.png]: https://img-blog.csdnimg.cn/626de7dd01d64de9a10c6696f528fb0d.png
[b1adec05d47b49b280d9f4b29a45d550.png]: https://img-blog.csdnimg.cn/b1adec05d47b49b280d9f4b29a45d550.png
[4de44495a7384524b65313fda8e3a7af.png]: https://img-blog.csdnimg.cn/4de44495a7384524b65313fda8e3a7af.png
[733414d817f04d3f881080c1377a2111.png]: https://img-blog.csdnimg.cn/733414d817f04d3f881080c1377a2111.png
[0a3a9291afda406dbcf86f4d05e5fa29.png]: https://img-blog.csdnimg.cn/0a3a9291afda406dbcf86f4d05e5fa29.png
[ad328f881df94553b93287053780b291.png]: https://img-blog.csdnimg.cn/ad328f881df94553b93287053780b291.png
[d89f6a2f5c874c3f9081bbfd45d3abf3.png]: https://img-blog.csdnimg.cn/d89f6a2f5c874c3f9081bbfd45d3abf3.png
[5a9b5206085f4ac5a62f81390e80441b.png]: https://img-blog.csdnimg.cn/5a9b5206085f4ac5a62f81390e80441b.png
[040ea4f18b2745bf89aa594b856d19fe.png]: https://img-blog.csdnimg.cn/040ea4f18b2745bf89aa594b856d19fe.png
[a23c6e5624df4eed8b09b7e282e4562d.png]: https://img-blog.csdnimg.cn/a23c6e5624df4eed8b09b7e282e4562d.png
[f2f97f4cc48a4a4385bf8f4c26e25c5d.png]: https://img-blog.csdnimg.cn/f2f97f4cc48a4a4385bf8f4c26e25c5d.png
[f55271dd1adc47c1906ed7f1a5a32012.png]: https://img-blog.csdnimg.cn/f55271dd1adc47c1906ed7f1a5a32012.png