Web UI tests for HTML canvas applications

IBM® 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.
    Note:
    During the test recording, each alphanumeric or function key pressed within the canvas increases an internal packet counter. These packets are consolidated into single logical steps at test generation time, which is an intended behavior and not a defect.
    The following actions are not supported:
    • Drag-and-drop actions.
    • Double-click actions.
    • Selecting or manipulating specific shapes, text, or objects drawn within the canvas element.
    • Input through the keyboard shortcuts that combine modifier keys. For example, Ctrl+C.
  • 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.
  • Other limitations: Verification point creation, guided healing, and self-healing features are not supported.

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.