更新您的 WooCommerce 商店是一件嚴肅的事情，因為您可能會破壞某些功能，從而對您的底線或網站的執行方式產生負面影響。
在 WooCommerce 更新時，一般店主們有四種想法：
- 牛仔派：這些店主不假思索地點選 “更新”。然後，他們的店鋪就轟然倒塌了。
- 沙發土豆：這些人完全無視更新，就當更新不存在。
- 膽小貓：這些店主有很多過時的外掛和主題，因為他們害怕嘗試更新會發生什麼。
- 特立獨行：最後，這些店主會定期備份，在暫存網站上測試 WooCommerce 的新版本，然後順利更新他們的實時網站。
理想情況下，每個人都應該是特立獨行者。幸運的是，成為特立獨行者並不難！有了合適的工具、可靠的測試清單和一些自動化功能，你就可以開始讓自己的 WooCommerce 網站保持最新，並始終執行順暢。
在本篇文章中，我們將為您介紹如何自始至終安全地進行 WooCommerce 更新，包括要使用的工具以及測試和更新清單。
請記住，您的最終目標是增加店鋪收入。因此，請務必檢視文章《提高 WooCommerce 產品頁面轉化率的方法》。
投入多一點就能節省大量時間（和焦慮）
在深入瞭解之前，最佳實踐告訴我們，在沒有徹底測試任何新版本之前，千萬不要更新網站，尤其是 WooCommerce。無論是主要釋出版本、次要釋出版本還是補丁釋出版本，都是如此。
你必須願意現在花一點時間，為以後節省大量時間。
你不需要立即點選 “更新 “按鈕。給自己一些時間，確保瞭解會有哪些變化，最重要的是，這些變化會對網站上的其他內容產生哪些影響。只需閱讀一下您想要更新的 WooCommerce 版本中的新功能，就能幫助您瞭解需要準備的事項。
為了正確看待問題，並瞭解問題有多容易解決，請從外掛或主題開發人員的角度考慮一下：因為 WooCommerce 核心和 WordPress 核心都需要向後相容。現在，想想你或你的客戶網站正在使用的外掛數量。WooCommerce 的更新有多大可能會破壞某些功能？我想你已經知道答案了：極有可能。
這就是為什麼在 WooCommerce 釋出更新公告之後，在更新 WooCommerce 之前最好先檢視一下更新日誌和 WordPress.org 支援論壇。如果更新出現了問題，99% 的情況下都會是別人先遇到這個問題，從而為您節省了大量時間和麻煩。
此外，不立即向網站推送 WooCommerce 更新，而是等待外掛/主題作者自行釋出 WooCommerce 相關產品的更新，然後再更新網站也是很常見的做法。因此，耐心等待並花時間檢查相容性確實能帶來回報。
開始 WooCommerce 更新
WooCommerce 更新分為四個基本階段，每個階段都有自己的固定步驟。我們保證，在您完成所有步驟之後，每次更新都會變得更快、更簡單！我們將為您逐一介紹更新 WooCommerce 的以下四個階段：
獲取正確的工具
面對現實吧：手動測試 WooCommerce 既繁瑣又耗時。正是因為這些原因，很多人根本不做測試，或者即使做了，也沒有正確測試，從而導致網站產生錯誤。
幸運的是，有一些工具可以幫助加快測試過程，使其不再枯燥乏味。
經過多年對 WooCommerce 更新的無數次測試，我們推薦使用這些工具。讓我們逐一詳細瞭解一下。
暫存網站
這是必須的。在 WooCommerce 釋出新版本後，千萬不要立即更新您的實時網站。
暫存網站為您提供了一個安全的測試環境，在這裡您可以隨意破壞（通常不會造成影響）。在那裡，您可以執行 WooCommerce 更新、測試新版本，並在更新真實網站之前瞭解您的網站可能做出的反應。
視覺化比較工具
如何知道您的網站在 WooCommerce 更新後是否發生了變化？如果您執行的是一個擁有幾十個頁面的大型網站，追蹤格式上的細微變化，甚至是停止顯示的小工具，都需要花費時間。
有了 WP Boom 這樣的視覺化對比工具（本教學將使用該工具），你就可以給網站拍一張快照，點選 “更新”，然後再拍一張快照，這樣你就可以快速檢視哪些地方發生了變化：
WP Boom
需要指出的是，視覺變化並不一定意味著網站上的某些功能已損壞，只是可能已損壞。
端到端測試工具
視覺化比較工具可以幫助您快速發現網站格式和設計方面的變化，而端到端測試工具則更進一步。它們可以測試網站的實際功能，並在出現問題時提供更多的確定性。
在網站上點選完成測試，如將商品新增到購物車和結賬，都需要時間。如果你已經測試過 WooCommerce 更新上百次，這些任務很快就會過時。
有了端到端測試工具，你就可以將這一過程自動化，讓它自動為你完成。
隨著 Robot Ninja 的關閉，我們將在本教學中向你展示如何使用兩種不同的工具。
第一個是 Ghost Inspector：
Ghost Inspector
第二個端到端測試工具是 Usetrace：
Usetrace
這是另一款用於 WooCommerce 的端到端自動測試工具，您可以在暫存網站和實時網站上使用。我們將在本文後面介紹如何設定這兩種工具。WooCommerce 還提供了一些 E2E 測試，如果你是一名開發人員，也可以進行這些測試。
備份工具
您應該定期對網站進行備份。如果您對資料庫備份感興趣，我們推薦您使用 WP Migrate DB Pro，或者使用 WP-CLI 快速匯出。
其實現在大部分雲伺服器，又或者您安裝了寶塔面板，都可以實現每日自動備份、手動備份點和備份保留。
準備好合適的工具後，就該做一些準備工作了。
準備工作
如果您想讓 WooCommerce 更新順利進行，就需要做一些準備工作。雖然需要做一些工作，但在您做過一次準備之後，下次更新時就更容易填補空白並快速完成了。以下是我們推薦的七個準備步驟。
步驟 1：重新熟悉要更新的網站
如果您不確定網站的預期功能（例如，如果是新客戶的網站），請做一些筆記。這將有助於減輕你在更新後對網站如何執行感到困惑時的焦慮（這種情況比你想象的要經常發生）。
我還建議列出一份關鍵 URL 和網站功能（以及客戶）的清單。這應包括網站上的重要頁面，如主頁、類別和產品、”我的賬戶”、購物車和結賬頁面。
步驟 2：驗證備份是否有效
如果您的備份不是最新的，那麼現在就是執行另一個備份的時候了。重新熟悉備份工具。最重要的是，檢查它是否工作正常，並確保您知道如何恢復到網站的上一個快照。
步驟 3：設定 WP Boom
設定這個工具只需要一分鐘。如果你的記憶力和記事能力不佳（我們都會犯錯），WP Boom 可以通過網站截圖幫助你填補空白。把它們想象成減肥宣傳中的 “減肥前” 照片。
首先，您需要拍攝第一張網站快照，這樣您就有了更新前階段網站的視覺化基準記錄。
一般來說，它無法擷取結賬（你需要在購物車中放入一些產品）和受保護頁面的截圖，但這正是下一個工具可以提供幫助的地方。
注：我們將在本篇文章的稍後部分教你如何設定和使用 WP Boom。
步驟 4：設定自動測試工具
如果您是手動測試 WooCommerce，那麼這一步您需要列出一系列測試場景：例如，開啟網站、將產品新增到購物車、結賬、輸入支付資訊等。
幸運的是，Ghost Inspector 和 Usetrace 可以自動為您完成所有這些工作。稍後我們將介紹如何設定這兩個工具。
步驟 5：確定要測試的網站其他部分
下一步是根據之前建立的關鍵 URL 和功能列表，確定要測試的網站其他部分。這可能是聯絡表單和彈出視窗等功能，也可能是幻燈片和相簿等元素。
你可以手動測試這些內容，或者如果你更懂技術，也可以嘗試自動完成這一步。
步驟 6：檢視您要更新的 WooCommerce 版本的新功能
檢視您要更新的 WooCommerce 版本有哪些新的更新和功能也是一個好主意。更具體地說，檢查您的外掛和主題是否與之相容。
還是那句話，最好現在就花點時間，省得以後浪費時間和焦慮。我們建議檢視 WooCommerce.com 上的釋出公告、變更日誌、GitHub 問題和 WordPress 支援論壇。
步驟 7：將實時網站克隆到暫存環境中
如果您正在使用任何具有暫存模式的外掛，如 WooCommerce 訂閱，請將其開啟或乾脆禁用。同樣，你也需要禁用電子郵件。
然後，仔細檢查以確保您的暫存環境儘可能接近您的實時網站。我們還建議此時啟用 WordPress 除錯模式，以幫助解決問題。
重要提示：將網站推送到暫存環境後，不要丟失任何可能通過的訂單。為了避免這種情況，我們建議您將 WooCommerce 商店設定為維護模式。這將確保在您進行更新和測試時不會有訂單下達。
更新和測試您的暫存網站
準備就緒後，最有趣的部分來了：更新暫存網站。暫存網站最棒的地方在於，即使網站出現故障也沒關係，因為它只是一個副本。讓我們來看看這部分過程的步驟。
步驟 1：使用 WP Boom 給網站快照
你要做的第一件事就是用 WP Boom 給網站拍一個快照。這將為您提供更新前暫存網站的視覺化基準記錄。
步驟 2：執行測試工具，確保測試通過
如前所述，您可以使用端到端測試工具（如 Ghost Inspector 或 Usetrace）來自動進行測試。在本文中，我們將向您介紹如何使用這兩種工具執行測試，並檢查以確保測試通過。
步驟 3：更新外掛和主題
在準備階段，我們提到要檢查你的外掛和主題是否與最新版本的 WooCommerce 相容。如果你發現自己的外掛或主題已經過時，不再相容最新版本的 WooCommerce，那麼現在就是將它們更新到相容版本的時候了。
步驟 4：在暫存網站上更新 WooCommerce
更新完外掛和主題，確保不會出現任何相容性問題後，您就可以將暫存網站更新為最新版本的 WooCommerce 了。在將 WooCommerce 更新推送到您的實時網站之前，更新暫存網站可以讓您找出任何潛在錯誤並加以解決。
步驟 5：檢查日誌是否有錯誤
更新外掛、主題和 WooCommerce 後，最好檢查一下日誌，看看這些更新是否會導致任何錯誤。進行快速掃描，確保仍可訪問主頁和管理後臺。
如果出現白屏宕機或卡住無法恢復的情況，現在是還原網站先前快照的好時機。您可以自己解決問題或尋求幫助。
步驟 6：生成第二份快照以比較變化
如果目前一切順利，請再次執行 WP Boom 並獲取第二個快照。對比前後快照，看看有什麼變化。
WP Boom 最棒的地方在於，它會告訴你網站自上次快照後發生了多大變化。
例如，兩組快照之間可能有 7% 的視覺變化。雖然這並不一定意味著你的網站壞了，但可能意味著你需要調整一些樣式。
步驟 7：再次執行 Ghost Inspector 或 Usetrace，確保一切執行正常
接下來，使用 Ghost Inspector 或 Usetrace（或您選擇的端到端測試工具）再執行一次測試，以確保您的結賬流程處於正常工作狀態。您還可以對網站上的任何其他功能（如聯絡表單）進行手動或自動檢查。
如果有任何工作不盡如人意，現在是報告和/或修復的時候了。
如果您的網站上執行的是自定義程式碼（即不是由第三方外掛/擴充套件開發人員維護的程式碼），您需要對其進行修復，並確保在執行更新之前或之後將修復程式應用到您的實時網站上（視問題而定）。
版本控制（如將網站放在 Git 中）可以幫助您更好地管理變更。在哪裡報告錯誤取決於您使用的外掛和您的支援安排。在這種情況下，您要麼等待外掛/主題的新版本釋出，然後再次嘗試這一過程，要麼自己進行修復並更新程式碼。
好訊息是，您的實時網站並沒有損壞，您的客戶仍然可以進行購買。此外，您還可以根據需要花時間重複這一過程，直到您確信一切都能按預期執行為止。
更新和測試您的實時網站
一旦您更新了暫存網站並使其順利執行，修復了所有損壞的功能並解決了所有錯誤，您就可以更新實時網站了。
讓我們來看看更新 WooCommerce 實時網站的步驟，其中許多步驟與您在測試暫存網站時執行的步驟類似。
步驟 1：備份實時網站
第一步是備份您的實時網站。請務必不要錯過這一步。大部分雲伺服器都提供備份選項可供選擇。不過，您也可以使用備份外掛。
步驟 2：為網站建立快照
接下來，您要用 WP Boom 再給網站建立快照。這將為您提供更新前實時網站的視覺化基準記錄。
步驟 3：執行 Ghost Inspector 或 Usetrace，確保測試通過
同樣，您可以使用 Ghost Inspector 或 Usetrace 來執行此操作，具體取決於您希望使用 Chrome 瀏覽器擴充套件還是線上工具來記錄測試。這將為網站更新前提供另一個基準。
步驟 4：同步並實時推送更改
接下來，根據您的暫存環境和實時環境的工作方式，您可能只需在暫存網站和實時網站之間同步更改。或者，您可能需要再次更新外掛和程式碼。
請記住，先將您的 WooCommerce 商店從維護模式中移除。
步驟 5：檢查錯誤日誌
完成同步更新後，再次檢查錯誤日誌，檢視是否有任何問題。檢查是否仍能訪問主頁和管理區。
與暫存網站一樣，如果出現白屏宕機或其他無法恢復的情況，最好恢復到以前的網站快照，然後進行故障排除或尋求幫助。
步驟 6：使用 WP Boom 再建立一個快照
接下來，再次執行 WP Boom，這樣就有了第二組快照。對比之前和之後的快照，看看是否有任何變化。
步驟 7：再次執行 Ghost Inspector 或 Usetrace 以確認網站工作正常
您可以再次使用自動化工具執行另一項測試，確保一切正常。此時，您還可以對網站上的其他功能（如聯絡表單）執行任何其他手動（或自動）檢查。
如果之前在更新暫存網站時處理並修復了任何問題，如外掛程式碼和自己的自定義程式碼衝突，那麼在此階段應該不會有太多問題（如果有的話）需要修復。
步驟 8：進行最後的視覺化檢查
你幾乎已經完成了。剩下要做的就是仔細檢查關鍵 URL 和功能列表，確保一切正常。
如果一切正常，那就完成了！您的 WooCommerce 更新現已上線。
WP Boom 入門
WP Boom 是一款專為 WordPress 設計的視覺化測試和比較工具。設定完成後，您可以比較網站更新前後的截圖，並在自動更新導致網站視覺變化時收到提醒：
WP Boom
要開始使用 WP Boom，請註冊一個免費賬戶。輸入電子郵件和密碼後，會彈出一個模態視窗，要求您連線一個新網站：
WP Boom 登錄檔單
輸入詳細資訊並點選 “Create Site” 後，WP Boom 就會開始為您的網站建立第一張快照。這需要一到兩分鐘的時間，取決於網站包含多少頁面：
WP Boom 快照
完成此過程後，頁面將重新整理。點選網站名稱後，您將看到快照的概覽，包括拍攝時間和網站上有多少頁面：
WP Boom 最新快照
當您準備好拍攝第二張快照時，只需返回 WP Boom 控制面板，選擇要快照的網站，然後點選 “Snapshot Selected Sites” 即可。
WP Boom 還有其他一些不錯的功能，如可以安排每週快照，並通過電子郵件傳送報告，詳細說明網站上的任何視覺變化。如果您管理著大量網站，並有自動更新功能，這將非常有用。
自動測試工具：Ghost Inspector 和 Usetrace
重要的是要進行測試，確保更新後整個 WooCommerce 網站的功能都能正常執行，而不僅僅是結賬流程。
畢竟，如果客戶填寫了聯絡表單或嘗試使用即時聊天，而這些功能卻被破壞了，如果您沒有進行測試，又怎麼會知道呢？
手動測試非常簡單：只需點選網站，填寫表格和使用即時聊天視窗即可。
為了幫助自動執行這一流程，您可以先列出一份關鍵功能列表，以及如何手動執行測試的說明（即 “開啟網站、導航到聯絡頁面、填寫表格等”）。這將確保您在進行手動測試時不會遺漏任何內容。
如果您希望將此過程自動化，希望對自動化測試有更多控制，或者擁有高度定製的網站或功能，我們建議您檢視 Ghost Inspector 和/或 UseTrace。
如果您不熟悉 PHP，又不想亂用指令碼和程式碼，兩者都是不錯的選擇。這些選項提供了類似的功能，可自動進行結賬測試。
最終，您選擇哪個選項將取決於您是想使用 Chrome 瀏覽器擴充套件還是線上工具來記錄測試。另外，如果您是開發人員並喜歡親自動手，Codeception 也是開發人員的不錯選擇。
Ghost Inspector 使用入門
Ghost Inspector 是一款工具，可用於自動測試 WooCommerce 網站並確保其正常執行。最棒的是，使用它不需要任何程式設計或測試經驗。
Ghost Inspector 的工作原理是在瀏覽器中新增一個 Chrome 或 Firefox 擴充套件。然後，該擴充套件會記錄你的網站並自動執行測試。
要開始使用，請訪問 Ghost Inspector 網站並點選 “Start Your Free Trial“。在表格中輸入您的資訊，然後選擇 “Create Account“：
Ghost Inspector 註冊頁面
您將跳轉到歡迎頁面。在頁面底部，點選 “Install Test Recorder” 按鈕：
安裝 Ghost Inspector 測試記錄器
這會在新的瀏覽器標籤頁中開啟 Chrome 網上商城。選擇新增到 Chrome：
Chrome 擴充套件 Ghost Inspector
Ghost Inspector 擴充套件程式會自動新增到你的瀏覽器，顯示在右上角。首次點選時，它會要求您使用憑據登入：
登入 Ghost Inspector Chrome 瀏覽器擴充套件
重新整理瀏覽器。準備好執行測試後，訪問你的 WooCommerce 網站（確保已登出），然後點選瀏覽器擴充套件。
在下拉選單中，選擇 “Create a new test” 選項，然後點選 “Start Recording” 按鈕：
Ghost Inspector “start recording” 按鈕
在您執行和測試網站時，Ghost Inspector 會記錄下您的所有操作。完成後，再次點選副檔名，然後點選 ” I’m Finished Recording“：
Ghost Inspector “finished recording” 按鈕
然後您可以命名並儲存測試。如果選擇 “View My Test“，您將進入 Ghost Inspector 面板：
Ghost Inspector 儀表盤
在這裡，您可以檢視測試的所有細節。您將看到相關步驟的列表，並可對其進行編輯。它會告訴你測試是否通過，如果未通過，哪些步驟需要你注意。更多詳細資訊，請檢視 Ghost Inspector 文件。
Usetrace 使用入門
如果您想使用不針對任何一種瀏覽器的自動化測試工具，您可能會選擇 Usetrace。使用該工具，您可以通過 Usetrace 線上編輯器記錄工作流程，建立 “跟蹤”。然後，您就可以使用它們來自動測試您的網站。
要開始使用，請訪問 Usetrace 網站並單擊 “Sign Up and Start Testing Now“。建立賬戶後，您將被重定向到 Usetrace 面板。選擇 “Start by creating a new trace“：
Usetrace 儀表盤
左側視窗中是您的跟蹤步驟和設定。右側是您正在測試的網站。開始時，單擊 “Record Steps“：
記錄跟蹤步驟
程式將開始記錄您在網站上的互動。您每進行一次操作，如將商品新增到購物車或填寫聯絡表單，程式就會在左側的跟蹤步驟中新增一個檢查點。
完成後，點選 Save Steps 按鈕：
Usetrace 測試
要執行整個跟蹤以確認一切正常，請選擇左下角的 Run Trace：
Usetrace 中的執行跟蹤按鈕
完成後，您會看到一條成功資訊：
Usetrace 成功資訊
您可以單擊 “Details” 瞭解每個步驟的更多資訊，或者在完成後選擇 “OK“。如需更詳細的指導和說明，請參閱 Usetrace 文件。
小結
有了正確的工具、準備時間和可靠的清單，您在測試和實施 WooCommerce 更新時應該不會遇到任何問題。為了消除您對 WooCommerce 更新的焦慮，我們在這裡為您揭開了更新過程的神祕面紗。希望本指南能為您的 WooCommerce 網站保持最新狀態奠定堅實的基礎。
我們還需要強調的是，測試商店的交易電子郵件也很重要，但這是完全不同的旅程。
現在，回到您的話題： 您在更新 WooCommerce 和 WordPress 時使用視覺化或截快照工具嗎？您在更新時還使用哪些工具和工作流程？請在下面的評論中與我們分享！
評論留言