Web 项目 UI 自动化测试实战：从零搭建博客系统测试框架

优化点说明：

• 驱动全局共享：通过全局实例确保所有用例使用同一个浏览器实例，避免重复打开，提高效率。
• 异常处理：捕获常见异常并打印日志，方便问题定位。
• 灵活配置：预留了无头模式、窗口大小等可选配置，可根据实际环境调整。

四、测试用例开发：逐个模块实现

接下来按照测试规划，逐个模块编写测试用例。每个用例都遵循'前置条件→操作步骤→断言验证'的逻辑。

4.1 登录模块测试

登录模块是系统的入口，也是自动化测试的核心场景。我们需要覆盖正常登录和多种异常登录场景。

import time
from selenium.webdriver.common.by import By
from selenium.common.exceptions import NoSuchElementException
from common.Utils import blog_driver

class BlogLogin:
    """登录模块测试用例"""
    def __init__(self):
        self.login_url = "http://192.168.47.135:8653/blog_system/blog_login.html"
        self.driver = blog_driver.driver
        self.driver.get(self.login_url)
        print(f"打开登录页面：{self.login_url}")

    def clear_input(self):
        username_input = self.driver.find_element(By.CSS_SELECTOR, "#username")
        password_input = self.driver.find_element(By.CSS_SELECTOR, "#password")
        username_input.clear()
        password_input.clear()
        print("清空账号密码输入框")

    def login_suc_test(self, username="admin", password="123"):
        """正常登录测试用例"""
        try:
            print(f"\n===== 执行正常登录测试（账号：{username}，密码：{password}）=====")
            self.clear_input()
            self.driver.find_element(By.CSS_SELECTOR, "#username").send_keys(username)
            self.driver.find_element(By.CSS_SELECTOR, "#password").send_keys(password)
            print(f"输入账号：{username}，密码：{password}")
            self.driver.find_element(By.CSS_SELECTOR, "#submit").click()
            print("点击登录按钮")
            time.sleep(2)

            avatar_element = self.driver.find_element(By.CSS_SELECTOR, "body > div.container > div.left > div > img")
            assert avatar_element.is_displayed()
            print(f"正常登录测试通过！{username}账号登录成功")
            blog_driver.get_screen_shot()
            self.driver.back()
            time.sleep(1)
        except NoSuchElementException:
            print(f"正常登录测试失败：未找到博主头像元素")
            blog_driver.get_screen_shot()
            raise
        except AssertionError:
            print(f"正常登录测试失败：博主头像元素不可见")
            blog_driver.get_screen_shot()
            raise
        except Exception as e:
            print(f"正常登录测试异常：{str(e)}")
            blog_driver.get_screen_shot()
            raise

    def login_fail_test(self, username="admin", password="111", expect_msg="用户名或密码错误!"):
        """异常登录测试用例"""
        try:
            print(f"\n===== 执行异常登录测试（账号：{username}，密码：{password}）=====")
            self.clear_input()
            self.driver.find_element(By.CSS_SELECTOR, "#username").send_keys(username)
            self.driver.find_element(By.CSS_SELECTOR, "#password").send_keys(password)
            self.driver.find_element(By.CSS_SELECTOR, "#submit").click()
            time.sleep(1)
            actual_msg = self.driver.find_element(By.CSS_SELECTOR, "body").text
            assert expect_msg in actual_msg, f"错误提示不匹配！预期：{expect_msg}，实际：{actual_msg}"
            print(f"异常登录测试通过！错误提示符合预期")
            blog_driver.get_screen_shot()
            self.driver.back()
            time.sleep(1)
        except (NoSuchElementException, AssertionError) as e:
            print(f"异常登录测试失败：{str(e)}")
            blog_driver.get_screen_shot()
            raise
        except Exception as e:
            print(f"异常登录测试异常：{str(e)}")
            blog_driver.get_screen_shot()
            raise

    def login_empty_username_test(self):
        """账号为空登录测试"""
        print(f"\n===== 执行账号为空登录测试 =====")
        self.clear_input()
        self.driver.find_element(By.CSS_SELECTOR, "#password").send_keys("123")
        self.driver.find_element(By.CSS_SELECTOR, "#submit").click()
        time.sleep(1)
        assert self.driver.current_url == self.login_url, "账号为空时页面不应跳转"
        print(f"账号为空登录测试通过！页面未跳转")
        blog_driver.get_screen_shot()

    def login_empty_password_test(self):
        """密码为空登录测试"""
        print(f"\n===== 执行密码为空登录测试 =====")
        self.clear_input()
        self.driver.find_element(By.CSS_SELECTOR, "#username").send_keys("admin")
        self.driver.find_element(By.CSS_SELECTOR, "#submit").click()
        time.sleep(1)
        assert self.driver.current_url == self.login_url, "密码为空时页面不应跳转"
        print(f"密码为空登录测试通过！页面未跳转")
        blog_driver.get_screen_shot()

