如果您错过了，现在又出现了一个新的性能测试工具：Flood Element。它是一款可扩展的、基于浏览器的工具，允许您使用 JavaScript 编写脚本，像真实用户一样与网页进行交互。
浏览器级用户是一种较新的负载测试方法，它克服了我们听到的关于传统测试方法的许多常见挑战。它提供了
- 类似于 Selenium 等常用功能工具的脚本编写方式，且更易于学习
- 更真实的结果，这些结果基于真实的浏览器性能，而不是 API 响应
- 能够针对 Web 应用程序的所有组件进行测试，包括通过浏览器呈现的 JavaScript 等内容
鉴于上述优点，检查 Flood Element 以进行 Web 负载测试是明智之举，特别是如果您在使用 JMeter 或 HP LoadRunner 等现有工具时遇到困难。
将 Element 与 Flood 配对使用，可将其变成一个非常强大的负载测试工具。我们这里有一份很棒的指南，如果您想开始使用，可以按照该指南进行操作。我已经使用和测试 Element 几个月了，我想分享一些我在此过程中学到的技巧。
初始化您的脚本
您可以始终从头开始，但最快的入门方法是从终端输入 element init myfirstelementtest，并填写您首选的项目名称。
然后，系统会要求您键入测试标题以及要编写脚本的 URL。稍等片刻，您会看到已创建一个新目录
Element 将自动创建一个名为 test.ts 的文件。此文件包含脚本的框架以及一些示例代码，可帮助您查找按钮然后单击它。但在您打开它之前，让我们继续…
选择合适的文本编辑器
在 Element 中编写脚本已经非常简单，但语法高亮和代码完成这两项功能可以提供帮助。语法高亮将大大改善学习像 Element 这样的新测试工具的体验，而代码完成将使您的脚本编写速度像闪电般快速，随着您变得越来越有经验。我选择的文本编辑器是 Visual Studio Code，它具有这两项功能。它简洁明快，并且可以完成工作。
语法高亮是指文本编辑器根据代码在您使用的编程语言中的角色智能地更改代码的字体颜色。以下是我们之前在 VS Code 中生成的 test.ts 文件的屏幕截图，向您展示我的意思
这使得一眼就能更容易理解代码：注释为绿色，值和标签为橙色等。
代码完成是指当您开始键入某些内容时，VS Code 会很有帮助地打开一个上下文菜单，其中包含您可以使用的建议方法。
我喜欢这个功能，因为它意味着我不需要记住方法的准确名称。它还会建议您已定义的变量名称，并突出显示没有意义的代码。这将有助于使您的测试更具可维护性和可读性，这对您在未来扩展测试规模时非常有益。
截取屏幕截图
Element 最强大的功能之一是其截取屏幕截图的能力。我发现它在调试时非常有用，因为有时只需查看正在发生的事情会更容易。使用基于协议的工具，调试可能是一个更加复杂和技术性的过程。
在 Element 中，有两种方法可以截取屏幕截图
- 添加一个设置，以便在遇到错误时自动截取屏幕截图。您可以通过在
TestSettings中将screenshotOnFailure设置为“true”来执行此操作
export const settings: TestSettings = {
device: Device.iPadLandscape,
userAgent: 'flood-chrome-test',
clearCache: true,
disableCache: true,
screenshotOnFailure: true,
}
- 在脚本中的特定点显式截取屏幕截图。您可以通过添加
await browser.takeScreenshot()到您的代码中来执行此操作。
查看屏幕截图
在测试中截取屏幕截图后，您可能需要查看它们，并知道它们将被存储以供将来安全保存。无论您是在本地运行测试还是已将其上传到 Flood 以提高并发性运行，Flood Element 都能满足您的需求。
本地运行测试
屏幕截图将保存为 .jpg 文件，保存在与您的运行相对应的时间戳文件夹中。它应该看起来像这样：…myfirstelementtest/tmp/element-results/test/2018-11-20T135700.595Z/flood/screenshots/。屏幕截图将唯一命名，以便即使是同一步骤的新屏幕截图也不会覆盖旧的屏幕截图。
但是，我很少需要在该文件夹中查找屏幕截图，因为我更喜欢在 MacOS 的 iTerm2 中查看它们。iTerm 是终端的替代品，与 Element 配合使用效果特别好。当您截取屏幕截图时，iTerm 实际上会内联显示它
在 Flood 中运行的测试
当您需要更大的并发性时，在 Flood 上运行 Element 脚本是理想之选。Flood 会将图像集中到您的帐户中，而不是在本地访问屏幕截图，因此即使在云负载注入器被销毁后，图像仍然保留。您可以通过下载存档结果来获取屏幕截图文件
您还可以单击仪表板上的步骤以查看测试的胶片
使用日志
您可能需要查看日志以进行更深入的技术调试，尤其是在屏幕截图无法说明全部情况时。同样，无论您是在本地运行测试还是已将其上传到 Flood 以提高并发性运行，Flood Element 都能满足您的需求。
本地运行测试
您可以通过键入例如：console.log('orderValues = ’ + orderValues) 来打印到控制台
这将在脚本中的该点打印变量 orderValues 的值。如果您在本地运行 Element，您将在终端中看到此内容。
在 Flood 中运行的测试
如果您在 Flood 上运行脚本，您可以下载日志（在前面提到的同一存档结果 zip 文件中），或单击“日志”选项卡
标志的乐趣
Element 附带了一些标志，可让您更好地控制脚本在本地的运行方式。以下是一些我最喜欢的标志
无头标志
如有疑问，请在非无头模式下运行 Element，以查看脚本实际上在 Chrome 上打开 Web 应用程序并与页面进行交互。这仅在本地才有可能，但没有什么比实际亲眼看到实时发生的事情，而不是事后依赖屏幕截图和日志更好的了。要启用此模式，请在运行测试时添加标志
element run myfirstelementtest.ts --no-headless监视标志
当 Element 遇到错误或完成迭代时，它会自动关闭浏览器窗口。添加 --watch 将使浏览器窗口保持打开状态，然后监视脚本。脚本一保存，它将自动从头开始在同一窗口中运行它。只需像上面的示例一样添加此标志
--watch开发者工具标志
这将打开一个浏览器实例，并在打开 Chrome 开发者工具的情况下运行脚本，从而允许您查找要编写脚本的下一个操作的定位器。只需像第一个示例中那样添加此标志
--dev-tools有关更多标志，请使用 element run --help。
试用 Element
您刚刚了解了 Flood Element 的速成课程，现在可以开始使用了。下载 Element 以开始编写功能测试脚本，并在 Flood 上重复使用它们作为负载测试脚本。如果您没有 Flood 帐户，您可以轻松地在 Flood 网站上注册免费试用版。
我们很自豪能为开源社区做出贡献，并迫不及待地想让您试用 Flood 系列的这个新成员。
评论已关闭。