一、背景

• 背景：
  • 組件庫全局改動場景多，組件之間耦合場景多–時常需要全場景回歸
  • 組件庫demo有200多個，手動全局回歸耗時耗力
  • 細微偏差純視覺無法辨別
• 可行性分析：
  • 組件庫功能占比
    • L1（視覺層）：圖片對比確保整體視覺一致性（占比40%）
    • L2（屬性層）：傳統斷言驗證核心功能（占比50%）
    • L3（交互層）：行為模擬驗證動態邏輯（占比10%）
  • 時間成本分析
    • 視覺層：5個工作日可實現所有demo截圖對比，無需補充場景，單月用例維護時間只需2個工作日
    • 屬性層：無法一步實現所有demo屬性測試，單月用例維護/場景維護或大于5個工作日
  • 技術實現可行性
    • 視覺層：python 可實現，selenium可實現瀏覽器驅動和頁面截圖，PIL可實現圖片對比
    • 屬性層：可實現架構多，但目前沒有找到快速獲取組件屬性的方式和屬性校準的方式
• 應用場景：
  • 視覺密集型組件（圖表/靜態圖等）
  • 回歸測試中視覺回歸防御
• 整體思路：
  • 找到組件庫demo對應URL規則批量抓取
  • 截圖保存到本地
  • PIL工具對比輸出差異
    二、操作步驟
    2.1 開發前的準備工作
    準備工作一
• Selenium驅動安裝
  準備工作二
• demo目錄結構分析
  2.2 開發
  代碼邏輯：
  爬取所有路徑下demo名稱，數組形式輸出

import osdef list_directories(path):"""列出指定路徑下的所有直接子目錄返回格式：目錄名稱列表（按字母順序排序）"""try:# 獲取路徑下所有條目entries = os.listdir(path)# 過濾出目錄并排序directories = sorted([entry for entry in entriesif os.path.isdir(os.path.join(path, entry))])return directoriesexcept FileNotFoundError:print(f"錯誤：路徑不存在 - {path}")return []except PermissionError:print(f"錯誤：沒有訪問權限 - {path}")return []except Exception as e:print(f"未知錯誤：{str(e)}")return []if __name__ == "__main__":drislist = []target_path = "/Users/forest/Desktop/"dirs = list_directories(target_path)if dirs:print(f"在 {target_path} 下找到 {len(dirs)} 個目錄：")for idx, directory in enumerate(dirs, 1):print(f"{idx}. {directory}")target_path1 = "/Users/forest/Desktop/"+directory+"/demo"dirs1 = list_directories(target_path1)if dirs1:for idx, directory1 in enumerate(dirs1, 1):print(f"{idx}. {directory1}")drislist.append(directory+"-"+directory1)else:print("未找到任何目錄或路徑無效")# 測試用例print(drislist)test_path = "/Users/forest/Desktop/"

圖片對比compare_images方法

from PIL import Image, ImageChops
from datetime import datetimedef compare_images(image1_path, image2_path, output_diff_path=None):# 打開兩張圖片img1 = Image.open(image1_path)img2 = Image.open(image2_path)# 確保圖片尺寸相同if img1.size != img2.size:raise ValueError("圖片尺寸不一致，無法對比！")# 計算差異diff = ImageChops.difference(img1, img2)if diff.getbbox() is None:print("圖片完全一致！")return 0.0  # 差異百分比# 統計差異像素pixels = list(diff.getdata())diff_pixels = sum(1 for pixel in pixels if pixel != (0, 0, 0, 0))total_pixels = len(pixels)diff_percentage = (diff_pixels / total_pixels) * 100# 保存差異圖（可選）if output_diff_path:diff.save(output_diff_path)print(f"差異圖已保存至: {output_diff_path}")print(f"圖片差異百分比: {diff_percentage:.2f}%")return diff_percentage

主方法

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
import time
from datetime import datetimefrom app.diff.diff import compare_images
from app.diff.moduleDemoData import moduleDemoDatasindex = 0now = datetime.now()
date_str1 = now.strftime("%Y-%m-%d")
date_str ='2025-08-11'
print(date_str)
# 配置 Chrome 選項（無頭模式）
chrome_options = Options()
chrome_options.add_argument("--headless")  # 無界面模式
chrome_options.add_argument("--disable-gpu")
chrome_options.add_argument("--window-size=1920,1080")  # 截圖尺寸# 啟動瀏覽器driver = webdriver.Chrome(options=chrome_options)output_diff_path = '/Users/forest/PycharmProjects/static'# 等待頁面加載（可根據需要調整）
passModuleDemoData = []
localModuleDemoData = []
for moduleDemoData in moduleDemoDatas:passUrl = "http://localhost:4600/v2/~examplesh-"+moduleDemoData+"-example"driver.get(passUrl)time.sleep(5)
# 截圖并保存passScreenshot_path = "/Users/forest/pass"+moduleDemoData+".png"driver.save_screenshot(passScreenshot_path)print(f"截圖已保存至: {passScreenshot_path}")passModuleDemoData.append(passScreenshot_path)for moduleDemoData in moduleDemoDatas:localUrl = "-"+moduleDemoData+"-example"driver.get(localUrl)time.sleep(5)# 截圖并保存localScreenshot_path = "moduleDemoData+".png"driver.save_screenshot(localScreenshot_path)print(f"截圖已保存至: {localScreenshot_path}")localModuleDemoData.append(localScreenshot_path)for moduleDemoData in moduleDemoDatas:print(compare_images(passModuleDemoData[index], localModuleDemoData[index]))if compare_images(passModuleDemoData[index], localModuleDemoData[index]) > 0:compare_images(passModuleDemoData[index], localModuleDemoData[index], output_diff_path+"error"+date_str1+moduleDemoData+".png")print("error"+moduleDemoData)index += 1
# 關閉瀏覽器
driver.quit()

參數列表：羅列代碼中涉及的參數和含義
參數 含義
compare_images ：return 0無差異

暫時無法在飛書文檔外展示此內容
三、總結
總結本次技術應用中可積累的代碼和經驗
技術經驗
有待提升

• 可分批運行
• …版本發現bug數
• 樣式隔離節省回歸時間30%以上
• 滾動截圖
• …