if __name__ == "__main__":
    login_test = BlogLogin()
    login_test.login_suc_test("admin", "123")
    login_test.login_fail_test("admin", "111", "用户名或密码错误!")
    login_test.login_empty_username_test()
    login_test.login_empty_password_test()
    blog_driver.quit_driver()

4.2 博客列表模块测试

博客列表模块的核心测试点是登录状态下正常访问和未登录状态下跳转登录页，同时需要验证博客数量和跳转功能。

import time
from selenium.webdriver.common.by import By
from selenium.common.exceptions import NoSuchElementException
from common.Utils import blog_driver, Driver
from cases.BlogLogin import BlogLogin

class BlogList:
    """博客列表模块测试用例"""
    def __init__(self):
        self.list_url = "http://192.168.47.135:8653/blog_system/blog_list.html"
        self.driver = blog_driver.driver
        print(f"博客列表页 URL：{self.list_url}")

    def list_login_status_test(self):
        """登录状态下访问博客列表页测试"""
        try:
            print(f"\n===== 执行登录状态下博客列表测试 =====")
            login_test = BlogLogin()
            login_test.login_suc_test("admin", "123")
            self.driver.get(self.list_url)
            print(f"已登录，访问列表页：{self.list_url}")
            time.sleep(2)

            avatar_element = self.driver.find_element(By.CSS_SELECTOR, "body > div.container > div.left > div > img")
            assert avatar_element.is_displayed(), "博主头像未显示，登录状态可能失效"
            print("断言通过：博主头像正常显示")

            first_blog = self.driver.find_element(By.CSS_SELECTOR, "body > div.container > div.right > div:nth-child(1) > a")
            assert first_blog.is_displayed(), "第一篇博客链接未找到"
            print(f"断言通过：第一篇博客链接正常显示（标题：{first_blog.text}）")

            all_blogs = self.driver.find_elements(By.CSS_SELECTOR, "body > div.container > div.right > div")
            blog_count = len(all_blogs)
            assert blog_count > 10, f"博客数量不足 10 篇，实际数量：{blog_count}"
            print("断言通过：博客数量大于 10 篇")

            first_blog.click()
            time.sleep(2)
            assert self.driver.title == "博客详情页", f"跳转失败，当前页面标题：{self.driver.title}"
            print("断言通过：成功跳转至博客详情页")
            blog_driver.get_screen_shot()
            print("===== 登录状态下博客列表测试通过 =====")
        except (NoSuchElementException, AssertionError) as e:
            print(f"登录状态下博客列表测试失败：{str(e)}")
            blog_driver.get_screen_shot()
            raise
        except Exception as e:
            print(f"登录状态下博客列表测试异常：{str(e)}")
            blog_driver.get_screen_shot()
            raise

    def list_unlogin_status_test(self):
        """未登录状态下访问博客列表页测试"""
        try:
            print(f"\n===== 执行未登录状态下博客列表测试 =====")
            blog_driver.quit_driver()
            new_driver = Driver()
            self.driver = new_driver.driver
            self.driver.get(self.list_url)
            print(f"未登录，直接访问列表页：{self.list_url}")
            time.sleep(2)
            assert self.driver.current_url == "http://192.168.47.135:8653/blog_system/blog_login.html",
            print("断言通过：未登录状态下访问列表页，自动跳转至登录页")
            new_driver.get_screen_shot()
            new_driver.quit_driver()
            print("===== 未登录状态下博客列表测试通过 =====")
        except AssertionError as e:
            print(f"未登录状态下博客列表测试失败：{str(e)}")
            raise
        except Exception as e:
            print(f"未登录状态下博客列表测试异常：{str(e)}")
            raise

