UI Load Testing

This repository gives the opportunity for quick UI load testing. It lets you record a usage scenario in the browser as a Playwright Test, transforms it for easier modifications, to then execute a Artillery Load Test. It is supposed to easily create load test scripts, that can be used in external projects in a more complex setup. The goal is the reduction of manual effort by creating the scripts.

Components:

• Custom playwright-codegen.js for the generation and debugging of test code.
• Custom code-transformer.js for the generation of better accessible code.
• Simple artillery-script.yml for debugging with virtual browsers.

Installation

Prerequisite: Installed NodeJS

npm install

Usage

1. Generate Playwright Test

Start the Playwright Code Generator with the URL of the interested website.

Default Code Generator:

npx playwright codegen https://www.google.com/

Custom Code Generator:

Check the playwright-codegen.js and adjust the configuration on top, then run:

npm run codegen

Copy the generated code into one or more .js files in the 1-generated-code directory. The content can include the full Test Runner content or just the function body lines.

2. Transform generated Code

The generated code must be modified for a reliable load test. Run the following command to transform all generated files from the 1-generated-code directory and save them to 2-transformed-code:

npm run transform

The script will transform all script lines depending on the content. It will store all interaction elements in variables, to make the load test easier to edit. In addition, it adds safety checks for visible elements and only the safety for only one additional frame when select a frame locator. The code-transformer.js can be edited for more custom code. Keep in mind, to rename modified files if the transformer should not overwrite them in the future.

Manual Modifications:

The default version of the code-transformer.js adds too many lines of code, to validate the state of the current test. Before using the transformed script, a manual validation is recommended with following suggested changes:

1. Check if the Page URL is available.
2. The check for only one frame can be reduced to once before the dialog interaction.
3. Check if all selectors for dialogs are build for the first visible dialog.
4. Visibility is checked for all elements and can be adjusted with custom timeout values.
5. Validate selectors for the elements.

To debug the generated code, it can be pasted into the playwright-codegen.js sections before or after the breakpoint. The code generator has the functionality like a debugger to step over instructions.

3. Select Usage Scenario

After generating the transformed scripts (and verifying them), select a script as usage scenario via the command line:

npm run select

Answer the CLI, and it will save the selected scenario to 3-scenario for the artillery execution.

4. Run Artillery Script

Adjust artillery-script.yml with custom configuration and run it:

npm run load

For another a ramp-up load test the artillery-rampup.yml can be executed:

npm run rampup

Both will run the code of the selected scenario for virtual users.

References

• Artillery Playwright Reference
• Playwright Code Generator
• Playwright Core Class Docs