簡易的微信聊天網頁版【項目測試報告】

文章目錄

一、項目背景
二、項目簡介
- 登錄功能
- 好友列表頁面
- 好友會話頁面
三、測試工具和環境
四、測試計劃
- 測試用例
- 部分人工手動測試截圖
- web自動化測試
- - 測試用例
  - 代碼框架
  - 配置內容代碼文件（Utils.py）
  - 登錄頁面代碼文件（WeChatLogin.py）
  - 好友列表測試用例代碼文件（WeChatPeopleDetail.py）
  - 好友會話測試用例代碼文件（WeChatFormationDetail.py）
  - 測試項目代碼文件（RunTest.py）
五、總結

一、項目背景

本系統采用前后端分離架構實現，通過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 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)  # 強制等待 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()