Recording the drag-and-drop action in a Web UI test

When you want to create a Web UI test that requires you to drag and drop an object manually onto another object, you can record such an action.

Before you begin

You must have read and understood Recording a Web UI test.

About this task

When you record a Web UI test that requires you to drag an object and drop it in a different location on the same web page, the drag-and-drop action captures the inputs to complete the task. For example, you can drag an amount for payment among the available denominations, such as 1000, 3000, and 5000 and then drop it on the payment field. When you drag '1000' to the payment field, HCL DevOps Test UI (Test UI) captures the draggable object '1000' and the drop location by using the drag-and-drop action. The drag-and-drop action uses properties such as the Xpath, Id, or the x and y coordinates to identify the drop location for the object. After the test generation, you can play back the test to view the drag-and-drop action.

Procedure

  1. In the UI Test perspective, click New > Test From Recording.

    Alternatively, on the toolbar, click the New Test From Recording icon New Test From Recording.

    The New Test From Recording wizard is displayed.

  2. Click Create a test from a new recording in the Recording Session screen.
  3. Select Web UI Test.
  4. Follow the on-screen instructions in the wizard, and then click Finish to start the recording.
  5. Perform the drag-and-drop action in the web application.
  6. Stop the recorder by closing the web application under test or by clicking the Stop icon Stop icon in the Recording Control view.
    The test is generated.
  7. Click the step with the Drag-drop statement.
    For example, Drag-drop Division to target object with Xpath //*[@id="payment"] whose Content is 1000.
    The User Action Details section displays the following details:
    • The Drag-drop option selected in the Object’s actions list
    • Value for Object identified by
    • Value for Object location
    • Property-value pair for the Drop to object field

What to do next

You can run the test and verify the results of the drag-and-drop action in the unified report. See Running a Web UI test and Unified reports for Web UI, mobile, and Windows tests.