Editing a web application design

When you upload the designs of the web applications that are in the early stages of development, IBM® DevOps Test UI (Test UI) identifies the common UI controls on the application designs. You can review the controls that are identified on the designs and validate them in the design editor. You can then edit the type and label of the identified controls as required on each page.

You must have completed the following tasks:
  1. Go to the UI Test perspective.
  2. Click the Application Configuration icon in the toolbar.

    The Application Configuration page is displayed.

  3. Optional: Click Web to filter and view the list of configured Web applications.
  4. Click the Design editor icon to edit the design.

    The design editor page is displayed.

  5. You can perform the following actions:
    If you want to... Do this...
    Select the controls of one category. Click Select component.
    Create a hotspot that provides a link to the image that is adjacent to the selected image for navigation. Hover over the control for which you want to create a hotspot, and then click the Hotspot icon.

    A success message is displayed when the selected control is linked with an uploaded image that is next in sequence.

    Note: You can also remove the hotspot for the control by clicking the Hotspot icon.
    Display the list of controls either in a categorised list or a simple list. Click the Toggle view icon.
    Add a control that is not identified. Click the Add control icon to drag and select an area that identifies a new UI control to be added.
    Perform the following actions in the pop-up dialog that appears:
    1. Select the type of control from the Type drop-down list.
    2. Enter the name of the control in the Content text box if there is any text within the bounds of the control.
    3. Click Show more to verify and edit the values that correctly identify the placement and size of the control in the Bounds text boxes.
    4. Click Save.
    Modify an identified control. Select a control, and then click the Edit controls icon to modify the details.
    Perform the following actions in the pop-up dialog that appears:
    1. Select the type of control from the Type drop-down list.
    2. Enter the name of the control in the Content text box if there is any text within the bounds of the control.
    3. Click Show more to verify and edit the values that correctly identify the placement and size of the control in the Bounds text boxes.
    4. Click Save.

    You can also select multiple controls, and then change the type of the selected controls.
    Delete a control. Select a control, and then click the Delete controls icon. Click Yes in the Confirmation dialog that appears.

    You can also select and delete multiple controls.
    Select all the identified controls. Click Select all.
    Select the controls that are similar to the selected control. Click Similar.
    Highlight the hotspot that is on the current page. Click Hotspot.
    Clear the selection. Click Clear.
    Expand the list of controls. Click Expand All.
    Collapse the list of controls. Click Collapse All.
    Arrange the uploaded images in the correct sequence to record user actions. Drag and drop the images in the bottom navigation pane to arrange them in the correct sequence to record user actions if you have multiple screens.

    When you change the order of the image, if it is with a hotspot, then the hotspot is linked to the next available image. If there is no image adjacent to the reordered image with the hotspot, then the hotspot is removed.
    Disable the uploaded images. Perform any of the following actions to disable one or more images:

    Hover over an image and click the Disable icon.

    or
    1. Press the Ctrl key and then click the required images.
    2. Click the Disable option.
    When you disable images, the controls are not displayed and they are not available to record a test or create a hotspot until they are enabled again.
    Enable the disabled images. Perform the following actions to enable one or more disabled images:
    1. Hover over an image, or click Select all disabled, or press the Ctrl key and then click the required images.
    2. Click the Enable option.
    The enabled images are available for the test recording or hotspot creation.
    Delete the uploaded images. Perform the following actions to delete one or more images:
    1. Select the required image or to select multiple images, press the Ctrl key and then click the required images.
    2. Click Delete image.

      The Confirmation dialog is displayed.

    3. Click Yes.

    When you delete an image that is adjacent to the image with a hotspot, then the hotspot is linked to the next available image. If there is no image adjacent to the deleted image, then the hotspot is removed.
  6. Click the previous icon to return to the Application Configuration home page.

You have reviewed and edited the controls on the application designs.

You can record a Web UI test in the UI Test perspective by using the configured application designs. See Recording a Web UI test by using application designs.