Applies to LoadNinja 1.0, last modified on {{#DATE-PLACEHOLDER#}}

A single-page application (also known as SPA) is a web application that uses one URL for all its screens. The browser loads a page from the URL one time for the whole session. During its functioning, the application sends requests to the web server without changing the URL. Such applications are quite popular because they allow making web pages more dynamic and responsive.

With LoadNinja, you can test your single-page application the same way you do for regular web applications. You can reproduce the website user’s experience during the recording, then command the virtual users to perform the same actions you have performed, enabling you to run load, scalability, and performance tests.

How it works

When working with the single-page application, the URL of the page the user works with doesn’t change. For that reason, LoadNinja cannot automatically mark the difference between the application screens, so it doesn’t create steps automatically. You have to manually create a step for each individual application screen.

In LoadNinja, such steps are called the synthetic steps. Each synthetic step is implied to be a logical block that combines the actions the user performs on a specific screen of the application.

To create synthetic steps, click Add step on the toolbar of the web test recorder:

Add a synthetic step

In the subsequent dialog, you can name the step as you like:

Create New Synthetic Step dialog

As for existing synthetic steps, you can rename or delete them while recording or editing the web test:

Synthetic step options


To try out testing single-page applications, create a web test against the Fonty website:

It is a single-page application that can replace the font on any website with one of the fonts from Fonty's database.

  1. Click Record at the LoadNinja toolbar.

    Record button
  2. In the subsequent dialog, enter the website’s URL:

    Start Recording dialog

    Then, click Start Recording.

  3. When the web test recorder appears, at the tested page’s top, enter in the edit box:

    Fonty: Initial screen

    Click the image to enlarge it.

    Click the arrow on the edit box’s right.

  4. Fonty will open the requested page within the frame, but the URL of the page you are on will remain the same. This makes it the perfect time to logically separate the steps of your test.

    On the web test recorder’s toolbar, click Add step.

  5. In the subsequent dialog, name your custom step – for example, Framed website. Click Add New Step once ready.

    New step dialog
  6. This is it – LoadNinja has separated your newly created step from the preceding actions. All actions you will perform further will be associated with the new step.

    Feel free to try out things with Fonty – try changing fonts, filtering the list, and so on. For now, let’s command Fonty to use the Mali font with the page we have opened. To do that, simply click the name of the font in the list:

    Fonty: Select a font

    Click the image to enlarge it.

  7. It looks like everything works fine. Click Download on the website’s toolbar.

  8. The website has opened a dialog window, but the URL of the page is still the same.

    The font downloading dialog

    Click the image to enlarge it.

    This means it would be a good idea to create another custom step.

    Click Add step on the web test recorder’s toolbar, name the new step Dialog, confirm the creation by clicking Add New Step. The new Dialog step will appear in the list of steps.

  9. Let’s finish our test by clicking Hosted by Google in the dialog. It will open the Google Fonts website and create a step automatically.

  10. Click Stop on the toolbar.

  11. Our test is fully operational now, and it is logically split into several steps depending on the screen a user interacts with. Let’s replay it to ensure everything works fine. Click Play Recording.

The replay results should appear without any issues. This means our web test works properly. You can safely append it to a scenario and run a load test based on this web test.

See Also

Test Web Apps in Local Network With Proxy
Use Cases

Highlight search results