if __name__ == "__main__":
    list_test = BlogList()
    list_test.list_login_status_test()
    list_test.list_unlogin_status_test()

4.3 博客详情模块测试

博客详情模块依赖博客列表模块的跳转，核心测试点是页面元素完整性和未登录访问限制。

import time
from selenium.webdriver.common.by import By
from selenium.common.exceptions import NoSuchElementException
from common.Utils import blog_driver, Driver
from cases.BlogLogin import BlogLogin
from cases.BlogList import BlogList

class BlogDetail:
    """博客详情模块测试用例"""
    def __init__(self, blog_id=15):
        self.detail_url = f"http://192.168.47.135:8653/blog_system/blog_detail.html?blogId={blog_id}"
        self.driver = blog_driver.driver
        self.blog_id = blog_id
        print(f"博客详情页 URL（ID：{blog_id}）：{self.detail_url}")

    def detail_login_status_test(self):
        """登录状态下访问博客详情页测试"""
        try:
            print(f"\n===== 执行登录状态下博客详情测试（ID：{self.blog_id}）=====")
            login_test = BlogLogin()
            login_test.login_suc_test("admin", "123")
            list_test = BlogList()
            list_test.driver.get(list_test.list_url)
            time.sleep(2)
            first_blog = list_test.driver.find_element(By.CSS_SELECTOR, "body > div.container > div.right > div:nth-child(1) > a")
            first_blog.click()
            time.sleep(2)

            assert self.driver.title == "博客详情页", f"当前页面不是详情页，标题：{self.driver.title}"
            print("断言通过：页面标题为'博客详情页'")

            blog_title = self.driver.find_element(By.CSS_SELECTOR, "body > div.container > div.right > div > h3")
            assert blog_title.is_displayed(), "博客标题未显示"
            print(f"断言通过：博客标题正常显示（标题：{blog_title.text}）")

            publish_date = self.driver.find_element(By.CSS_SELECTOR, "body > div.container > div.right > div > div.date")
            assert publish_date.is_displayed(), "发布日期未显示"
            print(f"断言通过：发布日期正常显示（日期：{publish_date.text}）")

            blog_content = self.driver.find_element(By.CSS_SELECTOR, "#content")
            assert blog_content.is_displayed(), "博客正文未显示"
            print(f"断言通过：博客正文正常显示（前 50 字：{blog_content.text[:50]}...）")
            blog_driver.get_screen_shot()
            print("===== 登录状态下博客详情测试通过 =====")
        except (NoSuchElementException, AssertionError) as e:
            print(f"登录状态下博客详情测试失败：{str(e)}")
            blog_driver.get_screen_shot()
            raise
        except Exception as e:
            print(f"登录状态下博客详情测试异常：{str(e)}")
            blog_driver.get_screen_shot()
            raise

    def detail_unlogin_status_test(self):
        """未登录状态下访问博客详情页测试"""
        try:
            print(f"\n===== 执行未登录状态下博客详情测试（ID：{self.blog_id}）=====")
            blog_driver.quit_driver()
            new_driver = Driver()
            self.driver = new_driver.driver
            self.driver.get(self.detail_url)
            print(f"未登录，直接访问详情页：{self.detail_url}")
            time.sleep(2)
            assert self.driver.current_url == "http://192.168.47.135:8653/blog_system/blog_login.html",
            print("断言通过：未登录状态下访问详情页，自动跳转至登录页")
            new_driver.get_screen_shot()
            new_driver.quit_driver()
            print("===== 未登录状态下博客详情测试通过 =====")
        except AssertionError as e:
            print(f"未登录状态下博客详情测试失败：{str(e)}")
            raise
        except Exception as e:
            print(f"未登录状态下博客详情测试异常：{str(e)}")
            raise

if __name__ == "__main__":
    detail_test = BlogDetail(blog_id=15)
    detail_test.detail_login_status_test()
    detail_test.detail_unlogin_status_test()

4.4 博客编辑模块测试

博客编辑模块是核心功能之一，需要覆盖正常提交和异常提交（无标题、无内容）场景。

