谷歌工程師吐槽：視覺測(cè)試做了8年，為什么還是這么難搞

去年一個(gè)前端團(tuán)隊(duì)為排查按鈕偏移2像素的問題，花了47小時(shí)。最后發(fā)現(xiàn)是Chrome更新導(dǎo)致的渲染差異——這種故事在視覺差分測(cè)試（VDT）領(lǐng)域每天都在上演。

VDT也叫視覺回歸測(cè)試（VRT），核心邏輯簡單粗暴：給UI截圖，存下來，下次跑測(cè)試再截一張，兩張圖疊在一起找不同。聽起來像找茬游戲，實(shí)際玩起來卻像在開盲盒。

像素級(jí)對(duì)比：理想豐滿，現(xiàn)實(shí)骨感

最常見的做法是逐像素比對(duì)。兩張圖疊在一起，透明度調(diào)低，差異區(qū)域會(huì)顯出鬼影。或者直接用算法掃描每個(gè)像素點(diǎn)，記錄RGB值偏差超過閾值的位置。

但CSS的渲染從來都不是確定性的。同一臺(tái)機(jī)器，同一個(gè)瀏覽器版本，兩次截圖可能有0.3%的像素噪聲。抗鋸齒算法、子像素渲染、GPU加速的細(xì)微差異，都會(huì)讓"完全一致"變成不可能任務(wù)。

于是工具廠商開始卷AI。用機(jī)器學(xué)習(xí)判斷"這算不算真正的差異"，試圖區(qū)分"按鈕確實(shí)移位了"和"陰影渲染抖了一下"。但訓(xùn)練數(shù)據(jù)從哪里來？每個(gè)團(tuán)隊(duì)的UI風(fēng)格不同，誤報(bào)率依然居高不下。

一位從業(yè)8年的工程師直言：我們不是在測(cè)試視覺，是在和瀏覽器的渲染引擎賭博。

應(yīng)用場(chǎng)景分裂：App團(tuán)隊(duì)vs網(wǎng)站團(tuán)隊(duì)

VDT的痛點(diǎn)還體現(xiàn)在需求分化上。

做應(yīng)用（Application）的團(tuán)隊(duì)，對(duì)2像素偏移基本無感。他們更想要"冒煙測(cè)試"——確認(rèn)頁面沒崩、核心流程能走通。比如防止某個(gè)全局樣式意外把透明度設(shè)為0.6，導(dǎo)致整個(gè)界面變成幽靈模式。

做網(wǎng)站（Site）的團(tuán)隊(duì)則相反。營銷頁面對(duì)像素級(jí)還原有執(zhí)念，品牌色偏了5%都可能觸發(fā)返工。他們的測(cè)試覆蓋整頁截圖，但這也意味著任何動(dòng)態(tài)內(nèi)容——日期、推薦算法、A/B測(cè)試桶——都會(huì)制造假陽性警報(bào)。

兩種需求，同一套技術(shù)棧，工具廠商被迫做選擇題。

維護(hù)成本：截圖即債務(wù)

每個(gè)存下來的截圖都是技術(shù)債務(wù)。設(shè)計(jì)系統(tǒng)迭代一次，幾百張基準(zhǔn)圖集體作廢。團(tuán)隊(duì)規(guī)模上去后，VDT的維護(hù)工時(shí)經(jīng)常超過寫新功能的工時(shí)。

有團(tuán)隊(duì)嘗試過"智能忽略"策略：用DOM選擇器標(biāo)記動(dòng)態(tài)區(qū)域，比對(duì)時(shí)跳過。但標(biāo)記本身需要人工維護(hù)，新成員經(jīng)常漏標(biāo)，導(dǎo)致漏檢真實(shí)bug。

更激進(jìn)的方案是放棄像素比對(duì)，轉(zhuǎn)向"結(jié)構(gòu)比對(duì)"——提取元素的尺寸、位置、顏色值做對(duì)比。但這又繞回了CSS的復(fù)雜性：一個(gè)flex布局的微小調(diào)整，可能引發(fā)連鎖位置變化，結(jié)構(gòu)比對(duì)會(huì)報(bào)出一堆無關(guān)緊要的偏移。

工程師的終極困惑是：我們到底在防什么？是防視覺回歸，還是防"我沒意識(shí)到改了這里"？

工具生態(tài)：百花齊放，各懷鬼胎

開源工具從BackstopJS到Percy再到Playwright的內(nèi)置方案，商業(yè)服務(wù)從Chromatic到Applitools，每家都在解決不同層面的問題。

BackstopJS免費(fèi)但配置繁瑣，Percy被BrowserStack收購后定價(jià)模糊，Chromatic綁定Storybook生態(tài)，Applitools的AI視覺網(wǎng)格貴到中小企業(yè)望而卻步。沒有銀彈，只有權(quán)衡。

Playwright 1.40版本加入了實(shí)驗(yàn)性的"toHaveScreenshot"斷言，試圖用瀏覽器原生能力降低門檻。但社區(qū)反饋兩極：有人稱贊"終于不用配Docker了"，有人抱怨"截圖穩(wěn)定性還是不如Puppeteer時(shí)代"。

技術(shù)選型變成了一場(chǎng)宗教戰(zhàn)爭。選A的人嘲笑選B的人"還在用2018年的方案"，選B的人反擊選A的人"被廠商鎖死"。

如果視覺測(cè)試的終極形態(tài)不是截圖比對(duì)，那應(yīng)該是什么？組件級(jí)的設(shè)計(jì)令牌（Design Token）校驗(yàn)？渲染管道的確定性保證？還是干脆承認(rèn)UI的視覺層本就不可測(cè)試，把資源投到人工走查流程的優(yōu)化上？