Creating a Web UI test by using Test Genie

When you want to create tests for web applications that are in the early stages of development, you can do so by adding designs of the applications and generating tests by using Test Genie. You must first upload the images of screens or wireframes as part of the application configuration process. You can use these uploaded images to generate tests through AI.

Before you begin

You must have completed the following tasks:

Read about Test creation by Test Genie - Tech Preview.
Ensured that you are assigned a role as a Project Owner or Tester in the project. See Managing access to the server projects.
Created a project in your team space in Test Hub. See Creating a project.
Added the remote Git repository that contains the test resources to the project. See Adding repositories to a server project.
Added cloud credentials of the AI providers such as OpenAI and Ollama. See Adding cloud credentials of AI providers.

Procedure

Log in to Test Hub.
The Projects page of the initial team space is displayed.
Click My projects > project_name to open the project that contains the test assets.
The Overview page of the project is displayed.
Navigate to Author > Test Editor.
The Test Editor page and test navigator panel are displayed.
Perform any of the following actions:
- Click the Action Menu icon and select Application.
- Right-click the project repository in the test navigator panel and select New Application.
- Click Create Application on the Test Editor page, which is displayed when no applications are created in your project.
The Edit branch dialog is displayed.

If the Edit branch dialog is not displayed, then go to step 6.
Select your action to either select an existing Edit branch or create an Edit branch:
- Perform the following steps to select an existing Edit branch:
  1. Select Use an existing edit branch.
  2. Select an Edit branch from the Select branch list if Edit branches already exist for your repository.
    
    Note: A warning message is displayed if the Edit branch, which you selected, is behind the source branch. To update the selected edit branch and maintain synchronization with the source branch, you can select the Update branch option when switching checkbox.
  3. Click Ok.
- Perform the following steps to create the Edit branch:
  1. Select Create new edit branch.
  2. Enter a name for the Edit branch in the Branch Name field.
  3. Click Save.
Type a unique name in the Name field of the Create Application dialog.
Click Create.
The application is successfully created and it opens in the Test Editor for further configuration.
Enter the following details of the web application in the Details tab:
- URL: Planned or actual URL of the web application for which you are uploading the designs.
  You can enter any value by prefixing it with a protocol such as http or https. For example,https://hostname. The value need not be a fully qualified domain name (FQDN) at this stage of application configuration. If you do not specify the URL, Test Hub assigns https://www.example-url.com as the URL.
- Description: Information about the web application.
Click the SmartShots tab.
Click + Add Design to upload designs.
Browse and select the .jpeg, .jpg, or .png files from your local drive, and then click Open.
The design images are uploaded.
Click an uploaded image.
The SmartShot and Test Genie panes are displayed.
Select a provider from AI Provider.
The list displays providers that you configured in the Cloud Credentials screen.
Enter a prompt that defines the outline of the test flow you are looking for in Prompt.
Click Generate Test Flow.
A confirmation dialog is displayed.
Click Ok to start analysing the design to generate a test flow.
The design is processed and the Test Flow is displayed. Also, Generate Test Flow changes to Re-generate Test Flow and the Generate Test button is displayed.
Optional: Modify the prompt and click Re-generate Test Flow if you want to refine the test flow.
Click Generate Test.
The Create Test dialog is displayed with the Details tab.
Enter a name for the test in Asset Name.
Click Done.
A success message is displayed and the generated test is listed in the test navigator panel.

Results

You have created a Web UI test with the application design by using Test Genie.

What to do next

You can review the steps and controls identified in the test and edit the test to modify the steps. See Editing a Web UI test and Adding user actions in a test from smartshots.