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.
This article describes how to create a simple test scenario for an application written in Vaadin using the SmartMeter.io tool.
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:
git clone https://github.com/vaadin/tutorial/ vaadin-tutorial cd vaadin-tutorial mvn install #compile project mvn jetty:run #run the application
Open http://localhost:8080/ and you should see something like the screenshot below. 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:
Load the initial page.
Write "martin" to the filter.
Click the first row in the table (row with “Lara Martin”).
Change the user email from “email@example.com” to “firstname.lastname@example.org.”
Change the user status to “ClosedLost.”
Change the user's date of birth to 26.2.10.
Cancel the filter.
Click “Add new customer.”
Fill in the data:
First name: Smart.
Last name: Meter.
Write "martin" to the filter.
Test Plan Recording
After launching SmartMeter.io, an initial window appears. Click the “Start Recorder” button.
The recorder window appears. Give your test a name (e.g., Vaadin tutorial).
Set up the URL of your web application (for the Vaadin tutorial application, it is http://localhost:8080/).
You can leave the 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. Transactions 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 and 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 hash code. For the simplicity of the test script, each transaction should be named with a unique name. The 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 the web page, click the input field for filter and type "martin." You add the second transaction manually.
Continue with next steps of the scenario in a similar way. After recording the last step, click the “Save test” button, save the record log, and confirm to open the editor window.
The recorder will write the data to a *.json file and then it generates a *.jmx script from that. It will also generate a Recording log. When finished, the SmartMeter.io editor window will appear.
Check and Edit the Test Plan
You can see in the editor how the recorded test script looks. SmartMeter.io automatically added responses extractors for sync ID, security key, connector IDs and uiId-s. The reference names of these extractors are used as dynamic variables in requests of the Test Plan, as you can see in the picture below:
In the case of more detailed preparing and configuring of the Test Plan, just expand the Thread Group.
Debugging the Test Plan
You usually want to run your test for the first time only in one thread. This is convenient for debugging the Test Plan or for running only a small smoke test.
1. Click on Thread Group and set the number of threads or thread concurrency to 1.
2. Check if you have the View Reults Tree listener in your Test Plan. Add it if needed.
3. Focus the View Results Tree listener by clicking on it.
4. Click on the green Start button. You can choose between the Start button and Start no pauses button. The classic Start button will start your test locally and will go through your Test Plan step by step. The Start no pauses button will do the same, but will ignore Think Times.
5. Use the View Results Tree listener to check the samples.
Running the Test
When you finish scripting, select the Thread Group and set up Target Concurrency. Now hit the red arrow button and start testing!