Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Testing Performance of Vaadin Apps: Step by Step Tutorial

DZone's Guide to

Testing Performance of Vaadin Apps: Step by Step Tutorial

This tutorial teaches by example how to run performance tests like load testing on an app built in the Vaadin framework.

· Performance Zone
Free Resource

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.

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. Smartmeter.io

  4. An application based on Vaadin - for this purpose we could use the 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

Open http://localhost:8080/ and you should see something like the screenshot below. Your Vaadin tutorial app is ready for performance testing.

Image title

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 “lara@martin.com” to “lara@martin.org.”

  • Change the user status to “ClosedLost.”

  • Change the user's date of birth to 26.2.10.

  • Click “Save.”

  • Cancel the filter.

  • Click “Add new customer.”

  • Fill in the data:

    • First name: Smart.

    • Last name: Meter.

    • Email: customerservice@smartmeter.io.

    • Status: contacted.

    • Birthday: 11.5.2001.

  • Click “Save.”

  • Write "martin" to the filter.

Test Plan Recording

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

Image title

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

Image title

You should see something like this:

Image title

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:

Image titleThe "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.

Image title

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.

Image title

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:

Image title

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

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

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.

Image title

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

Image title

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.

Image title

5. Use the View Results Tree listener to check the samples.

Image title

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!

Image title


Topics:
java ,vaadin ,performance ,load testing ,performance testing

Published at DZone with permission of Martin Krutak. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}