简易的微信聊天网页版【项目测试报告】

一、项目背景

本系统采用前后端分离架构实现，通过WebSocket协议实现实时通讯功能，结合数据库进行聊天记录存储，并部署于云服务器。
前端包含三大核心页面：登录验证页、好友会话列表页、通讯录好友页，构建了基础的即时通讯体验。
系统主要实现以下功能模块：个人好友列表、好友消息实时收发、聊天记录查询等功能。

当前版本存在以下待优化点：

• 1. 用户体系仅支持预设账号登录（需提前录入数据库校验），未开放自主注册通道；
• 2. 好友关系采用静态数据模拟，暂未实现动态添加/删除功能；
• 3. 消息状态提示（如已读/送达）功能尚未完整实现。

该即时通讯系统可实现基本的文字消息交互，支持查看历史聊天记录（按时间倒序展示），虽然功能相对基础，
但已构建起网页端即时通讯的核心框架，满足用户基本的文字聊天需求。

二、项目简介

本系统主要实现以下核心功能：

• 用户登录、
• 好友消息实时收发、
• 聊天记录查询。

登录功能

用户需通过预设账号登录(账号信息已固化至数据库，暂不开放自主注册)；

• 登录成功需点击警告窗口中确认按钮，然后跳转至好友会话列表页;
• 登录异常状态下，警告窗口提示登录失败！

好友列表页面

纵向排列好友列表，展示好友昵称，点击对应的好友跳转到对应的会话窗口。

好友会话页面

顶部状态栏显示当前对话好友昵称；
消息气泡左右分流（右侧绿色为发送方，左侧白色为接收方）；
自动加载最近历史记录（按时间倒序排列）；
文本输入框支持即时内容发送（点击发送按钮）

三、测试工具和环境

处理器 11th Gen Intel(R) Core(TM) i5-1155G7 @ 2.50GHz 2.50 GHz
机带 RAM： 16.0 GB (15.8 GB 可用)
系统类型： 64 位操作系统, 基于 x64 的处理器
版本： Windows 11 家庭中文版
操作系统版本： 26100.3194

Chrome浏览器版本 ：133.0.6943.142（正式版本） （64 位）
自动化脚本运行环境：PyCharm 2024.2.1

四、测试计划

测试用例

部分人工手动测试截图

正常登录：输入预设账号和密码

异常登录：输入未预设账号和密码

正常登录后跳转的页面

正常登录后好友列表页

web自动化测试

测试用例

代码框架

配置内容代码文件（Utils.py）

# 导入所需的模块
import datetime  # 用于处理日期和时间
import os  # 用于文件和目录操作
import sys  # 用于获取调用栈信息

# 导入Selenium相关模块
from selenium import webdriver  # Selenium核心模块
from selenium.webdriver.chrome.service import Service  # Chrome浏览器服务
from webdriver_manager.chrome import ChromeDriverManager  # 自动管理ChromeDriver

# 创建浏览器驱动类
class Driver:
    driver = ""  # 类属性，用于保存浏览器驱动实例
    
    def __init__(self):
        """初始化浏览器驱动配置"""
        # 创建Chrome浏览器选项对象（可用于添加扩展、无头模式等配置）
        options = webdriver.ChromeOptions()
        
        # 指定ChromeDriver的路径
        driver_path = "D:/Downloads/chromedriver-win64/chromedriver-win64/chromedriver.exe"
        
        # 创建Chrome浏览器驱动实例
        self.driver = webdriver.Chrome(
            executable_path=driver_path,  # 指定驱动路径
            options=options  # 传入浏览器选项
        )
        
        # 设置隐式等待（作用于整个浏览器生命周期，查找元素时的默认等待时间）
        self.driver.implicitly_wait(2)  # 单位：秒

    def getScreeShot(self):
        """屏幕截图方法"""
        # 生成日期格式的目录名（示例：2023-08-01）
        dirname = datetime.datetime.now().strftime("%Y-%m-%d")
        
        # 拼接截图保存路径（上级目录的images文件夹下）
        screenshot_dir = "../images/" + dirname
        
        # 如果目录不存在则创建
        if not os.path.exists(screenshot_dir):
            os.mkdir(screenshot_dir)
            
        # 生成文件名格式：
        # 调用当前方法的上层方法名 + 时间戳 + 后缀（示例：test_login_2023-08-01-143045.png）
        filename = (
            sys._getframe().f_back.f_code.co_name  # 获取调用该方法的函数名
            + datetime.datetime.now().strftime("%Y-%m-%d-%H%M%S")
            + ".png"
        )
        
        # 保存截图到指定路径
        self.driver.save_screenshot(os.path.join(screenshot_dir, filename))