import time
import datetime
from selenium.webdriver.common.by import By
from selenium.common.exceptions import NoSuchElementException
from common.Utils import blog_driver, Driver
from cases.BlogLogin import BlogLogin

class BlogEdit:
    """博客编辑模块测试用例"""
    def __init__(self):
        self.edit_url = "http://192.168.47.135:8653/blog_system/blog_edit.html"
        self.driver = blog_driver.driver
        print(f"博客编辑页 URL：{self.edit_url}")

    def edit_login_normal_submit_test(self):
        """登录状态下正常提交博客测试"""
        try:
            print(f"\n===== 执行登录状态下正常提交博客测试 =====")
            login_test = BlogLogin()
            login_test.login_suc_test("admin", "123")
            self.driver.get(self.edit_url)
            time.sleep(2)
            print(f"已登录，访问编辑页：{self.edit_url}")

            title_input = self.driver.find_element(By.CSS_SELECTOR, "#title")
            content_input = self.driver.find_element(By.CSS_SELECTOR, "#content")
            submit_btn = self.driver.find_element(By.CSS_SELECTOR, "#submit")

            blog_title = f"自动化测试实战_测试博客_{datetime.datetime.now().strftime('%Y%m%d%H%M%S')}"
            blog_content = "这是一篇通过自动化测试脚本提交的博客，用于验证编辑模块的正常提交功能。"
            title_input.clear()
            title_input.send_keys(blog_title)
            content_input.clear()
            content_input.send_keys(blog_content)
            print(f"输入博客标题：{blog_title}")
            print(f"输入博客内容：{blog_content[:30]}...")

            submit_btn.click()
            time.sleep(3)
            assert self.driver.title == "博客列表页", f"提交后未跳转至列表页，当前标题：{self.driver.title}"
            print("断言通过：提交后成功跳转至列表页")

            all_blogs = self.driver.find_elements(By.CSS_SELECTOR, "body > div.container > div.right > div > a")
            blog_titles = [blog.text for blog in all_blogs]
            assert blog_title in blog_titles, f"新增博客未在列表中显示（标题：{blog_title}）"
            print(f"断言通过：新增博客已显示在列表页")
            blog_driver.get_screen_shot()
            print("===== 登录状态下正常提交博客测试通过 =====")
        except (NoSuchElementException, AssertionError) as e:
            print(f"正常提交博客测试失败：{str(e)}")
            blog_driver.get_screen_shot()
            raise
        except Exception as e:
            print(f"正常提交博客测试异常：{str(e)}")
            blog_driver.get_screen_shot()
            raise

    def edit_login_no_title_submit_test(self):
        """登录状态下无标题提交测试"""
        try:
            print(f"\n===== 执行登录状态下无标题提交博客测试 =====")
            login_test = BlogLogin()
            login_test.login_suc_test("admin", "123")
            self.driver.get(self.edit_url)
            time.sleep(2)

            content_input = self.driver.find_element(By.CSS_SELECTOR, "#content")
            submit_btn = self.driver.find_element(By.CSS_SELECTOR, "#submit")
            blog_content = "这是无标题提交测试的内容，预期提交失败。"
            content_input.clear()
            content_input.send_keys(blog_content)
            print(f"未输入标题，输入内容：{blog_content}")

            submit_btn.click()
            time.sleep(1)
            assert self.driver.current_url == self.edit_url, f"无标题提交时页面不应跳转，当前 URL：{self.driver.current_url}"
            print("断言通过：无标题提交时页面未跳转")
            blog_driver.get_screen_shot()
            print("===== 登录状态下无标题提交博客测试通过 =====")
        except AssertionError as e:
            print(f"无标题提交博客测试失败：{str(e)}")
            blog_driver.get_screen_shot()
            raise
        except Exception as e:
            print(f"无标题提交博客测试异常：{str(e)}")
            blog_driver.get_screen_shot()
            raise

    def edit_login_no_content_submit_test(self):
        """登录状态下无内容提交测试"""
        try:
            print(f"\n===== 执行登录状态下无内容提交博客测试 =====")
            login_test = BlogLogin()
            login_test.login_suc_test("admin", "123")
            self.driver.get(self.edit_url)
            time.sleep(2)

            title_input = self.driver.find_element(By.CSS_SELECTOR, "#title")
            submit_btn = self.driver.find_element(By.CSS_SELECTOR, "#submit")
            blog_title = "无内容提交测试的标题"
            title_input.clear()
            title_input.send_keys(blog_title)
            print(f"输入标题：{blog_title}，未输入内容")

            submit_btn.click()
            time.sleep(1)
            assert self.driver.current_url == self.edit_url, f"无内容提交时页面不应跳转，当前 URL：{self.driver.current_url}"
            print("断言通过：无内容提交时页面未跳转")
            blog_driver.get_screen_shot()
            print("===== 登录状态下无内容提交博客测试通过 =====")
        except AssertionError as e:
            print(f"无内容提交博客测试失败：{str(e)}")
            blog_driver.get_screen_shot()
            raise
        except Exception as e:
            print(f"无内容提交博客测试异常：{str(e)}")
            blog_driver.get_screen_shot()
            raise

    def edit_unlogin_submit_test(self):
        """未登录状态下提交博客测试"""
        try:
            print(f"\n===== 执行未登录状态下提交博客测试 =====")
            blog_driver.quit_driver()
            new_driver = Driver()
            self.driver = new_driver.driver
            self.driver.get(self.edit_url)
            time.sleep(2)
            print(f"未登录，访问编辑页：{self.edit_url}")

            title_input = self.driver.find_element(By.CSS_SELECTOR, "#title")
            content_input = self.driver.find_element(By.CSS_SELECTOR, "#content")
            submit_btn = self.driver.find_element(By.CSS_SELECTOR, "#submit")
            title_input.send_keys("未登录提交测试")
            content_input.send_keys("未登录状态下不应提交成功")
            print("输入标题和内容，尝试提交")

            submit_btn.click()
            time.sleep(2)
            assert self.driver.current_url == "http://192.168.47.135:8653/blog_system/blog_login.html",
            print("断言通过：未登录状态下提交，跳转至登录页")
            new_driver.get_screen_shot()
            new_driver.quit_driver()
            print("===== 未登录状态下提交博客测试通过 =====")
        except AssertionError as e:
            print(f"未登录提交博客测试失败：{str(e)}")
            raise
        except Exception as e:
            print(f"未登录提交博客测试异常：{str(e)}")
            raise

