Creation of design driven tests

You can start the testing phase in the early stages of the development of web applications by using design driven testing (DDT). DDT is a dynamic feature that leverages machine learning capabilities to create tests by using the designs of web applications under development.

You can provide wireframes of a web application instead of the URL of the deployed application to configure them for testing. DDT recognizes UI controls on these images of the application designs that you have provided. You can validate the identified UI controls and modify them if required in the design editor. If any of the controls are not identified, you can add such controls with an appropriate label.

The applications configured with designs can be used to record tests in the Virtual Client window. After you record the tests, you can refine the test steps in the test editor. When the real application is ready and accessible, you can run the tests that are created based on the designs against the real application. Also, if you run the tests with the guided healing option enabled, you can replace the screen captures with the latest ones and improve the test steps based on the actual implementation of the application.

DDT accelerates testing activities by advancing the testing phase in a product release cycle.

You must consider the following guidelines for using DDT:

  • Use .jpg, .jpeg, or .png images of 1080 x 720 or higher resolution to upload designs of web applications. The total size of the images that you select for each upload must not exceed 50 MB.

  • Validate all the identified controls and the associated labels on the Design editor page after the images are uploaded and processed by the ML model of Test UI. If any control is not identified or identified incorrectly, then you can add, edit, or delete controls.

  • Add or delete the designs of the configured application and organize the designs in the correct sequence to create tests.

Task flow of design driven testing for Web UI tests

The task flow of design driven testing for web applications is as follows:
Task Link
1. You must add the images of web application designs by using the Application Configuration page. Adding a web application design
2. You must validate the UI controls that are identified, and then edit them as required. Editing a web application design
3. You can upload more images, reorder the uploaded images, and delete the unwanted ones. Editing the web application configuration
4. You can record Web UI tests by using the applications that are added with designs. Recording a test
5. You can edit the test steps and save the test. Editing a test that uses application designs
6. You must run the test with guided healing or auto healing enabled to update the test with the actual screens of the application after the web application is deployed and available to run. Running a Web UI test
7. You can view the report and verify the results of each step. Viewing a unified report
8. You can apply the data collected during the test run to update the test.

Also, You can run the test, view the report, and update the test repeatedly to make it error free.

Updating tests by using the guided healing feature
Click the demo video of DDT to watch a demonstration of the tasks listed in the task flow table.