進行網站功能測試時所需要的規劃與準備

不管是網站架設初期、添加新功能、想要局部、全面進行版面改造，或是升級佈景主題、外掛版本時，都會需要對新添加的功能進行測試並且查看改變後的功能、視覺、風格呈現是否符合預期，以及對網站其他功能是否會造成副作用 (Side Effect)。

進行網站功能測試時需要小心的規劃，並且嚴謹地進行。

這篇文章描述了我們在進行網站功能測試時所需要的萬全準備，我們分為三個階段說明：

• 測試前的準備事項
• 測試中的注意事項
• 測試後的保險機制

並且考慮以下兩種主機架設的情境：

• 使用主機託管商的服務管理主機、網站 – 以 Cloudways 為例
• 使用伺服器控制面板的服務管理主機、網站 – 以 ServerAvatar 為例

測試前的準備事項

建立預備網站 (Staging Site)

在進行網站功能測試的時候，因為會持續修改設定來觀察調整設定前後的功能差異，最好的方式就是建立一個預備環境 (Staging) 把這個環境上的快取功能關閉，直接在預備環境上進行修改與測試，待測試完成後再直接同步到正式環境上。

主機託管商 (如 Cloudways)

如果是使用 Cloudways 等主機託管商架設、管理網站，他們提供的預備網站管理 (Staging Management) 功能相當完善。

可以從 Cloudways 的網站管理頁面進入 Staging Management 頁面，並直接建立預備網站。

待測試完成後，Cloudways 提供 PUSH 功能可以將網站的檔案、資料庫同步到正式網站上。

• 網站檔案
  • Overwrite – 使用預備網站的檔案全面覆蓋正式網站上的資料。
  • Incremental – 只覆蓋預備網站上更新的檔案資料，在預備網站上被刪除的檔案不會在正式網站上被刪除。
• 資料庫
  • Full DB – 完整的資料庫覆蓋。
  • Selected Tables – 只更新選取的資料庫表格，可避開會即時更新數據的表格，只更新在預備網站中進行測試所影響的部分。

測試過程中如果對預備網站中的狀況不滿意 (例如：改壞了)，或是需要將正式網站中最新的資料複製到預備網站上，可以使用 PULL 功能將網站檔案、資料庫從正式網站同步到預備網站上。

伺服器控制面板 (如 ServerAvatar)

如果是使用伺服器控制面板架設、管理網站，有半數以上的面板廠商都有提供一鍵建立預備網站的功能。

以 ServerAvatar 為例，可以從網站管理頁面進入 Staging Area 頁面，選擇你想要建立預備網站的正式網站所在主機與資料庫名稱，選擇是否使用自己的子網域或是 ServerAvatar 提供的測試網域作為預備網站的網域，並按下 Create Staging Area 按鈕快速建立預備網站。

待測試完成後，按下 Sync 按鈕即可將網站的檔案、資料庫全面同步到正式網站上。

準備測試清單

進行功能調整與測試之前，可以事先整理這次測試範圍內會使用到的佈景主題或外掛名稱與功能，過程中如果有新增或調整可以再同步到清單中。

主要原因是在測試過程中可能會發現外掛功能彼此之間產生衝突，而需要紀錄發生問題的外掛版本，後續可以將問題提報給外掛廠商。

如果是沒有使用預備網站進行測試的時候，因為會在測試前後多次進行網站備份，所以也可以保留外掛版本 vs 備份版本的紀錄，當測試出現問題時才能方便快速還原到備份版本。

測試完成後就可以根據這份測試清單，一一檢測相關功能了。

同時也能將每次的改版紀錄保留下來。

測試中的注意事項

網站備份、還原網站

在進行複雜功能設定、調整的測試時，需要時常進行網站備份，一旦測試出現不如預期的結果或外掛升級導致重大問題時，就能將網站還原到備份版本了。

主機託管商 (如 Cloudways)

如果是使用 Cloudways 等主機託管商架設、管理網站，他們提供的網站備份與還原 (Backup And Restore) 功能相當便利。

可以從 Cloudways 的網站管理頁面進入 Backup And Restore 頁面，系統每天會進行一次網站備份 (保留 13 個歷史版本)，管理者也可以按下 Take Backup Now 按鈕隨時進行網站備份。

需要還原網站時，選擇歷史備份的日期時間後 (確認版本)，按下 Restore Application Now 按鈕就能快速還原網站到歷史版本。

更多說明可以參考這篇教學文章的網站備份章節。

參考文章：「Cloudways 教學 – 輕鬆完成主機備份、升級主機規格」。

伺服器控制面板 (如 ServerAvatar)

如果是使用伺服器控制面板架設、管理網站，幾乎所有面板廠商都有提供網站備份與還原功能。

以 ServerAvatar 為例，可以從管理面板左側選單進入 Backups 頁面，ServerAvatar 提供使用者可以自行決定備份檔案要放在哪個雲端儲存空間的彈性，使用者也可以自訂備份排程。

需要還原網站時，可以到網站備份清單中找到歷史備份的日期時間後，在最後一欄的「Actions」中按下 Restore 圖示，即可將網站還原到當時備份的時間點。

詳細說明可以參考這篇教學文章的網站備份章節。

參考文章：「ServerAvatar 教學 – 輕鬆完成 WordPress 網站遷移、升級主機規格」。

清除快取

如同前面所說的，進行功能測試時最好的方式就是建立一個預備環境 (Staging) 並且把這個環境上的快取功能關閉，才能方便查看功能調整的成果。

但是，偶爾還是會有需要直接在正式環境上修改功能的時候。

這個時候要如何確保目前正在查看的網頁資源不是來自快取呢？

大家可以試試以下幾種方法：

• 在頁面上按滑鼠右鍵 > 檢查，在開發者工具中啟用「Disable cache」功能後再次載入頁面。(僅在開發者工具開啟時有效)

• 強制更新頁面 – 按下 Ctrl + F5 ((Window/Linux) 或 Command + Shift + R (Mac)，此動作會清除快取並重新擷取網頁資源。
• 使用無痕模式 (Incognito Mode) – 在無痕模式中開啟網頁，無痕模式不會使用先前瀏覽器載入的快取檔案。

• 清除瀏覽器快取 – 手工清除瀏覽器快取。
• 開啟 Cloudflare 的「開發模式」，可以暫時略過快取。即時查看原始伺服器的變更。

• 確保 Cloudflare 上沒有設定快取相關的頁面規則。
• 在測試的網址後加上 /?nocache (感謝社團前輩勇哥的建議)

測試後的保險機制

只有一句話，備份備份備份！

時常在 WordPress 社團中看到網友發出網站無法正常運作的問題，應該有九成以上都能夠靠網站備份處理。

平時有備份網站的好習慣，不管遇到什麼突發事件都可以順利的把網站還原到上一個可以正常運作的歷史備份版本。

搭配測試清單中的紀錄，可以讓我們進行功能測試與解決網站問題所需要花費的時間減到最少。