How to test performance / load of a modern angular

Question

I want to load / performance test a web application which uses angular 6+ as the frontend-framework. The application is quite big and uses lots of wizards / modals etc. I want to do some "real" e2e-frontend-tests (not just testing API-calls, but also js-rendering etc.)

What are the current state-of-the-art approaches and tools to test applications like this?

To clearify, i want to do some real e2e performance tests like e.g. open a browser in headless mode, open a wizard and get the time it takes until the wizard appears. Like frontend testing with selenium. I could do this with selenium too but i don't know if its the right tool.

Answer 1

The best way of testing client-side performance is profiling the application using browser developer tools

If you want to automate the process - you should go for the browser automation framework, the most popular one is Selenium. You will be also capable of executing JavaScript calls to access Performance object in general and Navigation Timing / User Timing APIs in particular.

I would also recommend keeping in mind server-side performance, i.e. you might want to check how many concurrent users you application can handle without issues, what are the saturation point / first bottleneck, when response time starts increasing or errors start occurring. So consider combining client-side performance tests with conducting the anticipated load onto your application as it can be the case that from client perspective rendering is very fast but server responds slowly causing bad user experience. Depending on your test lab hardware you can either go for Selenium Grid to kick off many browser instances or go for a dedicated load testing tool

Answer 2

You can not truly stress test your application using only UI browser testing, ideally, you would like to do both stress test all your application API calls, while also running UI/browser test.

One option to consider could be endly e2e runner, it can do both of these tasks, load test and run selenium test in parallel

It may look like the following, where "data" folder contains previously recorded http requests with optional desired validation rules hiting your 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!/

where @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'