Testing performance of Vaadin apps: Step by step tutorial

Creating and running performance tests for Vaadin framework based applications tends to be very complicated. However, there is an easy way.

The main problem with load testing Vaadin apps is the large number of dynamic values which need to be obtained from the returned HTTP responses and then correlated with every request. Luckily, SmartMeter.io has a special tool called Recorder that does all this automatically.

This article describes how to create a simple test scenario for an application written in Vaadin using SmartMeter.io.

Prerequisites

These instructions are created for demo application from Vaadin official tutorial. If you want to try this for your own application, just go straight to the Test plan recording chapter.

For this tutorial you will need:

1. git

2. maven

3. dowload Smartmeter.io

4. an application based on Vaadin - for this purpose we could use tutorial app for Vaadin. You can download sources from github. Run this from the command line:

   git clone https://github.com/vaadin/tutorial/ vaadin-tutorial

   cd vaadin-tutorial

   mvn install   #compile project

   mvn jetty:run #run the application

5. open http://localhost:8080/ and you should see something like this (on screenshot). Your vaadin tutorial app is ready for performance testing.

1Load testing Vaadin apps SmartMeter.io

Definition of performance test scenario

The test scenario for the Vaadin tutorial application will include following steps:

  1. Load initial page

  2. Write "martin" to filter

  3. Click to first row in table (row with “Lara Martin”)

  4. Change user email from “lara@martin.com” to “lara@martin.org”

  5. Change user status to “ClosedLost”

  6. Change users date of birth to 26.2.10

  7. Click “Save”

  8. Cancel filter

  9. Click “Add new cutomer”

  10. Fill in data:

    • First name: Smart

    • Last name:Meter

    • Email: customerservice@smartmeter.io

    • Status: contacted

    • Birthday: 11.5.2001

  11. Click “Save”

  12. Write "martin" to filter

Test plan recording

After launching SmartMeter.io. an initial window appears. Click the “Start Recorder” button.

2Load testing Vaadin apps SmartMeter.io

Recorder window appears. Give your test a name (e.g., Vaadin tutorial).

Setup URL of your web application (for Vaadin tutorial application it is http://localhost:8080/).

You can left other items unchanged. Click “Start recording”.

5Load testing Vaadin apps SmartMeter.io

You should see something like this:

4Load testing Vaadin apps SmartMeter.io

The window is split basically into two frames. Left frame contains transaction list, the right frame is basically a web browser window.

Transactions are usually considered as a step in a scenario. Transaction can contain one or more HTTP requests/samples/server hits. Transactions will map to Transaction Controller in the result test script. Transaction Controller will contain samples captured by this transaction.

For a more detailed description of the Recorder, its parts and functions, refer to the Smartmeter documentation.

The screenshot below captures the transaction view.

7Load testing Vaadin apps SmartMeter.io

The "Transaction title" field contains the name of the transaction. By default, this will be the URL or the content of the <title> HTML element on the page, or some hashcode. For the simplicity of test script, each transaction should be named with unique name. Best choice will be the name of the step in the scenario. So, let’s rename the transaction to "Load initial page".

Now, click the "plus" button and manually add another transaction named "Write martin to filter". In the right frame inside webpage, click the input field for filter and type "martin". You add second transaction manually.

6Load testing Vaadin apps SmartMeter.io

Continue with next steps of the scenario in a similar way. After recording of the last step, click the “Save test” button, save record log and confirm to open editor window.

9Load testing Vaadin apps SmartMeter.io

Recorder will write data to *.json file and then it generates *.jmx script from that. It will also generate Recording log. When finished, SmartMeter.io editor window will appear.

Check and edit Test Plan

You can see in editor, how the recorded test script looks. SmartMeter.io automatically added responses extractors for sync ID, security key, connector IDs and uiId-s. Reference names of these extractors are used as dynamic variables in requests of Test Plan as you can see in the picture below.

12Load testing Vaadin apps SmartMeter.io

 

In the case of more detailed preparing and configuring the Test Plan, just expand the Thread Group.

We can for example adjust Think Time and other data (e.g. email, date, etc.)

Debugging Test Plan

You want to usually run your test for the first time only in one thread. This is convenient for debugging Test Plan or for running only a small smoke test.

1. Click on Thread Group and set number of threads or thread concurrency to 1.

 

11Load testing Vaadin apps SmartMeter.io

2. Check if you have View Reults Tree listener in your Test Plan. Add it if needed.

13Load testing Vaadin apps SmartMeter.io

3. Focus View Reulsts Tree listener by clicking on it

4. Then click on green Start button. You can choose between Start button and Start no pauses button. Classical Start button will start your test localy and will go through your Test Plan step by step. Start no pauses button will do the same, but will ignore Think Times.

14Load testing Vaadin apps SmartMeter.io

5. Use View Results Tree listener to check samples

15Load testing Vaadin apps SmartMeter.io

Running the test

When you finished scripting, select the Thread Group and setup Target Concurrency. Now hit the Big Red Button and start testing!

16Load testing Vaadin apps SmartMeter.io