如何测试现代Angular应用程序的性能/负载

Question

我希望对一个使用 Angular 6+ 作为前端框架的 Web 应用程序进行负载/性能测试。该应用程序非常大，使用了许多向导/模态框等。

有哪些当前最先进的方法和工具可用于测试这种应用程序？

为了澄清，我想要进行一些真正的端到端前端性能测试，例如在无头模式下打开浏览器，打开向导并获取直到向导出现所需的时间。就像使用 Selenium 进行前端测试一样。我也可以使用 Selenium 进行此操作，但我不知道它是否是正确的工具。

- Tobias von Falkenhayn

---

你如何“加载”前端？需要多人使用同一键盘和鼠标吗 ;) - Liam

可能是一个重复的问题：如何对JavaScript代码进行性能测试？ - Liam

这似乎是一个相当广泛和定义不清的问题，因为该应用程序听起来像是有很多移动部分会影响负载和性能测试。从数据库引擎和数据库设计的后端到使用和移动多少JavaScript等各种因素都会影响。这是人们写整本书以及设计培训课程的类型。 - Richard Chambers

@richard chambers：澄清一下，我想进行一些真正的端到端性能测试，例如在无头模式下打开浏览器，打开向导并获取向导出现所需的时间。就像使用Selenium进行前端测试一样。我也可以用Selenium来做这个，但我不知道它是否是正确的工具。 - Tobias von Falkenhayn

还有一件需要记住的事情是，由于 Angular 应用程序在客户端机器上执行（除非您在首次呈现时使用 Universal），因此性能将根据处理器、RAM 等而有所不同。 - Brandon Taylor

Answer 1

测试客户端性能的最佳方式是使用 浏览器开发者工具 对应用程序进行分析。

如果您想自动化此过程-您应该选择浏览器自动化框架，最受欢迎的是Selenium。您还可以执行JavaScript调用来访问性能对象总体和导航计时/用户计时API特别是。

我建议您也要考虑服务器端性能，即要检查您的应用程序在没有问题的情况下可以处理多少并发用户，饱和点/第一个瓶颈是什么，响应时间何时开始增加或错误何时开始发生。因此，请考虑将客户端性能测试与向应用程序施加期望负载相结合，因为可能会出现这种情况：从客户端的角度来看，渲染非常快，但服务器响应缓慢，导致用户体验不佳。根据您的测试实验室硬件，您可以选择使用Selenium Grid启动许多浏览器实例，或选择专用的负载测试工具。

- Dmitri T

Answer 2

仅使用 UI 浏览器测试无法真正对应用程序进行压力测试， 理想情况下，您希望同时进行所有应用程序 API 调用的压力测试，并运行 UI/浏览器测试。

可以考虑的一个选择是 endly e2e runner, 它可以同时执行这些任务，即并行进行负载测试和运行 selenium 测试。

它可能看起来像以下内容，其中“data”文件夹包含以前记录的 http 请求，具有可选的期望验证规则，以命中您的 API。

@test.yaml

defaults:
  target:
    URL: ssh://127.0.0.1/
    credentials: localhost
pipeline:
  init:
    action: selenium:start
    version: 3.4.0
    port: 8085
    sdk: jdk
    sdkVersion: 1.8

  test:
    multiAction: true
    stressTest:
      action: run
      request: @load_test
      async: true
    testUI:
      action: selenium:run
      browser: firefox
      remoteSelenium:
        URL: http://127.0.0.1:8085
      commands:
        - get(http://play.golang.org/?simple=1)
        - (#code).clear
        - (#code).sendKeys(package main

          import "fmt"

          func main() {
          fmt.Println("Hello Endly!")
          }
          )
        - (#run).click
        - command: output = (#output).text
          exit: $output.Text:/Endly/
          sleepTimeMs: 1000
          repeat: 10
        - close
      expect:
        output:
          Text: /Hello Endly!/

在哪里 @load_test.yaml

init
  testEndpoint: rest.myapp.com
pipeline:
  test:
    data:
      []Requests: '@data/*request.json'
    range: '1..1'
    template:
      info:
        action: print
        message: starting load testing
      load:
        action: 'http/runner:load'
        threadCount: 3
        '@repeat': 100000
        requests: $data.Requests
      load-info:
        action: print
        message: 'QPS: $load.QPS: Response: min: $load.MinResponseTimeInMs ms, avg: $load.AvgResponseTimeInMs ms max: $load.MaxResponseTimeInMs ms'

- Adrian

---

免责声明：我是最终作者。 - Adrian