if __name__ == "__main__":
    edit_test = BlogEdit()
    edit_test.edit_login_normal_submit_test()
    edit_test.edit_login_no_title_submit_test()
    edit_test.edit_login_no_content_submit_test()
    edit_test.edit_unlogin_submit_test()

五、测试用例执行入口

为了方便执行所有测试用例，我们创建一个统一的执行入口文件，按模块顺序执行测试：

import sys
import time
from common.Utils import blog_driver
from cases.BlogLogin import BlogLogin
from cases.BlogList import BlogList
from cases.BlogDetail import BlogDetail
from cases.BlogEdit import BlogEdit

def run_all_cases():
    """执行所有自动化测试用例"""
    print("="*50)
    print("开始执行博客系统自动化测试用例")
    print(f"执行时间：{time.strftime('%Y-%m-%d %H:%M:%S')}")
    print("="*50)

    test_results = {"passed": 0, "failed": 0, "total": 0}
    try:
        # 1. 执行登录模块测试
        print("\n" + "="*30)
        print("开始执行登录模块测试")
        print("="*30)
        login_test = BlogLogin()
        login_test.login_suc_test("admin", "123")
        test_results["passed"] += 1
        login_test.login_suc_test("lisi", "123")
        test_results["passed"] += 1
        login_test.login_fail_test("admin", "111", "用户名或密码错误!")
        test_results["passed"] += 1
        login_test.login_empty_username_test()
        test_results["passed"] += 1
        login_test.login_empty_password_test()
        test_results["passed"] += 1

        # 2. 执行博客列表模块测试
        print("\n" + "="*30)
        print("开始执行博客列表模块测试")
        print("="*30)
        list_test = BlogList()
        list_test.list_login_status_test()
        test_results["passed"] += 1
        list_test.list_unlogin_status_test()
        test_results["passed"] += 1

        # 3. 执行博客详情模块测试
        print("\n" + "="*30)
        print("开始执行博客详情模块测试")
        print("="*30)
        detail_test = BlogDetail(blog_id=15)
        detail_test.detail_login_status_test()
        test_results["passed"] += 1
        detail_test.detail_unlogin_status_test()
        test_results["passed"] += 1

        # 4. 执行博客编辑模块测试
        print("\n" + "="*30)
        print("开始执行博客编辑模块测试")
        print("="*30)
        edit_test = BlogEdit()
        edit_test.edit_login_normal_submit_test()
        test_results["passed"] += 1
        edit_test.edit_login_no_title_submit_test()
        test_results["passed"] += 1
        edit_test.edit_login_no_content_submit_test()
        test_results["passed"] += 1
        edit_test.edit_unlogin_submit_test()
        test_results["passed"] += 1

    except Exception as e:
        print(f"\n测试执行过程中出现异常：{str(e)}")
        test_results["failed"] += 1
    finally:
        test_results["total"] = test_results["passed"] + test_results["failed"]
        blog_driver.quit_driver()

        print("\n" + "="*50)
        print("博客系统自动化测试执行完成")
        print("="*50)
        print(f"总用例数：{test_results['total']}")
        print(f"通过用例数：{test_results['passed']}")
        print(f"失败用例数：{test_results['failed']}")
        pass_rate = (test_results['passed'] / test_results['total']) * 100 if test_results['total'] > 0 else 100
        print(f"测试通过率：{pass_rate:.2f}%")
        print("="*50)

        if test_results["failed"] > 0:
            sys.exit(1)
        else:
            sys.exit(0)

