博客系统 Web 端测试报告：功能、自动化与性能

❤ 点击下方目录可跳转到对应章节

📝 项目背景

在没有博客系统的情况下，发布一篇文章需要手动编写网页代码并上传至服务器，哪怕只是修改一个错别字，也要重新调整代码；随着文章数量不断增多，检索与分类更是困难重重。博客系统将这些繁琐的底层操作全部封装起来——创作者只需专注于写作，点击发布即可上线，系统会自动完成排版、归档、列表生成、评论管理等环节，同时支持搜索引擎收录，让内容高效触达读者。此外，系统通常还提供主题与样式配置，创作者可以自主决定页面的呈现效果，无需依赖他人。

对于编程学习者而言，博客系统是一个覆盖面广、边界清晰的工程实践项目。它完整涵盖了用户登录、文章增删查改、分类标签管理、后台权限控制、前端页面渲染等 Web 开发核心环节。从零到一实现这些功能，学习者能够真正理解网站从请求到加载的完整链路，理解数据的存储、后端的响应，以及前端如何将数据转化为可视化页面。这些知识仅靠阅读教程难以形成直观认知，而通过一个博客系统的完整开发，往往能够融会贯通。

具体来说，博客系统的开发过程可以拆解为几个关键阶段：首先是需求分析与数据库设计，需要明确文章、用户、分类等核心实体的关系，设计出合理的表结构；其次是后端接口的开发，包括用户认证、文章增删查改、分类管理等 RESTful API 的编写与调试；再次是前端页面的实现，需要将后端返回的数据渲染为直观的列表、详情、编辑等页面；最后是联调与测试，确保前后端数据交互顺畅，并针对登录、发布、权限等关键流程进行功能与性能验证。通过这样一套完整的开发流程，学习者能够建立起对 Web 工程从设计到落地的整体认知。

总而言之，博客系统的核心价值，在于将内容创作、存储与分发三个环节实现流程自动化

☁️ 项目简介

✨ 项目有哪些功能

❤用户登录与注销
❤用户信息展示
❤博客列表页与详情页查看
❤博客的发布与删除
❤未登录状态下的权限限制
❤博客编辑功能
❤分类与标签管理

🔍 每个功能如何使用

