看似在摸魚，其實在把關：網站上線前的 5 個終極測試

專案開發接近尾聲，設計完稿了、前端畫面也切好了。又到了前端工程師當薪水小偷的時間了...

因為這個時間點，前端工程師通常會開始做一件事：瘋狂點網站。首頁點一遍、手機打開滑一遍、表單故意亂填一遍。

他們正在確認最重要的一件事：

「這個網站，真的準備好交給使用者了嗎？」

以下是網站上線前，我們必定會經歷的 5 關測試：

01｜地毯式巡邏：先把網站從頭到尾點一遍

第一件事聽起來很簡單，但卻最容易被忽略： 「每個按鈕真的都有作用嗎？」

選單能不能正常開合？ CTA（行動呼籲按鈕）有沒有連到正確頁面？ Logo 點下去會不會回首頁？ 手機版選單打開後，能不能正常關閉？

有時候最尷尬的 Bug，往往不是什麼高深的技術懸案，而是：「這顆按鈕……好像沒有連結。」所以，前端工程師一定會把整個網站的動線重新踩過一遍。

02｜跨裝置挑戰：把手機拿起來再看一次

電腦螢幕上看起來完美，不代表手機上也是如此。

文字會不會跑版？圖片比例正常嗎？ 按鈕會不會太小、很難點擊？ 如果客戶把原本 8 個字的標題，換成了 20 個字，版面會不會直接撐爆？

網站不是一張固定尺寸的印刷海報。我們在做的 RWD（響應式網頁）測試，其實就是在確認：如果使用者不照著設計稿的劇本走，網站還能不能保持美觀且正常運作？

03｜極限防呆測試：故意把事情搞砸

正常操作的測試不難，真正重要的是：「故意做錯」。

表單什麼都不填直接送出、Email 欄位隨便打一串亂碼、搜尋不存在的資料、甚至對著送出按鈕連續狂按好幾次……

為什麼要這麼無聊？因為真實的使用者，不一定會照著我們預期的方式操作。一個好的網站，不只要能處理「對的行為」，更要知道：當使用者做錯時，系統能不能溫柔且清楚地告訴他「下一步該怎麼辦」？

04｜效能把關：網站很美，但跑得動嗎？

網站好看很重要，但「載入速度」一樣致命。 特別是現在的網站圖片多、動畫也豐富，我們必須反覆確認：

首頁是不是一次載入太多東西了？ 圖片檔案有沒有壓縮？ 如果在網路訊號比較差的捷運上，網站還打得開嗎？ 酷炫的轉場動畫，會不會讓低階手機卡到當機？

畢竟，使用者不會體諒你的首頁圖片有 8MB 這麼大。他腦中只會有一個念頭：「怎麼還沒跑出來？我要關掉了。」

05｜情境模擬：退一步，換上使用者的腦袋

當所有 Bug 都修完，效能也調校好之後，還有最後一關： 拔掉工程師的濾鏡，假裝自己是第一次來到這個網站的訪客。

我能一眼看出這家公司在做什麼嗎？ 如果我想找某項服務，動線好找嗎？ 如果我想聯絡他們，知道要去哪裡填表單或打電話嗎？ 用手機單手滑動時，操作起來舒服嗎？

這時候你會發現，網站測試從來都不只是單純的「抓 Bug」。更重要的是確認：使用者能不能在這個網站裡，順暢地完成他想做的事。

結語｜網站做完，才是真正的開始

網站上線前，前端工程師做的事情看起來既瑣碎又神經質：一直點按鈕、一直切換螢幕尺寸、故意填錯表單、盯著圖片大小、反覆看動畫順不順。

但這些繁瑣的動作，其實都在反覆確認同一件事： 「如果今天真的有人來用，我們準備好了嗎？」

因為網站從來就不是做給工程師欣賞的。它最終會被真實的人打開、閱讀、點擊，甚至偶爾被「亂用」。

我們在意的，不只是對客戶說出「網站成功上線了」。 而是確保上線之後，每一個真實的使用者都會覺得：「這個網站，真好用。」