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.

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.

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”.

You should see something like this:

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.

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.

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.

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.

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

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.

5. Use View Results Tree listener to check samples

Running the test

When you finished scripting, select the Thread Group and setup Target Concurrency. Now hit the red arrow button and start testing!