更新您的 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 时使用可视化或截快照工具吗？您在更新时还使用哪些工具和工作流程？请在下面的评论中与我们分享！
评论留言