Recording a Web UI test

You can record screens and user actions on the web page of an application to create a Web UI test in HCL DevOps Test Hub (Test Hub).

Before you begin

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.

About this task

When you choose to create a Web UI test by using the recording option, the installation status of the recording agent is displayed. Initially, when you are recording a test for the first time, the status is displayed as 'Not installed' with the Download Installer link to install the recorder agent. The devops-test-runtime.msi file is downloaded. You must then double-click the .msi file to install the agent. After the installation is complete, you must click Verify to continue with the recording process.

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. 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.
    • Right-click the application in the test navigator panel, select New > Test.

    Alternatively, you can create a test by clicking the Create Test icon Create Test on the application Details page if there is an edit branch active.

    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. 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 By recording option to record a test in the Select source drop-down list.
    Test Hub checks whether the recording agent is installed on your computer.
  10. Perform one of the following steps depending on the installation status of the agent:
    If... Then...
    The agent is not installed and the screen displays the following options:
    • Windows (64-bit .msi)
    • Mac OS (64-bit .zip)
    • Debian/Ubuntu (64-bit .deb)
    • RHEL/Fedora/OpenSUSE (64-bit .rpm)
    		 Perform the following steps to install the agent on Windows:
    1. Click Download to download the recording agent installer.

      The devops-test-runtime.msi file is downloaded.

    2. Double-click the .msi file to install the agent.

      The installation window with the progress bar is displayed.

    3. Click Proceed to accept the download of the proprietary certificate if prompted.
    4. Click Verify to confirm the agent installation.

      A browser notification might get displayed for you to confirm the opening of the agent. You must click Open.

      The additional options for recording are displayed. Go to step 11.
    Perform the following steps to install the agent on Mac:
    1. Click Download to download the recording agent installer.

      The devops-test-runtime.zip file is downloaded.

    2. Extract the .zip file:

      unzip devops-test-runtime.zip

    3. Quarantine the installer:

      xattr -dr com.apple.quarantine ./*

    4. Run the installer:

      ./install.sh

    5. Click Verify to confirm the agent installation.

      The additional options for recording are displayed. Go to step 11.
    Perform the following steps to install the agent on Ubuntu:
    1. Click Download to download the recording agent installer.

      The devops-test-runtime-11.0.5-1.x86_64.rpm file is downloaded.

    2. Navigate to the directory where the installer is downloaded:

      cd <download-directory>

    3. Run the following command:

      INGRESS_DOMAIN=master-hcl.tp-k8s.nonprod.hclpnp.com dnf

      localinstall ./devops-test-runtime-11.0.5-1.x86_64.rpm

    4. Click Verify to confirm the agent installation.

      The additional options for recording are displayed. Go to step 11.
    Perform the following steps to install the agent on Linux:
    1. Click Download to download the recording agent installer.

      The devops-test-runtime_11.0.5_amd64.deb file is downloaded.

    2. Navigate to the directory where the installer is downloaded:

      cd <download-directory>

    3. Run the installer:

      sudo apt install ./devops-test-runtime_11.0.5_amd64.deb

    4. Click Verify to confirm the agent installation.

      The additional options for recording are displayed. Go to step 11.
    The agent is installed, but not updated. Perform the following steps to update the agent:
    1. Click Upgrade.

      The installation screen with the progress bar is displayed. The latest DevOps Test Runtime is installed and configured.

    2. Click Proceed to accept the download of the proprietary certificate if prompted.

      The additional options for recording are displayed. Go to step 11.
    The agent is installed. Go to step 11.
  11. Select a browser from the Browser drop-down list.
    Note: If you selected the Edge or Firefox browser on a Mac system, you might see the following error: The recorder encountered a problem: No compatible WebDriver was found or the browser is already running.

    To resolve this issue, you must check whether the ~/.cache/selenium folder is password protected, and then change the access permission to make it a regular folder.

  12. Select UI from the Interactions drop-down list.
  13. Click Record.
    A new browser window is displayed and the application that you selected for recording is opened.
    Note: If you do not want to continue with the application that is open, you can type or paste the required URL to record the test. Test Hub inserts the Open step to capture the new URL that you used for recording the test.
  14. Click the UI controls and perform user actions in the application to record test steps.
    You must allow some delay of a few seconds between two user actions to ensure that the UI elements are recognized and registered properly.
  15. Close the browser to stop the recording.
    The 'The asset is now ready for your review' message is displayed in the Create Asset dialog.
  16. Click Done.
    The newly recorded 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.

Results

You have recorded a Web UI test.

What to do next

You can perform the following tasks: