一天做 100 個網站很酷，但如果有 10 個網站有壞圖、5 個網站有 404 錯誤、3 個網站在手機上跑版，那就是一場災難。
品質測試是建站流程中最容易被忽略的環節。傳統做法是請一個 QA 人員用肉眼一頁一頁檢查，100 個網站、每個網站至少 5 個頁面，光是點開來看就要花好幾天。而且人會累、會漏看。
在 HEY!BOSS 銀月數位顧問，我們用 Playwright 自動化測試框架解決這個問題。100 個網站的品質稽核，2 小時全部跑完，零漏檢。
一、什麼是 Playwright？
Playwright 是 Microsoft 開發的開源自動化測試框架。它可以控制真實的瀏覽器（Chromium、Firefox、WebKit），模擬使用者的操作 — 點擊、捲動、輸入、截圖，一切都是自動的。
跟你可能聽過的 Selenium 相比，Playwright 有幾個明顯優勢：
- 速度快 — 底層架構更現代化，執行速度比 Selenium 快 2-3 倍
- 自動等待 — 不用寫一堆
sleep或wait，Playwright 會自動等元素載入完成才操作 - 多瀏覽器支援 — 原生支援 Chromium、Firefox、WebKit 三大引擎
- 強大的選擇器 — 支援文字、CSS、XPath、ARIA 角色等多種元素定位方式
二、HEY!BOSS 的三輪品質稽核
我們不只是跑一次測試就結束。HEY!BOSS 的品質稽核是三輪循環，每一輪有不同的重點：
第一輪：基本功能檢查
確保每個網站的基本功能正常運作：
- 頁面載入 — 每個頁面都能在 5 秒內載入完成，HTTP 狀態碼為 200
- 圖片完整性 — 所有圖片都能正確載入，沒有破圖或 alt 文字缺失
- 連結有效性 — 所有內部和外部連結都是有效的，沒有 404 錯誤
- JavaScript 錯誤 — Console 沒有紅色錯誤訊息
- SSL 憑證 — HTTPS 正常運作，沒有混合內容警告
第二輪：行動裝置相容性
用 Playwright 模擬手機和平板裝置：
- 橫向溢出 — 頁面寬度是否超出螢幕，出現水平捲軸
- 字體可讀性 — 文字大小在手機上是否可以不放大就閱讀
- 觸控目標 — 按鈕和連結是否夠大、間距是否夠遠，手指不會按錯
- 語言切換 — 中英文切換按鈕在手機上是否正常運作
第三輪：回歸測試
前兩輪發現的問題修復後，再跑一次完整測試：
- 確認所有問題都已修復
- 確認修復過程沒有引入新的問題
- 產出最終的品質報告
三、實戰數據：100 個網站的稽核結果
以 HEY!BOSS 最近一次的 100 個品牌網站建置為例：
- 第一輪結果 — 發現 23 個問題：12 張圖片路徑錯誤、8 個 CSS 樣式不一致、3 個 JavaScript 載入失敗
- 修復後第二輪 — 發現 7 個行動裝置問題：5 個橫向溢出、2 個按鈕太小
- 修復後第三輪 — 0 個問題，全數通過
如果沒有自動化測試，這 30 個問題中有多少會被人工測試漏掉？根據業界統計，人工測試的漏檢率約 15-25%。也就是說，可能有 5-8 個問題會帶著上線，被真實使用者發現。
四、自動化測試不只是找 Bug
Playwright 在 HEY!BOSS 的工作流程中，不只是品質稽核工具，還有其他用途：
- 視覺回歸測試 — 每次修改程式碼後自動截圖比對，確保 UI 沒有意外變化
- SEO 檢查 — 自動驗證每個頁面的 meta tags、JSON-LD 結構化資料、Open Graph 標籤是否正確
- 效能監控 — 定期跑測試，追蹤頁面載入時間的趨勢，速度變慢就發警報
- 部署驗證 — 每次 CI/CD 部署後自動跑一輪煙霧測試，確認部署成功
五、為什麼你也需要自動化測試？
你可能會想：「我又不是做 100 個網站，我只有一個官網，需要自動化測試嗎？」
答案是：需要。因為你的官網不是做完就不動了。每次改內容、更新產品資訊、調整價格、發新文章，都可能不小心弄壞某個地方。手動檢查很容易漏掉，等客戶反映「你的網站有問題」的時候，已經不知道損失多少客戶了。
自動化測試可以設定成每天自動執行，像是為你的網站請了一個 24 小時不休息的品管人員。
「品質不是做完之後再檢查，而是從第一天就內建在流程裡。Playwright 是 HEY!BOSS 品質保證的秘密武器。」
結語
手動測試的時代已經過去了。在 AI 建站的規模下，自動化測試不是可選項，而是必要條件。Playwright 讓你用程式碼的速度和精準度來保障品質，不管是 1 個網站還是 100 個。