# 创建全局浏览器驱动实例（可被其他模块导入使用）
WeChatDriver = Driver()

登录页面代码文件（WeChatLogin.py）

# 测试微信登录界面

# 从selenium库中导入By类，用于定位网页元素
from selenium.webdriver.common.by import By
# 从selenium库中导入expected_conditions模块，用于设置显示等待的条件
from selenium.webdriver.support import expected_conditions as EC
# 从selenium库中导入WebDriverWait类，用于实现显示等待
from selenium.webdriver.support.wait import WebDriverWait

# 从自定义的common.Utils模块中导入WeChatDriver类，用于创建和管理浏览器驱动
from common.Utils import WeChatDriver


class WeChatLogin:
    # 初始化类属性，用于存储登录页面的URL和浏览器驱动对象
    url = ""
    driver = ""

    def __init__(self):
        # 给登录页面的URL赋值，这里是本地的登录页面地址
        self.url = "http://127.0.0.1:8080/login.html"
        # 获取WeChatDriver类中的driver对象，用于操作浏览器
        self.driver = WeChatDriver.driver
        # 打开指定的登录页面
        self.driver.get(self.url)

    # 成功登陆的测试用例
    def LoginSucTest(self):
        # 若连续多次的send_keys则会出现关键词拼接，而不是替换。若要替换需要先clear
        # 找到用户名输入框元素，并清空其中的内容
        self.driver.find_element(By.CSS_SELECTOR, "#username").clear()
        # 找到密码输入框元素，并清空其中的内容
        self.driver.find_element(By.CSS_SELECTOR, "#password").clear()

        # 向用户名输入框中输入正确的用户名 "zhangsan"
        self.driver.find_element(By.CSS_SELECTOR, "#username").send_keys("zhangsan")
        # 向密码输入框中输入正确的密码 "123"
        self.driver.find_element(By.CSS_SELECTOR, "#password").send_keys("123")
        # 找到登录按钮元素，并点击该按钮进行登录操作
        self.driver.find_element(By.CSS_SELECTOR, "#submit").click()

        # 添加显示等待
        # 创建一个WebDriverWait对象，设置最大等待时间为2秒
        wait = WebDriverWait(self.driver, 2)
        # 等待直到页面上出现弹窗
        wait.until(EC.alert_is_present())
        # 切换到当前页面的弹窗
        alert = self.driver.switch_to.alert
        # 点击弹窗的确认按钮
        alert.accept()

        # 查找登录成功页面的元素：昵称：body > div.client-container > div > div.left > div.user
        # 查找登录成功页面中显示用户昵称的元素，若找到则说明登录成功
        self.driver.find_element(By.CSS_SELECTOR, "body > div.client-container > div > div.left > div.user")

        # 添加屏幕截图
        # 调用WeChatDriver类的getScreeShot方法，对当前页面进行截图
        WeChatDriver.getScreeShot()

    # 异常登陆的测试用例
    def LoginFailTest(self):
        # 若连续多次的send_keys则会出现关键词拼接，而不是替换。若要替换需要先clear
        # 找到用户名输入框元素，并清空其中的内容
        self.driver.find_element(By.CSS_SELECTOR, "#username").clear()
        # 找到密码输入框元素，并清空其中的内容
        self.driver.find_element(By.CSS_SELECTOR, "#password").clear()

        # 错误的用户名
        # 向用户名输入框中输入错误的用户名 "admin"
        self.driver.find_element(By.CSS_SELECTOR, "#username").send_keys("admin")
        # 向密码输入框中输入密码 "123"
        self.driver.find_element(By.CSS_SELECTOR, "#password").send_keys("123")

        # 找到登录按钮元素，并点击该按钮进行登录操作
        self.driver.find_element(By.CSS_SELECTOR, "#submit").click()

        # 检查是否登录失败:看是否出现弹窗
        # 添加显示等待
        # 创建一个WebDriverWait对象，设置最大等待时间为13秒
        wait = WebDriverWait(self.driver, 13)
        # 等待直到页面上出现弹窗
        wait.until(EC.alert_is_present())
        # 切换到当前页面的弹窗
        alert = self.driver.switch_to.alert
        # 点击弹窗的确认按钮
        alert.accept()
        # 添加屏幕截图
        # 调用WeChatDriver类的getScreeShot方法，对当前页面进行截图
        WeChatDriver.getScreeShot()