💖用户登录：在登录页输入正确的账号和密码后，后端验证通过后返回用户登录凭证Token,前端保存Token并自动跳转到首页。此时首页的左上角会显示用户相关信息。
💖用户注销（已登录状态下）：登录状态下点击右上角的注销按钮，提示“用户退出，即将跳转到登录页”，点击确认，前端清除本地保存的Token，成功跳回到登录页。
💖用户信息展示：进入首页，前端请求getUserInfo接口，在侧边栏展示头像、昵称、GitHub地址以及统计数据（文章数和分类数）。注意，这里的文章数后端是正常统计的，但由于后端并没有把文章数的统计结果拼接到getUserInfo接口上，导致前端写死了假数据，无法实时获取真实的文章数，页面就无法显示正确的文章统计数字。
💖博客列表与详情页查看：
💕看列表：打开首页后，系统会自动把所有文章按最新发布的时间依次列出来，每篇文章包括的标题名、发布时间、发布的内容及查看全文按钮都会显示出来。
💕看详情：你要具体看哪篇文章的内容，就点击那篇文章的“查看全文”按钮。页面一跳转，就会自动显示这篇文章的完整内容。
💖博客发布与删除：登录状态下点击右上角的注销按钮，提示“用户退出，即将跳转到登录页”，点击确认，前端清除本地保存的Token，成功跳回到登录页。
💞发布：点“写博客”按钮(必须登录才能点），进入写博客页面，填写博客标题和博客内容后，点击“发布博客按钮”，就可发布成功；或者进入写博客页面后，只填写博客标题后点击“发布博客按钮”，也可以发布成功。注意：如果进入写博客页面后，只填写博客内容，不填写博客标题，点击“发布博客按钮后”，报"参数校验失败错误"，不能发布成功。还有，列表页的"查看全文”按钮点进去后也可以进行博客的编辑，不是只能从“写博客”按钮进去进行博客编辑。
💞删除：要删除某一篇博客，那么就找到列表页中的这一篇博客处的“查看全文”按钮进去，点击“编辑”按钮旁边的“删除”按钮，就可以成功删除这篇博客。
💖博客编辑功能：已发布的博客可以通过列表页的“查看全文”按钮进入详情页，再点击“编辑”按钮进入编辑页面，修改标题或内容后重新发布，实现内容的持续更新与维护。
💖分类与标签管理：系统支持为每篇文章设置分类与标签，便于读者按主题快速检索相关内容，也方便创作者对文章进行系统化的归档整理。
💖未登录状态下的权限限制：未登录时，页面右上角显示“主页”、"写博客“”两个按钮，点击“主页”按钮，报“用户未登录，即将跳转到登录页”弹窗，禁止访问；点击“写博客按钮时”，可以输入标题和博客内容，但不能点击“发布博客”按钮，一旦点击，报“用户未登录，即将跳转到登录页”弹窗，禁止发布博客。
页”弹窗，禁止发布博客。

🎯 测试计划

⏳ 测试工具

💙接口测试工具：Postman、浏览器自带的F12(Network面板），作用➡️页面显示不对时，用它直接看后端返回的数据对不对
💙自动化测试工具（代替人力点点点）：Selenium，作用➡️写代码让机器自动去点网页
💙性能测试工具：JMeter，作用➡️测试大量用户同时访问时，服务器会不会卡死或崩溃
💙Excel：作用➡️记录Bug、测试计划
💙Xmind：作用➡️编写测试用例
💙PyCharmCommunityEdition2025软件：作用➡️在该软件上配置python环境后，写Selenium代码来测试

📅 测试类型与方法

⚝ 功能测试：覆盖了登录、列表、详情、发布、用户信息查询、注销等5个核心模块，发现并跟踪了6个Bug(含文章数不更新、未登录状态下拦截发布文章失效等)
⚝ 性能测试：覆盖了登录、列表、发文等3个核心接口，发现1个性能瓶颈（低并发状态下列表页响应慢，高并发状态下系统崩溃）
⚝ 自动化测试：覆盖了登录、列表、详情页、数据校验等4个核心流程，发现1个因代码改动导致的回归Bug,目前已经修复验证

🤖 自动化测试

1️⃣ Web测试用例编写

❤ 登录页面的测试用例

❤ 列表页面的测试用例

❤ 编辑页面的测试用例

❤ 详情页面的测试用例

2️⃣ 自动化代码编写——测试用例的核心功能

🔧 (1)目录图

📋 (2)解释目录中的文件用处

🧰1. Common（公共装备库）
• 📍 定位：存放所有测试模块共用的底层代码，避免重复造轮子
📄 Utils.py（核心工具类）：
这里封装了 Selenium 的基础操作，例如：
🍭打开浏览器
🍭智能等待(隐式等待implicitly_wait）
🍭截图保存

📁 images/（媒体素材库）：
📍 定位：存放自动化测试过程中需要的静态文件。例如：
🍭用例测试成功或失败时自动生成的截图

🧪2. Tests（测试业务层）
📍 定位：存放具体业务模块的测试用例和页面对象，对应之前梳理的“登录、列表、详情、编辑”测试用例。
🍎BlogLogin.py➡️ 输入账号 -> 输入密码 -> 点击“登录”按钮。
🍎BlogList.py➡️ 查找某篇博客的标题 -> 查找某篇博客的创建时间-> 查找某篇博客的内容->查找某篇博客的“查看全文”按钮
🍎BlogEdit.py➡️ 查找标题->输入框里输入标题->查找到“发布”点击发布
🍎BlogDetail.py➡️ 查找到博客详情页的标题->查找到博客详情页的时间->查找到博客详情页的内容
🚦 3. RunTest.py（总调度中心）
• 📍 定位：自动化测试的“一键启动按钮”和“导航总控”。

📋 (3)代码部分

🔐 ① 登录页面

✅ 检查页面正常加载的效果图

✅ 检查成功登录

代码:

在这里插入代码片#把Common中的Utils包导入进来，因为要下载浏览器驱动并打开浏览器#并把Utils包下的BlogDriver方法拿进来，BlogDriver=self工具箱，那么BlogDriver.driver，就是取出工具箱里的driver工具即真正操控#浏览器的工具来使用.BlogDriver.driver=self.driverimporttimefrom selenium.commonimportTimeoutException from selenium.webdriver.common.byimportBy from selenium.webdriver.supportimportexpected_conditions as EC from selenium.webdriver.support.expected_conditionsimportalert_is_present from selenium.webdriver.support.waitimportWebDriverWait from webdriver_manager.coreimportdriver from Common.UtilsimportBlogDriver#导入的BlogDriver是实例对象，供所有测试文件使用#这句导包代码把Utils文件从头到尾完整执行一次，最后在它的产物里，把BlogDriver拿给本文件使用；所以在Utils文件从头到尾执行一遍后#浏览器被打开，我们此BlogLogin.py文件接下来就可以直接进行在浏览器的url处输入网址并进行搜索#创建类封装登录操作和测试操作class BlogLogin:#单独封装打开浏览器的方法#登录过程放def定义的init方法中，后面使用时，直接调用login里的init方法即可。#往打开的浏览器中输入网址def __init__(self):#self也是一个工具箱#登录页面单独存放self.url="http://47.108.157.13:8090/blog_login.html"self.driver=BlogDriver.driver#打开登录页面self.driver.get(self.url)#单独封装登录成功页面测试的方法#最前面两条下划线，最后面两条下划线如__init__方法，是python内置的魔术方法，专有方法；那么普通方法的命名应于专用方法的命名区分开#所以LoginSuccessTest方法的命名不能和init一样添加下划线def LoginSuccessTest(self):# 往打开的博客登录页中输入登录名和密码self.driver.find_element(By.CSS_SELECTOR,"#username").send_keys("lisi")self.driver.find_element(By.CSS_SELECTOR,"#password").send_keys("123456")self.driver.find_element(By.CSS_SELECTOR,"#submit").click()time.sleep(3)self.driver.find_element(By.CSS_SELECTOR,"body > div.container > div.left > div > h3")BlogDriver.getScreenshot()#这里结束不加quit,也会自动关闭浏览器，因为脚本代码执行完毕，进程死亡，顺带会把浏览器带回即顺带关闭浏览器# #self.driver.quit()def LoginFailTest(self):#在原有的打开的页面基础上，执行错误登录测试,例如，输入正确用户名，但错误密码# self.driver.back()time.sleep(3)self.driver.find_element(By.CSS_SELECTOR,"#username").clear()self.driver.find_element(By.CSS_SELECTOR,"#password").clear()self.driver.find_element(By.CSS_SELECTOR,"#username").send_keys("lisi")self.driver.find_element(By.CSS_SELECTOR,"#password").send_keys("123")self.driver.find_element(By.CSS_SELECTOR,"#submit").click()time.sleep(3)#有非页面元素的弹窗出现，则执行显示等待定位到该弹窗try:#返回等待器wait=WebDriverWait(self.driver,10)#如果弹窗不存在，就报TimeoutExpectation超时错误；若存在，则返回弹窗对象a_lert=wait.until(EC.alert_is_present())print("检测到弹窗，内容：", a_lert.text)#弹窗按钮点击确认，跳出弹窗a_lert.accept()BlogDriver.getScreenshot()# 只要alert弹窗还开着，Selenium几乎所有命令都废掉。这是浏览器层面定的规矩，不是Selenium的脾气。所以浏览器方表示截不了图，拒绝截图# 除非弹窗关了。#如果try语句里报的错误符合等待时间超时，则满足下边语句要求的（except要求错误必须是TimeoutException,才能执行except里的语句）except TimeoutException: print("没有弹窗")# webdriver里的get等报TimeoutException超时错误，WebDriverWait里的until也报TimeoutExption错误。try-exception TimeoutExption接收# until传过来的TimeoutExption错误和其它传过来的TimeoutExption错误#为什么要把BlogLogin()调用了即BlogLogin()之后再赋给一个新对象login,这是因为我们要把打开的浏览器的顶部输入框输入url地址，此步骤封装到了init方法里面，#那么调用BlogList()时是会自动调用init函数完成类对象的创建，完成了浏览器顶部输入框输入url进入登录页面的操作# login = BlogLogin()# login.LoginSuccessTest()# login.LoginFailTest()

登录成功效果图

❌ 检查失败登录

效果图：

📃 ② 博客列表页

✅ 检查列表正常展示

代码：

#博客主页测试,先引入BlogDriver（因为Blogdriver是一个事先已经打开了浏览器的一个对象），现在引入BlogDriver,打算用它里面的driver工具往浏览器#中输入url地址;下面这句代码中的Util文件会被从头到尾执行一遍，所以最终拿到的BlogDriver对象就是一个已经打开了浏览器的对象from selenium.webdriver.common.byimportBy from Common.UtilsimportBlogDriver class BlogList:#先在浏览器中输入url地址，才能进入登录页面，才能进入主页，所以前期的打开浏览器和在浏览器中输入网址都可以称做初始化阶段#最后self会被隐式返回回去，self是一个工具对象，里面装着各种各样的工具def __init__(self):self.url="http://47.108.157.13:8090/blog_login.html"#self.driver拿到了浏览器对象本身，接下来可以对浏览器做各种操作self.driver=BlogDriver.driver# self.driver.get(self.url)#登录状态下测试博客列表def ListTestByLogin(self): self.driver.find_element(By.CSS_SELECTOR,"body > div.container > div.right > div:nth-child(1) > div.title")self.driver.find_element(By.CSS_SELECTOR,"body > div.container > div.right > div:nth-child(1) > div.date")self.driver.find_element(By.CSS_SELECTOR,"body > div.container > div.right > div:nth-child(1) > div.desc")self.driver.find_element(By.CSS_SELECTOR,"body > div.container > div.right > div:nth-child(1) > a")self.driver.find_element(By.CSS_SELECTOR,"body > div.container > div.left > div > h3")BlogDriver.getScreenshot()#为什么要把BlogList调用了即BlogList()之后再赋给一个新对象List,这是因为我们要把打开的浏览器的顶部输入框输入url地址，此步骤封装到了init方法里面，#那么调用BlogList()时是会自动调用init函数完成类对象的创建，完成了浏览器顶部输入框输入url进入登录页面的操作# List=BlogList()# List.ListTestByLogin()

效果图：

✅ 检查文章数量正确

效果图：

👆 ③检查已发布文章的详情页信息内容完整（自己当下发布的，点击“查看全文”按钮后才会完整显示）

代码：

importtimefrom selenium.webdriver.common.byimportBy from selenium.webdriver.supportimportexpected_conditions as EC from selenium.webdriver.support.waitimportWebDriverWait from Common.UtilsimportBlogDriver class BlogDetail: def __init__(self):#博客详情页链接self.url="http://47.108.157.13:8090/blog_detail.html?blogId=9"self.driver=BlogDriver.driver self.driver.get(self.url)#去已登录的博客详情页查找元素def BlogDetailTestByLogin(self): self.driver.find_element(By.CSS_SELECTOR,"body > div.container > div.right > div > div.title")self.driver.find_element(By.CSS_SELECTOR,"body > div.container > div.right > div > div.date")# time.sleep(10)wait=WebDriverWait(self.driver,10)#设置until等待，只接受一个参数，那么整体的概念就很重要，一个括号里面有一个整体，那么该整体要用括号包起来wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR,"#detail>p")))BlogDriver.getScreenshot()

效果图：

✅ ④检查编辑页加载并发布文章

代码：

importtimefrom pydicom.valuerepimportvalidate_value from selenium.webdriver.common.byimportBy from selenium.webdriver.support.waitimportWebDriverWait from selenium.webdriver.supportimportexpected_conditions as EC from Common.UtilsimportBlogDriver class BlogEdit: def __init__(self):self.url="http://47.108.157.13:8090/blog_edit.html"#BlogDriver对象里有driver工具是因为在Utils文件里将打开的浏览器对象即遥控器赋值给了self.driver（self里有driver工具）,# 最后又将self对象经调用隐式赋给了BlogDriver对象，那么自然BlogDriver对象箱里面也有driver工具self.driver=BlogDriver.driver self.driver.get(self.url)#登录状态下编辑并发布博客def EditByLogin(self):wait=WebDriverWait(self.driver,5)wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR,"#title"))).send_keys("自动化")#下面这句代码的元素定位报不可交互错误（不可交互错误又分为不可见，不可交互空间，遮挡等等），即该元素被设为是不可交互控件，所以定位错误# self.driver.find_element(By.CSS_SELECTOR,"#editor > div.CodeMirror.cm-s-default.CodeMirror-wrap > div.CodeMirror-scroll > div.CodeMirror-sizer > div > div > div > div.CodeMirror-code > div > pre > span > span")time.sleep(3)self.driver.find_element(By.CSS_SELECTOR,"#submit").click()#如果创建的博客标题不等于自动化测试，则报错;注意创建成功博客后，会弹出一个博客创建成功的弹窗，要解决掉该弹窗才能继续进行对页面的截图或元素定位#或屏幕截图等等的操作，所以下边的代码出了time.sleep(3)外都不能执行，会报错# actual=self.driver.find_element(By.CSS_SELECTOR,"body > div.container > div.right > div > div.title").text# assert actual =="aa"time.sleep(3)# BlogDriver.getScreenshot()

效果图：

🤖 性能测试

🌳①测试目标

明确核心业务的并发量、响应时间（RT）、吞吐量（TPS）指标

🔴②接口查询

🧡列表接口查询

🧡列表页聚合报告结果解读：

结论：
接口功能正常（异常率 0.00%），但响应时间严重超标（平均 24 秒，标准应 < 3 秒），5线程并发下用户体验已很差，10 线程以上将出现严重排队甚至超时。建议优先排查数据库慢查询、加分页与缓存

🧡添加博客接口查询

🧡添加博客页聚合报告结果解读：

总结：

🧡博客详情页接口查询

🧡博客详情页聚合报告结果解读：

结论：

🔴③接口联合查询

🧡 接口联合聚合报告结果解读

以上两张折线图可以看出：
响应时间一直都很高，而吞吐量一直很低，原因是:因为列表页接口设计的性能很低，导致访问时间过长，影响了整个系统的整体性能，也就是说列表页接口的突出性能低决定了整个系统的性能低。补充响应时间和吞吐量成反比，响应时间高，吞吐量低，系统性能差；响应时间低，吞吐量高，系统性能好

总结：

🔴命令生成html文件➡️即测试报告

29个样本下错误率为0，而上边42个样本下错误率为4.76%，说明高并发状态下系统性能差，如果样本数再多一些，系统有可能就崩溃了。

🐛 Bug 记录与修复

🔴 严重 Bug

Bug 1：列表页接口响应时间严重超标
现象：5线程并发下，平均响应时间 23922 ms（约24秒），90% 请求超 27秒，最大响应时间达 31373 ms（约31秒）
影响范围：所有用户访问列表页均需等待 20 秒以上，10 用户并发时体验呈灾难级下降
复现步骤：JMeter 5线程并发请求列表页接口，无循环、无阶梯加压
根因分析：疑似数据库慢查询（无索引/全表扫描）或接口返回数据量过大
修复建议：① 给列表查询加索引 ② 加分页（一次只返回20~50条）③ 加缓存（Redis或本地缓存）
状态：待修复

Bug 2：列表页接口高并发下出现 4.76% 错误率​
现象：42 个样本中有 2 个请求失败，错误率 4.76%
影响范围：部分用户在高峰期无法正常访问列表页
复现步骤：10 线程并发请求列表页接口，持续运行
根因分析：疑似数据库连接池耗尽或服务端线程池被打满，部分请求超时或被拒绝
修复建议：① 检查服务端连接池配置 ② 查看失败请求的响应码（500/超时/连接被拒） ③ 增加服务端资源或限流
状态：待定位具体错误码

🟡 一般 Bug

Bug 3：Stepping Thread Group 配置不当导致请求数失控
现象：10线程配置下，实际发出了 500+ 次请求，远超预期
影响范围：测试结果失真，无法准确评估接口性能
复现步骤：在 Next, add [ ] ，threads every [ ] ，using ramp-up []中只填了using ramp-up即运行时间秒数
根因分析：该插件的阶梯加压逻辑中，单独填写using ramp-up秒数会触发隐形循环机制
修复方案：要压测，则三个位置都可填，其中using ramp-up位置必填；不压测（固定数量测试），则空着不填using ramp-up位置即可
状态：已修复

🟢 轻微 Bug

Bug 4：JMeter 结果树历史数据未清空导致误判
现象：结果树显示 10 个请求，实际只运行了一次（5个请求）
影响范围：测试人员误以为配置有问题，浪费排查时间
复现步骤：多次运行测试但未点击结果树的"清除"按钮
修复方案：每次运行前点击结果树顶部的"清除"按钮（扫把图标）
状态：已确认，非脚本问题

🎯 测试结论

🔍测试概况

🌳测试对象:列表页/详情页/编辑页接口/接口总和
🌳测试环境:5线程/500线程/500线程并发

💘详细结论

🌳响应性能不达标：高并发场景下，接口响应时间跨度极大（26ms~102147ms）,90%以上的请求响应存在严重性能瓶颈；同样，低并发场景下，接口响应跨度也极大（28ms-53627ms）,90%以上的请求响应存在严重性能瓶颈
🌳系统稳定性不达标:在高并发场景下（10线程），接口出现4.76%的请求失败率，部分用户无法正常访问
🌳测试总体判定:不通过

🍉优化与后续建议

🌳紧急排查：优先排查列表页数据库慢查询（疑似全表扫描）及接口返回数据量过大的问题
🌳服务扩容与配置：检查服务端数据库连接池及线程池配置，排查请求失败的具体的错误码（500/超时/连接被拒），必要时增加服务器资源或限流
🌳代码优化：为列表页查询添加数据库索引，引入分页机制（一次返回20~50条），并增加缓存
🌳复测要求：完成上述优化后，需重新进行压力测试验证