Testing

Learn how to write and run UI tests in LVGL Pro Editor for quality assurance.

Overview

Write comprehensive UI tests using XML to verify functionality and visual consistency of your LVGL interfaces.

The XML test module is a powerful and flexible way to define functional UI tests.

Test XML files are similar to components but are wrapped in a <test> tag and consist of two main parts:

  • UI Definition: Use <styles>, <consts>, and <view> to define how the UI should look. This is identical to how <component>s are structured.
  • Test Steps: Encapsulated in a <steps> tag, these define the actions and assertions for the test.

Step Types

The following step types are currently supported:

StepParametersDescription
<move_to x="10" y="30"/>x, yMove the mouse to the specified screen coordinates
<click_at x="10" y="30"/>x, ySimulates a click at the specified screen coordinates
<press/>Press on the current screen coordinate
<release/>Release on the current screen coordinate
<wait ms="100"/>msWaits for the given number of milliseconds. LVGL continues running, including animations and timers
<freeze ms="100"/>msPauses the UI and LVGL's internal time. Useful for visual debugging
<subject_set subject="subject1" value="5"/>subject, valueSet an integer or string subject's value
<subject_compare subject="subject1" value="10"/>subject, valueCompare an integer or string subject's value against a reference value
<screenshot_compare path="path/to/image.png"/>pathCompares the current screen with a reference image. If the image doesn't exist, it is created. If the comparison fails, an image with _err suffix is saved for inspection

Example:

xml
<test width="300" height="400">
 <view width="100%" height="100%" flex_flow="column">
 <lv_checkbox text="First one!"/>
 <lv_slider />
 </view>

 <steps>
   <screenshot_compare path="imgs/before.png"/>
   <click_at x="32" y="32"/>
   <subject_compare subject="subject2" value="50"/>
   <click_at x="50" y="64"/>
   <subject_set subject="subject2" value="10"/>
   <wait ms="300"/>
   <screenshot_compare path="imgs/after.png"/>
 </steps>
</test>

Running Tests

Use the "Test" panel of the Editor to see and run tests, or run them with the CLI in a CI/CD pipeline.

How is this guide?

Last updated on

On this page