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

📋 文章目录

- [❤ 点击下方目录可跳转到对应章节](#❤ 点击下方目录可跳转到对应章节)
- [📝 项目背景](#📝 项目背景)
- [☁️ 项目简介](#☁️ 项目简介)
- - [✨ 项目有哪些功能](#✨ 项目有哪些功能)
  - [🔍 每个功能如何使用](#🔍 每个功能如何使用)
- [🎯 测试计划](#🎯 测试计划)
- [⏳ 测试工具](#⏳ 测试工具)
- [📅 测试类型与方法](#📅 测试类型与方法)
- [🤖 自动化测试](#🤖 自动化测试)
- - [1️⃣ Web测试用例编写](#1️⃣ Web测试用例编写)
  - [❤ 登录页面的测试用例](#❤ 登录页面的测试用例)
  - [❤ 列表页面的测试用例](#❤ 列表页面的测试用例)
  - [❤ 编辑页面的测试用例](#❤ 编辑页面的测试用例)
  - [❤ 详情页面的测试用例](#❤ 详情页面的测试用例)
  - [2️⃣ 自动化代码编写------测试用例的核心功能](#2️⃣ 自动化代码编写——测试用例的核心功能)
  - - [🔧 (1)目录图](#🔧 (1)目录图)
    - [📋 (2)解释目录中的文件用处](#📋 (2)解释目录中的文件用处)
    - [📋 (3)代码部分](#📋 (3)代码部分)
    - - [🔐 ① 登录页面](#🔐 ① 登录页面)
      - [✅ 检查页面正常加载的效果图](#✅ 检查页面正常加载的效果图)
        
        [✅ 检查成功登录](#✅ 检查成功登录)
        
        [❌ 检查失败登录](#❌ 检查失败登录)
      - [📃 ② 博客列表页](#📃 ② 博客列表页)
      - [✅ 检查列表正常展示](#✅ 检查列表正常展示)
        
        [✅ 检查文章数量正确](#✅ 检查文章数量正确)
      - [👆 ③检查已发布文章的详情页信息内容完整（自己当下发布的，点击"查看全文"按钮后才会完整显示）](#👆 ③检查已发布文章的详情页信息内容完整（自己当下发布的，点击“查看全文”按钮后才会完整显示）)
      - [✅ ④检查编辑页加载并发布文章](#✅ ④检查编辑页加载并发布文章)
- [🤖 性能测试](#🤖 性能测试)
- - 🌳①测试目标
  - 🔴②接口查询
  - 🔴③接口联合查询
  - - [🧡 接口联合聚合报告结果解读](#🧡 接口联合聚合报告结果解读)
    - 🔴命令生成html文件➡️即测试报告
- [🐛 Bug 记录与修复](#🐛 Bug 记录与修复)
- - [🔴 严重 Bug](#🔴 严重 Bug)
  - [🟡 一般 Bug](#🟡 一般 Bug)
  - [🟢 轻微 Bug](#🟢 轻微 Bug)
- [🎯 测试结论](#🎯 测试结论)

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

📝 项目背景

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

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

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

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

☁️ 项目简介

✨ 项目有哪些功能

❤ 用户登录与注销

❤ 用户信息展示

❤ 博客列表页与详情页查看

❤ 博客的发布与删除

❤ 未登录状态下的权限限制

❤ 博客编辑功能

❤ 分类与标签管理

🔍 每个功能如何使用

💖用户登录 ：在登录页输入正确的账号和密码后，后端验证通过后返回用户登录凭证Token,前端保存Token并自动跳转到首页。此时首页的左上角会显示用户相关信息。

💖用户注销（已登录状态下） ：登录状态下点击右上角的注销按钮，提示"用户退出，即将跳转到登录页"，点击确认，前端清除本地保存的Token，成功跳回到登录页。

💖用户信息展示 ：进入首页，前端请求getUserInfo接口，在侧边栏展示头像、昵称、GitHub地址以及统计数据（文章数和分类数）。注意，这里的文章数后端是正常统计的，但由于后端并没有把文章数的统计结果拼接到getUserInfo接口上，导致前端写死了假数据，无法实时获取真实的文章数，页面就无法显示正确的文章统计数字。

💖博客列表与详情页查看 ：

💕看列表 ：打开首页后，系统会自动把所有文章按最新发布的时间依次列出来，每篇文章包括的标题名、发布时间、发布的内容及查看全文按钮都会显示出来。

💕看详情 ：你要具体看哪篇文章的内容，就点击那篇文章的"查看全文"按钮。页面一跳转，就会自动显示这篇文章的完整内容。

💖博客发布与删除 ：登录状态下点击右上角的注销按钮，提示"用户退出，即将跳转到登录页"，点击确认，前端清除本地保存的Token，成功跳回到登录页。

💞 发布：点"写博客"按钮(必须登录才能点），进入写博客页面，填写博客标题和博客内容后，点击"发布博客按钮"，就可发布成功；或者进入写博客页面后，只填写博客标题后点击"发布博客按钮"，也可以发布成功。注意：如果进入写博客页面后，只填写博客内容，不填写博客标题，点击"发布博客按钮后"，报"参数校验失败错误"，不能发布成功。还有，列表页的"查看全文"按钮点进去后也可以进行博客的编辑，不是只能从"写博客"按钮进去进行博客编辑。

💞 删除：要删除某一篇博客，那么就找到列表页中的这一篇博客处的"查看全文"按钮进去，点击"编辑"按钮旁边的"删除"按钮，就可以成功删除这篇博客。

💖博客编辑功能 ：已发布的博客可以通过列表页的"查看全文"按钮进入详情页，再点击"编辑"按钮进入编辑页面，修改标题或内容后重新发布，实现内容的持续更新与维护。

💖分类与标签管理 ：系统支持为每篇文章设置分类与标签，便于读者按主题快速检索相关内容，也方便创作者对文章进行系统化的归档整理。

💖未登录状态下的权限限制 ：未登录时，页面右上角显示"主页"、"写博客""两个按钮，点击"主页"按钮，报"用户未登录，即将跳转到登录页"弹窗，禁止访问；点击"写博客按钮时"，可以输入标题和博客内容，但不能点击"发布博客"按钮，一旦点击，报"用户未登录，即将跳转到登录页"弹窗，禁止发布博客。

页"弹窗，禁止发布博客。

🎯 测试计划

🎯 功能	👨‍💻 后端开发	👩‍💻 前端开发	📅 提测日期	🧑‍🔬 测试	📅 测试日期	🏆 测试结果
🔐 登陆界面	星星码	星星码	10.3	星星码	10.5	🟢 通过
🏠 博客列表页	星星码	星星码	10.3	星星码	10.5	🔴 有Bug
📄 博客详情页	星星码	星星码	10.5	星星码	10.8	🟢 通过
✍️ 博客编辑页	星星码	星星码	10.5	星星码	10.9	🟢 通过

⏳ 测试工具

💙接口测试工具：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)代码部分

🔐 ① 登录页面

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

✅ 检查成功登录

代码:

bash 复制代码

在这里插入代码片
#把Common中的Utils包导入进来，因为要下载浏览器驱动并打开浏览器
#并把Utils包下的BlogDriver方法拿进来，BlogDriver=self工具箱，那么BlogDriver.driver，就是取出工具箱里的driver工具即真正操控
#浏览器的工具来使用.BlogDriver.driver=self.driver
import time

from selenium.common import TimeoutException
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.expected_conditions import alert_is_present
from selenium.webdriver.support.wait import WebDriverWait
from webdriver_manager.core import driver

from Common.Utils import BlogDriver
#导入的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()

登录成功效果图

❌ 检查失败登录

效果图：

📃 ② 博客列表页

✅ 检查列表正常展示

代码：

bash 复制代码

#博客主页测试,先引入BlogDriver（因为Blogdriver是一个事先已经打开了浏览器的一个对象），现在引入BlogDriver,打算用它里面的driver工具往浏览器
#中输入url地址;下面这句代码中的Util文件会被从头到尾执行一遍，所以最终拿到的BlogDriver对象就是一个已经打开了浏览器的对象
from selenium.webdriver.common.by import By

from Common.Utils import BlogDriver
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()

效果图：

✅ 检查文章数量正确

效果图：

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

代码：

bash 复制代码

import time

from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.wait import WebDriverWait

from Common.Utils import BlogDriver

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()

效果图：

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

代码：

bash 复制代码

import time

from pydicom.valuerep import validate_value
from selenium.webdriver.common.by import By
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

from Common.Utils import BlogDriver

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()