if __name__ == "__main__":
    run_all_cases()

六、测试报告生成

测试执行完成后，需要生成一份规范的测试报告，用于向团队展示测试结果、进度和问题。以下是基于本次实战的测试报告模板（可根据实际项目调整）：

【测试报告】博客系统 UI 自动化测试报告

1. 报告基本信息

2. 项目背景

2.1 测试目标及测试任务概括

测试目标：验证博客系统核心功能（登录、列表、详情、编辑）的正确性和稳定性，实现关键流程自动化，减少手动测试成本，支撑项目上线； 测试任务：设计并执行 14 条 UI 自动化测试用例，覆盖正常场景与异常场景，生成测试报告并跟踪问题修复。

2.2 被测系统及相关信息

被测系统：博客系统（Web 端）；系统地址：http://xxxxxxxxxxxxxxxxxxxxxx；代码包及文档：diff 链接（根据实际填写）、接口文档（根据实际填写）、《测试计划》；依赖环境：Chrome 浏览器 110+、Python 3.8+、Selenium 4.10.0。

2.3 产品需求和设计文档

《博客系统需求文档》；《博客系统技术设计文档》；《博客系统 UI 设计图》。

3. 测试安排

4. 测试结果汇总

4.1 测试用例执行情况

4.2 缺陷统计与分析

本次自动化测试未发现新增缺陷；历史缺陷修复验证：所有已提交的缺陷均已修复，且在本次自动化测试中无回归。

4.3 截图示例

5. 测试结论与建议

5.1 测试结论

博客系统核心功能（登录、列表、详情、编辑）的 UI 自动化测试已全部完成，14 条用例全部通过，通过率 100%；系统在测试场景下运行稳定，未出现功能异常、崩溃等问题；自动化测试框架运行正常，能够准确执行测试用例、捕获异常并生成截图，可支撑后续迭代的回归测试。

5.2 后续建议

扩展用例覆盖范围：新增博客删除、修改密码、评论等功能的自动化用例；集成 CI/CD 流程：将自动化测试脚本集成到 Jenkins 等工具，实现每次代码提交后自动执行测试；优化框架稳定性：增加重试机制（如元素未找到时自动重试）、日志详细程度优化；定期维护用例：当系统 UI 发生变更时，及时更新用例中的元素选择器，确保自动化用例的有效性。

总结

通过本次博客系统的自动化测试实战，我们从 0 到 1 搭建了一套完整的 UI 自动化测试框架，覆盖了用例设计、脚本开发、执行入口、报告生成等全流程，并且实现了代码复用、异常处理、截图追溯等关键功能。

自动化测试是一个实践出真知的领域，只有多动手、多踩坑，才能不断提升自己的技术水平。希望本文的实战案例能为你提供一些帮助，祝你在自动化测试的道路上越走越远！