Editing a web application design

When you upload the designs of the web applications that are in the early stages of development, HCL 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.

Before you begin

You must have completed the following tasks:

Procedure

  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 all the identified controls Click Select all.
    Clear the selection Click Clear.
    Select the controls that are similar to the selected control Click Similar.
    Expand the list of controls Click Expand All.
    Collapse the list of controls Click Collapse All.
    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.
    Arrange the uploaded images in the correct sequence to record user actions Drag and drop the images in the left navigation pane to arrange them in the correct sequence for recording user actions if you have multiple screens.
    Delete an uploaded image Hover over an image and click the delete icon. Click Yes in the Confirmation dialog that appears.
  6. Click the previous icon to return to the Application Configuration home page.

Results

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

What to do next

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.