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

news/2025/3/10 12:07:12/

文章目录

  • 一、项目背景
  • 二、项目简介
    • 登录功能
    • 好友列表页面
    • 好友会话页面
  • 三、测试工具和环境
  • 四、测试计划
    • 测试用例
    • 部分人工手动测试截图
    • web自动化测试
      • 测试用例
      • 代码框架
      • 配置内容代码文件(Utils.py)
      • 登录页面代码文件(WeChatLogin.py)
      • 好友列表测试用例代码文件(WeChatPeopleDetail.py)
      • 好友会话测试用例代码文件(WeChatFormationDetail.py)
      • 测试项目代码文件(RunTest.py)
  • 五、总结


一、项目背景

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

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

  • 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 WeChatDriverclass 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)  # 调用截图方法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):"""登录状态下消息详情页测试"""# 验证消息图标存在性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)有时候出现卡顿,需重新打开编写的自动化脚本软件。

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

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

  • 增加浏览器兼容性验证

  • 补充性能测试场景



http://www.ppmy.cn/news/1578070.html

相关文章

自执行函数(Self-Invoking Function)

自执行函数(Self-Invoking Function),也被称为立即执行函数表达式(Immediately Invoked Function Expression,IIFE),是 JavaScript 里一种特殊的函数形式,它定义后会立即被执行。下面…

Manus邀请码获取方法 + 使用指南(直接领取pdf)

昨天发布消息通用AI智能体 Manus今天彻底火了,大家估计还在找邀请码吧。 本人已注册成功,Manus邀请码获取方法 使用指南的pdf 无套路分享给大家。 邀请码获取方法 ✅ https://pan.quark.cn/s/5e062d19e7cf Manus界面预览

小程序开发总结

今年第一次帮别人做小程序。 从开始动手到完成上线,一共耗时两天。AI 让写代码变得简单、高效。 不过,小程序和 Flutter 等大厂开发框架差距实在太大,导致我一开始根本找不到感觉。 第一,IDE 不好用,各种功能杂糅在…

【网络编程】重叠I/O模型

十、基于I/O模型的网络开发 10.10 重叠I/O 模型 10.10.1 基本概念 在 Winsock 中,重叠 I/O(Overlapped I/O) 模型能达到更佳的系统性能,高于 select 模 型、异步选择和事件选择3种。重叠模型的基本设计原理便是让应用程序使用一个重叠的数据 结 构(WS…

[通讯协议]232通信

RS-232 简介 RS-232是一种广泛应用的串行通信接口标准,使用的协议就是串口协议。 通信能力 单端信号传输:信号以地线为参考,逻辑“1”为-3V至-15V,逻辑“0”为3V至15V。点对点通信:仅支持两个设备之间的通信&#x…

Matlab:矩阵运算篇——矩阵数学运算

目录 1.矩阵的加法运算 实例——验证加法法则 实例——矩阵求和 实例——矩阵求差 2.矩阵的乘法运算 1.数乘运算 2.乘运算 3.点乘运算 实例——矩阵乘法运算 3.矩阵的除法运算 1.左除运算 实例——验证矩阵的除法 2.右除运算 实例——矩阵的除法 ヾ( ̄…

海盗王通信架构图

好久没有发过有关海盗王的文章了。 本人用golang重写过海盗王的网关、商城、账号服务端,还有groupserver也在重写中。 今天发一个海盗王的通信架构图给大家,希望对研究海盗王的同学们有所启发。

【Go每日一练】统计字符出现的次数

👻创作者:丶重明 👻创作时间:2025年3月9日 👻擅长领域:运维 目录 1.😶‍🌫️题目:2.😶‍🌫️资源:3.😶‍🌫️代…