This project contains an example test suite written in WebdriverIO to showcase performance tests using WebDriver. It uses an example application based on the tutorial "Optimize Website Speed With Chrome DevTools" from the Google Developers page. After you've followed the steps on how to optimize the loading speed for that application you can run the test suite and will notice that all test pass. After that you can undo the changes and see how this affects the performance metrics and causes the test to fail.
To run this demo you need to have Node.js (v8 or higher) installed on your machine. Then clone the repo and install dependencies:
$ git clone git@github.com:christian-bromann/webdriverio-performance-testing.git
$ cd webdriverio-performance-testing
$ npm install
Now you are good to go to run the scenarios.
To run all the scenarios, use the below command
$ npm run test:local
To optimize for page weight the tutorial author did the following steps:
-
in
server.js
add compression to your Express.js server so images are being served compressed:const compression = require('compression'); app.use(compression())
-
in
src/model.js
change the variabledir
in line 3 frombig
tosmall
in order to load optimized images -
in
webpack.config.js
change the mode fromdevelopment
toproduction
to enable tree shaking and serve less script payload
To run the test call:
$ npm run test:local -- --spec pageWeight
To optimize the page load speed further the author did some optimizations to the application logic:
- in
template.html
remove the LoDash and jQuery scripts since they are not used at all and block the page from being loaded - in
src/App.jsx
remove the function callthis.mineBitcoin(1500);
in the constructor which was responsible for a lot of CPU heavy computation during page load.
To run the test call:
$ npm run test:local -- --spec scriptBlocking
This project is a demo for my talk at #NodeJSInteractive on "Automated Performance Testing With WebDriver".