How to test performance / load of a modern angular application

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