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:

Procedure

  1. Log in to Test Hub.
    The Projects page of the initial team space is displayed.
  2. Click My projects > project_name to open the project that contains the test assets.
    The Overview page of the project is displayed.
  3. Navigate to Author > Test Editor.
    The Test Editor page and test navigator panel are displayed.
  4. 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.
  5. 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.
  6. Type a unique name in the Name field of the Create Application dialog.
  7. Click Create.
    The application is successfully created and it opens in the Test Editor for further configuration.
  8. 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.
  9. Click the SmartShots tab.
  10. Click the Add Design icon Add Design to upload designs.
  11. Browse and select the .jpeg, .jpg, or .png files from your local drive, and then click Open.
    The design images are uploaded, and a success message is displayed after processing is complete. You can hover over an image and click the zoom icon Zoom to view the enlarged image. The image displays with the controls to rotate right, rotate left, zoom in, and zoom out.
  12. Click an uploaded image.
    The SmartShot pane and the following tabs are displayed:
    Tabs Description

    Elements

    Displays the element details in the image. You can click any element to view its details.
    Usage

    Displays where the current image is referenced in other tests. You can click the image of an icon icon to open the referenced tests. If there are no references to the current test, then the tab displays that the current image has no dependants.
    Details Displays the Git details such as Asset ID, Repo, Path, Branch, and Commit.
    Test Generation Displays the fields for test flow and test generation.
  13. Select a provider from AI Provider.
    The list displays providers that you configured in the Cloud Credentials screen.
  14. Enter a prompt that defines the outline of the test flow you are looking for in Prompt.
  15. Click Generate Test Flow.
    A confirmation dialog is displayed.
  16. 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.
  17. Optional: Modify the prompt and click Re-generate Test Flow if you want to refine the test flow.
  18. Click Generate Test.
    The Create Test dialog is displayed with the Details tab.
  19. Enter a name for the test in Asset Name.
  20. 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.