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

Question

我想加载/性能测试使用 angular 6+ 作为前端框架的 Web 应用程序。该应用程序非常大，使用了大量的向导/模式等。我想做一些 "real" e2e-frontend-tests（不仅仅是测试 API-calls，还有 js-rendering 等）

当前测试此类应用程序的最先进方法和工具是什么？

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

Answer 1

测试客户端性能的最佳方法是使用 browser developer tools

分析应用程序

如果你想自动化这个过程 - 你应该选择浏览器自动化框架，最流行的是 Selenium. You will be also capable of executing JavaScript calls to access Performance object in general and Navigation Timing / User Timing APIs。

我还建议牢记服务器端性能，即您可能想要检查您的应用程序可以毫无问题地处理多少并发用户、饱和点/第一个瓶颈是什么、响应时间开始增加或出现错误时开始发生。因此，请考虑将客户端性能测试与对应用程序进行预期负载相结合，因为从客户端的角度来看，渲染速度非常快，但服务器响应缓慢，从而导致糟糕的用户体验。根据您的测试实验室硬件，您可以选择 Selenium Grid to kick off many browser instances or go for a dedicated load testing tool

Answer 2

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

要考虑的一个选项可能是 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'

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

How to test performance / load of a modern angular application

testing

performance

load-testing

performance-testing

angular