目录
一、项目背景
灵悟之窗博客系统采用前后端分离的方法来实现,同时使用了数据库来存储相关的数据。前端主要有七个页面构成:注册页,登录页,文章列表页,文章详情页,文章草稿页,文章编辑(修改)页和文章发布页。以上模拟实现了最简单的博客系统。其实现了以下的主要功能:登录、新增文章、对自己文章的删改查、查看他人文章、注销登录并使用Cookie完成了验证登录校验等功能。
但该项目没有点赞文章,筛选文章,找回密码等功能,且用户没法自行设置头像
二、项目功能
这款博客系统主要实现了以下功能:注册、登录、注销、保存草稿、返回主页、写文章、修改/删除文章、查看文章详情,并支持Markdown编辑器。
- 注册功能:用户可以通过注册页面创建新账户,填写用户名、密码、邮箱等信息,注册成功后可直接登录系统。
- 登录功能:用户使用注册的用户名和密码进行登录。如果未登录或Cookie过期,点击任意按钮或刷新页面时会自动跳转到登录页面。并且为了用户安全,在一定时间内连续尝试登录失败后会暂时冻结该账户,等待冻结结束可再次尝试登录。
- 注销功能:用户可以在任何页面点击右上角的“注销”按钮,系统将跳转回登录页面。
- 保存草稿功能:用户在写文章时,可以选择将文章保存为草稿。草稿内容可以在之后编辑或发布,未发布的草稿只会显示在草稿列表中。
- 返回主页(文章列表页):用户可通过点击右上角的“主页”按钮,返回文章列表页面查看所有文章。
- 写文章功能:点击右上角的“写文章”按钮后,用户可进入写文章页面并发布新文章,支持Markdown格式编辑。
- 修改/删除文章功能:在查看自己发布的文章时,系统会显示“编辑”和“删除”按钮。点击“编辑”按钮进入文章编辑页面,修改文章后点击“更新文章”会提示“修改成功”,确认后自动跳转回文章列表页并显示更新后的内容。点击“删除”按钮后系统会提示“删除成功”,确认后自动跳转回文章列表页,并移除已删除的文章。
- 查看文章详情功能:在文章列表页,每篇文章下方都有“查看全文>>”按钮。点击该按钮可进入文章详情页,页面展示作者信息、访问次数、文章的首次发布时间等内容。
三、功能测试
1、测试用例:
2、实际测试部分(含截图) :
2.1、正常注册
1.点击发送验证码
2.提交验证码
再次点击发送验证码后再提交
注册成功
发现BUG1: 注册验证码必须发送两次以上, 并且要输入为前一次发送的验证码才能成功注册
2.2、正常登录
1.使用新注册的账号登录
显示用户信息
2.使用有博客数据的账号登录
显示用户信息以及发布过的文章
2.3、文章列表页显示/登录用户信息显示
列表页显示正常
2.4、文章详情页内容显示/文章作者信息显示
文章详情页显示正常
2.5、写博客功能
1.点击"写博客"按钮
成功跳转到博客编写页
2.保证标题栏和正文都有内容后点击"发布"按钮
发现BUG2: 最后发布的文章应该最先显示
2.6、保存草稿功能
1.点击"写博客"按钮
2.填写标题后点击"保存"按钮
3.点击"草稿箱"按钮
草稿列表正确显示
发现BUG3: 最后发的草稿应该最先显示
2.7、编辑/修改功能
1.点击"修改"按键
2.修改内容后点击"发布"按钮
修改成功并成功跳转
2.8、删除功能
1.点击"删除按钮"
2.点击"确定"按钮
发现文章还在
查询数据库:
发现文章已被删除, 重新刷新
发现BUG4: 删除文章之后需要手动刷新才能正确显示
2.9、注销功能
1.点击"注销"按钮
2.点击"确定"按钮
成功跳转到登录页
四、界面测试
1、网站对其他分辨率设备的兼容性
发现BUG5: 网站显示没有适配其他分辨率
2、文章显示是否正常
发现BUG5:在文章编辑页之外显示的正文部分不能使用Makdwon形式显示出来
2.1、测试长文章的显示
更改文章长度后返回主页查看
显示正常
五、自动化测试
配置自动化驱动等
// 初始化配置
static EdgeDriver driver = null;
static{
System.setProperty("webdriver.edge.driver", "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedgedriver.exe"); // 设置正确的 WebDriver 路径
EdgeOptions options = new EdgeOptions();
options.setBinary("C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe"); // 设置Edge浏览器的绝对路径
options.addArguments("--remote-allow-origins=*");
if (driver == null) {
driver = new EdgeDriver(options);
}
}
1、自动登录测试
public void auto_login(){
// 输入要测试url
driver.navigate().to("http://127.0.0.1:8080/login.html");
// 输入用户名密码
driver.findElement(By.cssSelector("#username")).sendKeys("admin");
driver.findElement(By.cssSelector("#password")).sendKeys("123");
// 点击"登录"按钮
driver.findElement(By.cssSelector("#submit")).click();
// 获取登录后显示在网页上的用户名. 检查是否登录成功
String username = driver.findElement(By.cssSelector("#username")).getText();
if(username.equals("admin")){
System.out.println("测试通过");
}else{
System.out.println("测试不通过");
}
}
2、自动写文章测试
public void auto_write_blog() throws InterruptedException {
// 点击"写博客按钮"
sleep(2000);
driver.findElement(By.cssSelector("#writeBlogButton")).click();
// 写入标题
driver.findElement(By.cssSelector("#title")).sendKeys("测试");
// 点击"发布"按钮
driver.findElement(By.cssSelector("body > div.blog-edit-container > div.title > button.button")).click();
sleep(2000);
// 获取到最后一篇发布的博客的标题
WebElement lastElement = driver.findElement(By.cssSelector("#artListDiv > div:last-child > div.title"));
// 检查博客标题是否为空, 不为空则发布成功
Assertions.assertNotNull(lastElement);
}
3、自动删除文章测试
public void auto_delete_blog() throws InterruptedException {
sleep(2000);
// 使用 CSS 选择器选择最后一个 div 的第4个子元素中的第3个链接
WebElement element = driver.findElement(By.cssSelector("#artListDiv > div:last-child > div:nth-child(4) > a:nth-child(3)"));
// 点击元素或进行其他操作
element.click();
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
// 切换到弹出的 confirm 弹窗"是否删除"
Alert confirmAlert = wait.until(ExpectedConditions.alertIsPresent());
// 点击弹窗的“确定”按钮
confirmAlert.accept();
// 切换到第二个弹窗"删除成功"
Alert confirmAlert2 = wait.until(ExpectedConditions.alertIsPresent());
// 点击"确定"
confirmAlert2.accept();
}
4、自动退出登录测试
public void auto_logout() throws InterruptedException {
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
sleep(2000);
// 点击"注销"按钮
driver.findElement(By.cssSelector("body > div.nav > a:nth-child(7)")).click();
// 切换到弹出的 confirm 弹窗"是否退出登录"
Alert confirmAlert = wait.until(ExpectedConditions.alertIsPresent());
// 点击弹窗的“确定”按钮
confirmAlert.accept();
}
使用Junit+selenium进行自动化测试
六、BUG总结
- 注册验证码必须发送两次以上, 并且要输入为前一次发送的验证码才能成功注册
- 最后发布的文章应该最先显示
- 最后发的草稿应该最先显示
- 删除文章之后需要手动刷新才能正确显示
- 网站显示没有适配其他分辨率
- 在文章编辑页之外显示的正文部分不能使用Makdwon形式显示出来