Skip to content
A small showcase on how to test performance using WebdriverIO
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
logs add logs dir, run via standalone service Sep 7, 2018
tests update chromedriver Jun 18, 2019
.editorconfig
.gitignore updated example to work with latest WebdriverIO and Chrome Nov 22, 2018
LICENSE Initial commit Sep 7, 2018
README.md Added command to run all scenarios Sep 9, 2018
babel.config.js update wdio and add saucelabs example Jan 24, 2019
package.json update chromedriver Jun 18, 2019
wdio.conf.js update wdio and add saucelabs example Jan 24, 2019
wdio.local.conf.js fix performance tests with latest release May 31, 2019
wdio.sauce.conf.js fix sauce test example May 31, 2019

README.md

Automated Performance Testing With WebDriver

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.

Video to the tutorial

Setup

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 test

Page Weight Scenario

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 variable dir in line 3 from big to small in order to load optimized images

  • in webpack.config.js change the mode from development to production to enable tree shaking and serve less script payload

To run the test call:

$ npm test -- --spec pageWeight

Script Blocking Scenario

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 call this.mineBitcoin(1500); in the constructor which was responsible for a lot of CPU heavy computation during page load.

To run the test call:

$ npm test -- --spec scriptBlocking

This project is a demo for my talk at #NodeJSInteractive on "Automated Performance Testing With WebDriver".

You can’t perform that action at this time.