Web UI tests for HTML canvas applications

HCL DevOps Test UI (Test UI) supports the recording and playback of user interactions on HTML canvas elements to enable automated testing of dynamically rendered web applications.

You can record and play back fundamental inputs, such as click actions and text entry actions, on HTML canvas elements. This capability supports complex web applications that dynamically render content, such as mainframe terminals, directly onto a canvas display.

The testing framework overwrites internal JavaScript APIs to capture interactions instead of relying on static screen coordinates. During recording, Test UI performs the interactions against the HTML <body> tag. The native JavaScript code of the application then passes those interactions to the canvas element.

Behavior and limitations

Before you test applications that use the HTML canvas, you must consider the following behaviors and limitations:

  • Input limitations: Support is limited to fundamental text and click inputs. Graphical interactions, such as recording actions against specific images rendered within the canvas, are not supported.
  • Visual highlighting:Though the test run is independent of coordinates, the visual highlighting in the editor and Smartshot reports uses pixel-specific coordinates. Because of this dependency, visual highlighting is sensitive to changes in screen resolution or window size. Test UI highlights the location of text entry with a circle.
  • Synchronization requirements: Canvas applications might require significant time to render content. Playback fails if the script attempts to interact with the canvas before the rendering completes. You must consider adding delays in the test script to accommodate the delays in rendering.
  • Verification points: You can create verification points against the properties of the canvas element, similar to standard UI controls. Test UI records actions on the <body> tag. Therefore, only <body> tag properties, such as ID, title, and tag name, are available for validation. These properties do not contain the internal textual content displayed inside the canvas.

Test playback results

After you play back a test, you can view the test run details in the unified report. The unified report provides a consolidated view of the Web UI test results, including the Smartshots captured during the test run. For HTML canvas elements, the Smartshots display coordinate-based visual highlighting, such as circled areas indicating where text was entered, which helps you verify the recorded interactions. See Unified reports for Web UI, mobile, and Windows tests.