Creating a Web UI test by using the empty test option

You can create a Web UI test by selecting the empty test option and then adding the steps and elements either through the catalog in the Visual view or through the written code in the Code view.

You must have completed the following tasks:
  • Ensured that you are a Team Space Owner, Project Owner, or Member with a Tester role to create or edit a test resource.
  • Read and understood the information in Edit branch overview.
  • Ensured that your project contains an application.
  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. Click Author > Test Editor.
    The Test Editor page and the test navigator panel are displayed.
  4. Perform one of the following options:
    • Click Create asset > Create Test on the Test Editor page.
    • Click the Action menu icon in the test navigator panel to open the menu and click the Test option.

    Alternatively, you can create a test by clicking the Create Test Create Test icon on the application Details page.

    The Edit Branch dialog is displayed if there is no edit branch active. Otherwise, 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 in the selected branch of the 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. Optional: Click Open in the browser notification that might be displayed for you to confirm the opening of DevOps Test Runtime.
    The browser notification is displayed only when the recording agent is already installed.
  7. Perform the following steps in the Details tab of the Create Test dialog:
    1. Select an application for which you want to create a test from the Application drop-down list.
    2. Enter a name for the test in Asset Name.
    3. Select an existing folder or click New Folder to create a folder in Location to save the test assets that you are creating.
  8. Click Next.
    The Source tab is displayed.
  9. Select the Create an empty test option in the Select source drop-down list.
  10. Click Done.
    An empty test is displayed in Test Editor. The test is displayed either in the Visual view or in the Code view based on the view that is active on the Test Editor page.
  11. Choose one of the following options:
    • Add your code to build the test in the Code view. Go to step 19.
    • Add steps in the Visual view. Go to step 12.
  12. Drag and drop an element from one of the following catalogs to the Test Editor page:
    • General
    • UI
    • Flow

    A test step is added.

  13. Click the step to add the details.
    The step details pane is displayed and the Smartshot pane does not display any image.
  14. Drag and drop a .jpeg file to the Smartshots pane from the shot > Smartshots folder under the selected application.
  15. Select an option from the UI object drop-down list.
  16. Select a user action in the Action drop-down list or enter a value in the Value field depending on the type of step you have added from the catalog.
  17. Click the click here to add identifier link and then in the Object Identified By section, specify the condition and value that identifies the UI object.

    Alternatively, you can drag-drop a property that identifies the object from the Properties list.

  18. Optional: Click the Click here to add relative to link to define the location and name of the related object.
  19. Click the Save icon to save the modifications.
You have created a Web UI test by using the empty test option.
You can perform the following tasks: