站长圈从不公开的UI测试真相

　　去年二月，改版上线翻车——就那个灰底白字+圆角4px+间距12的“极简登录页”，PM说“视觉降噪”，我点开F12切到Elements面板的时候，Chrome DevTools正停在Console tab，光标还在闪，没来得及输console.log，后端老周就推门喊：“你先别点提交，我刚发现token有效期被你们前端写死成三百秒了。”

　　我原以为是token逻辑问题，结果F5重刷三遍，发现按钮hover态压根没触发：CSS里:hover伪类绑在span上，可实际click的是button；button里嵌了个span，span又裹着图标font，font-family是iconfont.ttf，但woff2文件漏传CDN——不是404，是302跳转到维护页的静态HTML，而那个HTML里没有任何CSS……这事儿没人测，因为所有人默认“字体加载失败=图标不显示”，没人想过它会劫持整个伪类链路。这个我敢打包票。

　　旁边工位的阿哲去倒水，水杯磕在饮水机凹槽里那声“咔”特别脆，他转身时袖口扫过我左屏，把Wallpaper Engine里那只循环游动的蓝鳍金枪鱼给挡了半秒——我右屏开着三个DevTools窗口，最上面那个还卡在Network tab的waterfall图里，瀑布流第三列是login.css，状态栏写着“Stalled”，没报错，没警告，就卡着，像被掐住脖子的鱼。我抬手、按键、松手——F5，再F5，第三次F5的时候盯着鼠标左键弹起那一毫秒的回弹感，忽然想起来：我们从来不管Stalled是不是真 stalled，只看Status Code是不是200。这个我说不准。

　　跟产品经理吵完的下午三点十七分，我撕下便签纸写“button:focus-visible缺失”，贴在显示器右下角边框上，胶没干透，风一吹翘起来一角，遮住了任务栏右下角的系统时间——就那一点，刚好盖住秒数。她站在门口说“用户根本不会tab进登录框”，我没抬头，手指还在敲键盘，Ctrl+S之后顿了半秒，敲掉一个多余的空格，回车。键盘Q键卡了一下，按下去没弹起，我用指甲往上顶，顶出轻微的“咔哒”，跟阿哲刚才那声一模一样。后来查了，是机械轴进了奶茶渣——对，就是我桌上那盒还没拆封的芋泥波波，塑料膜上渗出一滴汤，正落在Alt键边缘，没擦，就让它悬着。

文章配图，仅供参考

　　站长圈从不公开的UI测试真相？优胜劣汰。不是人淘汰人，是环境淘汰行为模式。比如上周，测试提了个bug：“暗黑模式下checkbox的checked状态图标颜色和背景色差不足”，开发改完，PR review里我批注“建议加focus ring宽度至3px”，后端小杨顺手点了个赞，然后默默把自己PR里的所有border-radius全改成6px——没商量，没对齐，就因为那天晨会我说了句“圆角太锋利容易割伤视力”。这种事发生过五次以上，每次都是无声的，但每次都在剔掉某种活法。你不信？翻你们Git history，搜border-radius: 4px，看最后一次提交人是谁。

　　哦对，昨天看到个CSS命名——class="login-form__submit-btn--primary-active-hover-focus-disabled"，一共六级，连贯读下来舌头打结。我试过把它删成login-btn，页面没崩，功能照常，连无障碍朗读都多念了0.8秒。但没人敢动，因为PR里有个comment写着“此命名规则已同步给SEO和GA团队”。呵，GA团队懂什么hover状态，他们只认data-layer-push。

　　其实我去年还偷偷跑过一版自动化截图比对：拿同一套用例，在七种viewport+四种DPR+三个浏览器下跑了三百七十二个节点，结果发现：有十八毫秒的render delay会导致mask元素错位1px，但只有Safari on iOS 16.5上复现，而且必须是在横屏切换瞬间触发动画——这玩意儿根本进不了Jira，连bug单都建不起来，因为复现步骤要精确到晃手机的角度和手腕转动惯量。最后我把它记在纸质笔记本第47页，用红笔画了个叉，旁边写：“此为物理世界馈赠，非人力可验。”

　　工资条发下来那天，财务问我要不要改个公积金比例，我盯着Excel里那个自动计算的公式栏发呆，突然想起前天dev环境里一个button的transition-delay写成“0.3s”，被测试妹子截图打了红框说“应统一用小数点后两位”，于是开发连夜改成“0.30s”。我就笑，笑完又去点了第四次F5。这次没看控制台，盯着那个按钮的阴影慢慢展开又缩回去，像呼吸。阴影偏移量是2px，模糊半径8px，扩散0px——这组值在Chrome里渲染是准的，在Firefox里右边会虚化多1px，在Edge里……算了，Edge现在谁还测。

　　现在我桌面上两个显示器，左屏永远停在Elements，右屏停在Lighthouse——但从来不跑audit，只看那个彩色圆环自己转。它转得慢，我就喝一口冷掉的茶；它卡住，我就用指甲刮Q键上的奶茶渣。站长圈不公开的事，从来不是技术本身，是大家心照不宣：有些裂缝，你得留着它呼吸，补得太严实，空气一热，整个界面就鼓包。

　　下周一，我要把登录页的hover延时从150ms调到180ms——就为躲过iOS Safari那个诡异的复合层重组bug。不提bug单，不走流程，就在commit message里写：“tweak hover timing, for no reason”。要是有人问，我就指指窗外飘过的云，说：“你看那朵，形状像不像button:hover？”

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!