如何测试现代角度应用程序的性能/负载答案

【问题标题】：How to test performance / load of a modern angular application如何测试现代角度应用程序的性能/负载
【发布时间】：2019-06-21 16:32:53
【问题描述】：

我想加载/性能测试一个使用 Angular 6+ 作为前端框架的 Web 应用程序。该应用程序非常大，并且使用了许多向导/模式等。我想做一些“真正的”e2e-frontend-tests（不仅测试 API 调用，还测试 js-rendering 等）

目前测试此类应用程序的最先进方法和工具有哪些？

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

【问题讨论】：

如何“加载”前端？你需要多人使用同一个键盘和鼠标吗？）
How do you performance test JavaScript code?的可能重复
这似乎是一个相当广泛且定义不明确的问题，因为应用程序听起来像是有很多活动部件的东西，这些部件会影响负载和性能测试。从数据库引擎和数据库设计的后端到使用和移动了多少 JavaScript，无所不包。这是人们撰写整本书以及设计培训的主题。
@richard Chambers：为了澄清，我想做一些真正的 e2e 性能测试，例如以无头模式打开浏览器，打开向导并 getvthevtimevit 直到出现向导。就像使用 selenium 进行前端测试一样。我也可以用 selenium 做到这一点，但我不知道它是否是正确的工具。
另外需要记住的是，由于 Angular 应用程序是在客户端机器上执行的（除非您使用 Universal 进行第一次渲染），性能会因处理器而异，内存等

标签： angular performance testing performance-testing load-testing

【解决方案1】：

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

要考虑的一个选项可能是endly e2e runner，它可以同时执行这两项任务，负载测试和并行运行 selenium 测试

它可能如下所示，其中“数据”文件夹包含以前记录的 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'

【讨论】：

免责声明：我是最终作者

【解决方案2】：

测试客户端性能的最佳方法是使用browser developer tools 分析应用程序

如果你想自动化这个过程 - 你应该选择浏览器自动化框架，最流行的是Selenium。您还可以执行JavaScript 调用以访问一般的Performance object，特别是Navigation Timing / User Timing APIs。

我还建议牢记服务器端性能，即您可能想检查您的应用程序可以处理多少并发用户而不会出现问题，饱和点/第一个瓶颈是什么，响应时间开始增加或开始发生错误.因此，请考虑将客户端性能测试与对应用程序进行预期负载相结合，因为从客户端的角度来看，渲染速度非常快，但服务器响应速度很慢，从而导致用户体验不佳。根据您的测试实验室硬件，您可以选择Selenium Grid 来启动许多浏览器实例，也可以选择dedicated load testing tool

【讨论】：