Applies to LoadNinja 1.0, last modified on October 31, 2018

A single-page application (also known as SPA) is a web application that uses on URL for its screens. The browser loads a page from the URL one time for the whole session, while individual components of the application continue to load for user actions or proper functioning of the application. They 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 perform 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 define the difference between the application pages and screen, so it doesn’t create steps automatically. You have to manually create a step for each separate application page.

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 page of the application.

To create synthetic steps, click a corresponding button on the web test recorder’s toolbar:

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

Example

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

https://fonty.dizoo.bg

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:

    https://fonty.dizoo.bg

    Start Recording dialog

    Then, click Start Recording.

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

    Fonty: Initial screen

    Click the image to enlarge it.

    Click the arrow icon 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 the plus icon.

  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 the plus icon 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 the stop icon on the toolbar.

  11. Our test is fully operational now, and it is logically split into several steps depending on the page 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
Use Cases

Highlight search results