使用 Chrome DevTools Recorder 创建 Nightwatch 测试

最近推出的 Chrome DevTools 提供了 Recorder 面板，允许用户记录其交互流程并将其导出为 JSON 或其他格式。

要将这些用户流程转换为 Nightwatch 测试脚本，请按照以下步骤操作

以下部分将帮助您开始使用 Chrome Devtools Recorder 并将用户流程导出到 Nightwatch。

什么是 Chrome DevTools Recorder？

Chrome DevTools Recorder 是一种工具，允许您直接在浏览器中记录和回放测试操作，并将其导出为 JSON（或将其导出为 e2e 测试），以及衡量测试性能。如果您想详细了解 DevTools Recorder，您可以阅读有关它的所有内容 这里。

我们将使用 Coffee Cart 网站来记录我们的第一个测试并将其导出为 Nightwatch 测试脚本。

使用 Chrome DevTools Recorder 记录测试

  • 打开 Coffee Cart 网站。我们将使用它作为演示页面来记录我们的第一个测试。

  • 打开 Chrome DevTools（您可以右键单击网页并单击检查）

  • 现在，单击 Recorder 面板

    Recorder-panel


  • 单击 开始新的录制 按钮以开始录制测试

    Start New Recording



  • 输入您的录制名称，然后单击底部的 开始新的录制 按钮

  • 只需使用网站，尝试添加一些咖啡，然后单击购物车。按总计，填写付款详细信息，然后单击提交按钮。

    User Action Gif


请记住：Recorder 将记录与网页的每次交互，例如切换网页、单击按钮、双击以及更多操作。

  • 录制完成后，单击 Recorder 中的停止录制按钮。

录制完成后，我们的第一个自动化录制脚本已准备就绪，可以运行了。

我们面前有多种选择

  1. 回放录制 - 您可以回放记录的内容
  2. 使用性能面板衡量性能 - 它将回放测试并在 DevTools 中的 Recorder 面板旁边打开 性能见解 面板。我们可以使用我们的记录测试以及加载和呈现资源所需的时间来分析网站的性能。
  3. 编辑并添加步骤 - 我们可以手动编辑测试步骤。例如，如果我们想更改选择器，我们可以使用选择器工具或添加超时 - 所有这些操作都不需要更改代码。

    Chrome DevTools Recorder



导出记录的测试

您也可以立即将其导出为 Nightwatch 测试脚本。您可以通过两种方式将录制内容导出为 Nightwatch 测试脚本

1. 使用 Nightwatch Recorder 扩展

  • 从 Chrome 网上应用店 下载扩展。
  • 安装扩展并打开 DevTools 中的 Recorder 面板
  • 单击您保存的录制内容，然后单击导出按钮（向下箭头按钮）
  • 您将看到 导出为 Nightwatch 测试脚本 选项

    Export Nightwatch Test


- 单击该选项后，您就成功地将当前录制内容导出到了 Nightwatch 测试中。 - 现在您可以使用 Nightwatch 运行您的第一个测试


Run first test




2. 使用 @nightwatch/chrome-recorder 库

您可以使用以下 CLI 命令将 JSON 录制内容转换为 Nightwatch 测试。

npm install @nightwatch/chrome-recorder

npx @nightwatch/chrome-recorder

该工具将要求您提供 Devtools 录制内容的位置并将结果输出到指定目录。

CLI question image

该工具的输出将写入“Nightwatch”文件夹。获得测试文件后，我们可以使用 CLI 运行 Nightwatch 测试。

发现问题？告诉我们。

如果您发现任何情况下它会生成意外结果或某些情况看起来不对劲，请告诉我们，以便我们能够清除它们。

参考资料