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.
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
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'