How to Do Performance Testing
Intro
Odds are pretty good that our production application has some kind of performance monitoring in place. This goes a long way towards finding out when something slow has been released into the wild.
But how do we catch performance issues before they reach production?
A Solution
Let our Selenium tests check how fast the pages load. The browser already measures every page load, step by step, with the Navigation Timing API. A test can read these numbers with a line of JavaScript, and check them against a budget: for example, the page must finish loading in less than 10 seconds.
The API works in every modern browser, so the same check runs in Chrome, Edge, Firefox and Safari. And since the numbers come from the browser, they include what the user waits for: the server, the network, and the time to load the images, styles and scripts of the page.
Older versions of this tip captured the traffic with a proxy server (BrowserMob Proxy) and graded it with YSlow. Both are no longer maintained.
Let's continue with an example.
Example
Expected Behavior
- Chrome starts
- The test loads the page
- The test reads the page load timings from the browser and prints them
- The test checks that the page loaded within the budget
- Chrome closes
Summary
A budget check in our tests catches the release that makes a page much slower. Keep the budget loose enough for the machines our tests run on (a CI server is often slower than our laptop), and keep in mind that one page load is one sample: the numbers change from run to run.
For a deeper look at a page, Lighthouse grades its performance, accessibility and best practices, and can run from the command-line or in CI.
Happy Testing!
Authors