好友列表测试用例代码文件（WeChatPeopleDetail.py）

# 导入所需模块
import time  # 时间相关操作
from selenium.webdriver.common.by import By  # Selenium定位策略
from common.Utils import WeChatDriver  # 自定义的微信驱动工具类

# 微信联系人详情页测试类
class WeChatPeopleDetail:
    url = ""  # 页面URL（已通过__init__初始化）
    driver = ""  # 浏览器驱动实例
    
    def __init__(self):
        """初始化方法，配置测试环境"""
        self.url = "http://127.0.0.1:8080/client.html"  # 测试页面地址
        self.driver = WeChatDriver.driver  # 获取全局浏览器驱动实例
        self.driver.get(self.url)  # 打开测试页面

    def PeopleDetailTestByLogin(self):
        """登录状态下的详情页测试"""
        
        # 验证联系人图标存在性（如果元素未找到会抛出NoSuchElementException）
        # 使用CSS选择器定位元素
        self.driver.find_element(
            By.CSS_SELECTOR,
            "body > div.client-container > div > div.left > div.tab > div.tab-friend"
        )

        # 添加固定等待
        time.sleep(1)  # 强制等待 1 秒，可能影响测试效率

        # 调用截图方法
        WeChatDriver.getScreeShot()  # 保存当前页面截图

好友会话测试用例代码文件（WeChatFormationDetail.py）

# 导入所需模块
import time  # 时间相关操作
from selenium.webdriver.common.by import By  # Selenium元素定位策略
from common.Utils import WeChatDriver  # 自定义的微信驱动工具类

# 微信消息列表页测试类
class WeChatFormationDetail:
    url = ""  # 页面URL（已通过__init__初始化）
    driver = ""  # 浏览器驱动实例
    
    def __init__(self):
        """初始化方法，配置测试环境"""
        self.url = "http://127.0.0.1:8080/client.html"  # 测试页面地址
        self.driver = WeChatDriver.driver  # 获取全局浏览器驱动实例
        self.driver.get(self.url)  # 打开测试页面

    def FormationDetailTestByLogin(self):
        """登录状态下消息详情页测试（方法名建议改为 test_message_details）"""
        
        # 验证消息图标存在性
        # 使用层级过深的选择器，容易受页面结构变化影响
        self.driver.find_element(
            By.CSS_SELECTOR,
            "body > div.client-container > div > div.left > div.tab > div.tab-session"
        )

        # 添加固定等待
        time.sleep(1)  # 强制等待可能导致测试效率低下
        
        # 调用截图方法
        WeChatDriver.getScreeShot()  # 保存当前页面状态

测试项目代码文件（RunTest.py）

# 导入测试模块和工具类
from tests import WeChatLogin  # 微信登录测试类
from tests import WeChatPeopleDetail  # 联系人详情测试类
from tests import WeChatFormationDetail  # 消息列表测试类
from common.Utils import WeChatDriver  # 浏览器驱动工具类

if __name__ == '__main__':
    # 执行登录失败测试用例
    WeChatLogin.WeChatLogin().LoginFailTest()
    
    # 执行登录成功测试用例
    WeChatLogin.WeChatLogin().LoginSucTest()
 	
 	# 消息列表页面测试
    WeChatFormationDetail.WeChatFormationDetail().FormationDetailTestByLogin()

    # 联系人列表页面测试
    WeChatPeopleDetail.WeChatPeopleDetail().PeopleDetailTestByLogin()

    # 退出浏览器
    WeChatDriver.driver.quit()

五、总结

在实际测试中，遇到以下几个问题：

• （1）遇到页面元素查找的情况，原因是网络渲染过慢造成的；
• （2）浏览器驱动管理工具 webdriver-manager由于网络环境的问题，不能自动下载对应的浏览器驱动，需自己先下载好，再去指定浏览器驱动安装的路径；
• （3）有时候出现卡顿，需重新打开编写的自动化脚本软件。

当前系统核心功能基本可用，满足基础聊天需求，但存在以下待改进项：

• 页面元素定位稳定性需优化

• 增加浏览器兼容性验证

• 补充性能测试场景