目录
一. 项目背景
二、项目功能
三、测试计划
1. 功能测试
1.1 测试用例
1.2 执行测试部分操作截图
2. 使用selenium进行自动化测试
2.1 添加相关依赖
2.2 登录页面测试
3.3 注册页面测试
3.4 博客列表页面测试
3.5 博客详情页测试
3.6 博客编辑页面测试
3.7 个人主页测试
3. 使用jmeter进行性能测试
3.1 jmeter基础配置
3.2 页面接口测试
3.2.1 测试博客登录页接口
3.2.2 测试博客列表接口
3.2.3 测试博客详情页接口
3.3 性能测试
一. 项目背景
-
基于SpringBoot框架开发的个人博客系统，采用数据库存储数据并部署于云服务器。前端包含六个核心页面：登录页、注册页、个人主页、博客列表页、博客详情页和博客编辑页。系统实现了完整的用户功能体系，包括：账号注册登录、个人信息管理、博客撰写编辑、账号注销及强制登录验证等功能。
-
该系统为个人用户提供了简洁高效的博客记录平台，支持完整的内容展示功能。每篇博客的时间戳、标题、正文及作者信息均可清晰查阅，满足用户的基本写作和阅读需求。
二、项目功能
该个人博客系统主要实现了以下几个功能：登录、注册、修改个人信息、注销、编写博客以及删除博客等功能。
1.登录功能：输入用户名以及密码，登录成功后就会跳转到列表页面。登录页面的右上角有主页和写博客两个按钮，但是在未登录情况下按下均只会跳转到登录页面。
2.注册功能：在登录页面点击注册按钮后跳转到注册页面，在注册页面输入用户名、密码、头像、gitee地址，用户名要求必须是纯字符并且长度满足4~16位之间，密码要求6位~12位之间，头像必须上传，gitee地址可以不输入。
3.修改个人信息功能：登录成功后进入了博客主页面，此时点击头像进入个人信息页面，可点击编辑个人信息对用户名、密码、gitee地址以及头像都可以进行修改。
4.注销功能：登录成功后，点击右上角的注销按钮，可退出当前用户的登录跳转到登录页。
5.编写博客功能：登录后，点击右上角的写博客，进入博客编辑页面，支持使用MarkDown格式，编写完成后可以点击发布，后续也可以对发布的博客进行修改。
6.删除博客功能：可以将当前登录用户编写的博客进行删除操作。
三、测试计划
1. 功能测试
1.1 测试用例
1.2 执行测试部分操作截图
1）正常登录，跳转到博客列表页
2）注册成功，并使用注册的账号进行登录
3）对个人信息进行修改
4）编写博客，并发布
5）对博客进行修改、删除
6）注销，点击后返回到登录页
2. 使用selenium进行自动化测试
自动化测试代码地址：自动化测试: 自动化测试代码 - Gitee.com
下面将展示UI自动化测试的部分相关代码
2.1 添加相关依赖
<dependencies>
<!--驱动管理-->
<dependency>
<groupId>io.github.bonigarcia</groupId>
<artifactId>webdrivermanager</artifactId>
<version>5.8.0</version>
<scope>test</scope>
</dependency>
<!--安装selenium库-->
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>4.0.0</version>
</dependency>
<!--屏幕截图-->
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>
</dependencies>2.2 登录页面测试
/**
* 页面可以正常显示
*/
public void checkPageRight() throws IOException {
// 检擦菜单
driver.findElement(By.cssSelector("body > div.nav > a:nth-child(4)"));
// 检查登录框
driver.findElement(By.cssSelector("#username"));// 账号输入框
driver.findElement(By.cssSelector("#password"));// 密码输入框
driver.findElement(By.cssSelector("#submit"));// 提交按钮
driver.findElement(By.cssSelector("#register"));// 注册按钮
screenShot(Thread.currentThread().getStackTrace()[1].getMethodName());
}/**
* 成功登录
*/
public void loginSuccess() throws IOException {
// 先清空框中的内容
driver.findElement(By.cssSelector("#username")).clear();
driver.findElement(By.cssSelector("#password")).clear();
driver.findElement(By.cssSelector("#username")).sendKeys("zhangsan");// 账号输入框
driver.findElement(By.cssSelector("#password")).sendKeys("123456");// 密码输入框
driver.findElement(By.cssSelector("#submit")).click();// 提交按钮
// 跳转页面后检查新页面的元素是否存在来判断是否跳转成功
driver.findElement(By.cssSelector("body > div.nav > a:nth-child(6)"));// 检查注销按钮是否存在
driver.findElement(By.cssSelector("body > div.container > div.right > div:nth-child(1) > a"));// 检查查看全文按钮是否存在
screenShot(Thread.currentThread().getStackTrace()[1].getMethodName());
}/**
* 异常登录
* 举例：账号正确，密码错误
*/
public void loginFail() throws IOException {
driver.findElement(By.cssSelector("#username")).sendKeys("zhangsan");// 账号输入框
driver.findElement(By.cssSelector("#password")).sendKeys("1234567");// 密码输入框
driver.findElement(By.cssSelector("#submit")).click();// 提交按钮
// 显示等待，等待弹窗出现
wait.until(ExpectedConditions.alertIsPresent());
// 处理弹出的窗口，等窗口出现后才能处理，否则会报错
Alert alert = driver.switchTo().alert();
alert.accept();
screenShot(Thread.currentThread().getStackTrace()[1].getMethodName());
}3.3 注册页面测试
/**
*注册成功
*/
public void checkRegisterSuc() throws InterruptedException {
// 一、注册
// 满足4-16位
driver.findElement(By.cssSelector("#username")).sendKeys("xiaoliuTest");
// 满足至少6位
driver.findElement(By.cssSelector("#password")).sendKeys("123456");
// 上传头像
driver.findElement(By.cssSelector("#avatar")).sendKeys("C:\\Users\\22350\\Desktop\\OIP-C.jpg");
driver.findElement(By.cssSelector("body > div.container-register > div > form > button")).click();
Thread.sleep(2000);
// 对弹窗点击确定
wait.until(ExpectedConditions.alertIsPresent());
Alert alert = driver.switchTo().alert();
alert.accept();
// 二、测试是否注册成功
driver.findElement(By.cssSelector("#username")).sendKeys("xiaoliuTest");// 账号输入框
driver.findElement(By.cssSelector("#password")).sendKeys("123456");// 密码输入框
driver.findElement(By.cssSelector("#submit")).click();// 提交按钮
Thread.sleep(2000);
// 跳转页面后检查新页面的元素是否存在来判断是否跳转成功
driver.findElement(By.cssSelector("body > div.nav > a:nth-child(6)"));// 检查注销按钮是否存在
driver.findElement(By.cssSelector("body > div.container > div.right > div:nth-child(1) > a"));// 检查查看全文按钮是否存在
} /**
* 注册失败
*/
public void checkRegisterFail() throws InterruptedException {
// 一、注册（用户名不符合）
// 用户名少于4位
driver.findElement(By.cssSelector("#username")).sendKeys("Tes");
// 满足至少6位
driver.findElement(By.cssSelector("#password")).sendKeys("123456");
// 上传头像
driver.findElement(By.cssSelector("#avatar")).sendKeys("C:\\Users\\22350\\Desktop\\OIP-C.jpg");
driver.findElement(By.cssSelector("body > div.container-register > div > form > button")).click();
Thread.sleep(2000);
// 对弹窗点击确定
wait.until(ExpectedConditions.alertIsPresent());
Alert alert = driver.switchTo().alert();
alert.accept();
}3.4 博客列表页面测试
public void checkList() throws InterruptedException {
// 检查元素的文本内容是否存在
String title = driver.findElement(By.cssSelector("body > div.container > div.right > div:nth-child(1) > div.title")).getText();
String time = driver.findElement(By.cssSelector("body > div.container > div.right > div:nth-child(1) > div.date")).getText();
String content = driver.findElement(By.cssSelector("body > div.container > div.right > div:nth-child(1) > div.desc")).getText();
String button = driver.findElement(By.cssSelector("body > div.container > div.right > div:nth-child(1) > a")).getText();
// 使用断言来判断
assert !title.isEmpty();
assert !time.isEmpty();
assert !content.isEmpty();
assert button.equals("查看全文>>");
// 检查“查看全文”按钮是否可以跳转
driver.findElement(By.cssSelector("body > div.container > div.right > div:nth-child(1) > a")).click();
// 显示等待，等待跳转后的页面的相应文本加载
WebElement element = driver.findElement(By.cssSelector("body > div.container > div.right > div > div.title"));
wait.until(ExpectedConditions.textToBePresentInElement(element, title));
// 跳转后检查 跳转后的标题是否和跳转前的标题一致
String AfterJumpTitle = driver.findElement(By.cssSelector("body > div.container > div.right > div > div.title")).getText();
assert title.equals(AfterJumpTitle);
// 将当前的url传给父类的detail，供util的子类使用
detailUrl = driver.getCurrentUrl();
// 将个人主页地址传给父类
driver.findElement(By.cssSelector("#userAvatar")).click();
loginIdUrl = driver.getCurrentUrl();
}3.5 博客详情页测试
/**
* 检查博客详情的内容
*/
public void checkPage() {
// 标题
driver.findElement(By.cssSelector("body > div.container > div.right > div > div.title"));
// 时间
driver.findElement(By.cssSelector("body > div.container > div.right > div > div.date"));
// 内容
driver.findElement(By.cssSelector("#detail"));
// 编辑按钮
driver.findElement(By.cssSelector("body > div.container > div.right > div > div.operating > button:nth-child(1)"));
// 删除按钮
driver.findElement(By.cssSelector("body > div.container > div.right > div > div.operating > button:nth-child(2)"));
} /**
* 检擦编辑按钮
*/
public void checkDetailEdit() throws InterruptedException {
// 初始标题
String title = driver.findElement(By.cssSelector("body > div.container > div.right > div > div.title")).getText();
// 点击编辑按钮
driver.findElement(By.cssSelector("body > div.container > div.right > div > div.operating > button:nth-child(1)")).click();
// 给更新的标题名后加上时间，可以防止更新的标题相同
SimpleDateFormat simp = new SimpleDateFormat("HHmmssSS");
String titleTime = simp.format(System.currentTimeMillis());
Thread.sleep(100);// 强制等待
driver.findElement(By.cssSelector("#title")).clear();
// 输入更改后的标题
driver.findElement(By.cssSelector("#title")).sendKeys("自动化测试文章" + titleTime);
// 点击提交按钮
driver.findElement(By.cssSelector("#submit")).click();
// 等待弹窗出现
wait.until(ExpectedConditions.alertIsPresent());
Alert alert = driver.switchTo().alert();
alert.accept();
// 显示等待文本加载完毕
wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("body > div.container > div.right > div > div.title")));
// 获取更新后的标题
String afterEditTitle = driver.findElement(By.cssSelector("body > div.container > div.right > div > div.title")).getText();
// 如果不相同则更新成功
assert !title.equals(afterEditTitle);
System.out.println("更新前的标题："+title);
System.out.println("更新后的标题："+afterEditTitle);
} /**
* 检查博客删除按钮
*/
public void checkDetailDel() {
// 跳转到博客详情页
driver.get(detailUrl);
driver.findElement(By.cssSelector("body > div.container > div.right > div > div.operating > button:nth-child(2)")).click();
wait.until(ExpectedConditions.alertIsPresent());
Alert alert = driver.switchTo().alert();
// 确认
alert.accept();
}3.6 博客编辑页面测试
/**
* 博客提交成功
*/
public void checkSubmitSuc() throws InterruptedException {
// 一、编写并发送一篇新文章
// 给更新的标题名后加上时间，可以防止标题相同
SimpleDateFormat simp = new SimpleDateFormat("HHmmssSS");
String titleTime = simp.format(System.currentTimeMillis());
Thread.sleep(1000);
String beforeTitle = "自动化创建的博客"+titleTime;
driver.findElement(By.cssSelector("#title")).sendKeys(beforeTitle);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("#title")));
WebElement ele = driver.findElement(By.cssSelector("#editor > div.CodeMirror.cm-s-default.CodeMirror-wrap > div.CodeMirror-scroll > div.CodeMirror-sizer > div > div > div > div.CodeMirror-code > div > pre"));
// 使用鼠标键盘操作不可互动的元素
new Actions(driver).click(ele).sendKeys("自动化输入内容").perform();
Thread.sleep(3000);
driver.findElement(By.cssSelector("#submit")).click();
// 确认发表博客成功弹窗
wait.until(ExpectedConditions.alertIsPresent());
Alert alert = driver.switchTo().alert();
alert.accept();
// 二、校验 （新发送的博客位于最后面）
// 先获取所有的博客
List<WebElement> elements = driver.findElements(By.cssSelector("body > div.container > div.right > div"));
// 获取最后一个博客
String afterTitle = driver.findElement(By.cssSelector("body > div.container > div.right > div:nth-child("+elements.size()+") > div.title")).getText();
assert beforeTitle.equals(afterTitle);
} /**
* 博客提交失败，有内容，没有标题
*/
public void checkSubmitFailNoTitle() throws InterruptedException {
// 一、编写并发送一篇新文章
// 标题为空
driver.findElement(By.cssSelector("#title"));
// 使用鼠标键盘操作不可互动的元素
WebElement ele = driver.findElement(By.cssSelector("#editor > div.CodeMirror.cm-s-default.CodeMirror-wrap > div.CodeMirror-scroll > div.CodeMirror-sizer > div > div > div > div.CodeMirror-code > div > pre"));
new Actions(driver).click(ele).sendKeys("自动化输入内容").perform();
Thread.sleep(1000);
driver.findElement(By.cssSelector("#submit")).click();
// 发送失败弹窗
wait.until(ExpectedConditions.alertIsPresent());
Alert alert = driver.switchTo().alert();
alert.accept();
}
/**
* 博客提交失败，有标题，没有内容
*/
public void checkSubmitFailNoContent() throws InterruptedException {
// 给更新的标题名后加上时间，可以防止标题相同
SimpleDateFormat simp = new SimpleDateFormat("HHmmssSS");
String titleTime = simp.format(System.currentTimeMillis());
Thread.sleep(1000);
String beforeTitle = "自动化创建的博客"+titleTime;
driver.findElement(By.cssSelector("#title")).sendKeys(beforeTitle);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("#title")));
// 将内容清空
WebElement ele = driver.findElement(By.cssSelector("#editor > div.CodeMirror.cm-s-default.CodeMirror-wrap > div.CodeMirror-scroll > div.CodeMirror-sizer > div > div > div > div.CodeMirror-code > div > pre"));
new Actions(driver).doubleClick(ele).click(ele).sendKeys(Keys.DELETE).perform();
Thread.sleep(1000);
driver.findElement(By.cssSelector("#submit")).click();
// 发送失败弹窗
wait.until(ExpectedConditions.alertIsPresent());
Alert alert = driver.switchTo().alert();
alert.accept();
}3.7 个人主页测试
/**
* 检查页面
*/
public void checkPersonPage() throws InterruptedException {
Thread.sleep(1000);
// 文章标是否存在
driver.findElement(By.cssSelector("body > div.container > div.right > div.tab-buttons > button.tab-btn.active"));
// 点击个人信息按钮
driver.findElement(By.cssSelector("body > div.container > div.right > div.tab-buttons > button:nth-child(2)")).click();
Thread.sleep(1000);
// 再点击文章按钮
driver.findElement(By.cssSelector("body > div.container > div.right > div.tab-buttons > button:nth-child(1)")).click();
Thread.sleep(1000);
} /**
* 测试编辑个人信息功能（修改用户名）
*/
public void checkPersonEdit() throws InterruptedException {
// 点击个人信息按钮
driver.findElement(By.cssSelector("body > div.container > div.right > div.tab-buttons > button:nth-child(2)")).click();
Thread.sleep(1000);
driver.findElement(By.cssSelector("#editProfileBtn")).click();
// 更改前的用户名
String beforeName = driver.findElement(By.cssSelector("body > div.container > div.left > div > h3")).getText();
driver.findElement(By.cssSelector("#editUsername")).clear();
// 更改后的用户名
String afterName = "zhangsana";
driver.findElement(By.cssSelector("#editUsername")).sendKeys(afterName);
// 点击保存按钮
driver.findElement(By.cssSelector("body > div.container > div.right > div.action-btns > button.save-btn")).click();
wait.until(ExpectedConditions.alertIsPresent());
Alert alert = driver.switchTo().alert();
alert.accept();
Thread.sleep(1000);
String temp = driver.findElement(By.cssSelector("body > div.container > div.left > div > h3")).getText();
assert !beforeName.equals(temp);
}
3. 使用jmeter进行性能测试
3.1 jmeter基础配置
1）打开jmeter后，首先创建一个线程组：
2）设置HTTP请求默认值：
3）添加JSON断言：
要求测试的返回结果状态必须是SUCCESS
比如：
只有code的值位SUCCESS才显示这次的接口请求测试成功
以下演示部分测试
3.2 页面接口测试
3.2.1 测试博客登录页接口
进行登录接口的测试：
测试结果：
3.2.2 测试博客列表接口
结果返回都正确
3.2.3 测试博客详情页接口
3.3 性能测试
聚合报告：
相应时间：
吞吐量：
生成性能测试报告：
![BUUCTF[极客大挑战 2019]EasySQL 1题解](https://i-blog.csdnimg.cn/direct/f06d142a379242829520fed9e25d337c.png)
