Best practices for Web App developers for UI Capture integration

The following sections provide recommended practices for Web App developers for UI Capture integration.

General

  • Use static and unique HTML IDs for all user input and interactive elements.
  • Use static and unique URL hash fragments for automatically identifying screen-view changes of a single-page workflow.

DOM Capture

  • Clearly separate the static and the dynamic content of the application into different container elements to minimize the size of diffs.
  • Use static container elements (div) with unique HTML IDs as placeholders for subsequent dynamic AJAX updates.
  • Consolidate DOM changes to minimize the number of mutation records that need processed.
  • Make DOM node insertions and removals to the innermost container elements instead of outer elements, like the document body.
  • Do not use insertRule, addRule, and deleteRule methods to dynamically alter the CSS stylesheets at run time. Instead, use CSS selectors and modify CSS class attributes to achieve the same results. Dynamic changes to CSS stylesheets that use insertRule, addRule, and deleteRule methods do not result in any DOM Mutations. Therefore, these changes cannot be tracked and captured by using DOM Capture. Applications that use these methods to dynamically alter the CSS might not replay correctly.
  • Do not inline large CSS in the HTML. It is preferable to move large CSS into external stylesheet files that can be cached by the browser.
  • Do not inline large data URIs in the HTML. It is preferable to move large data URIs into their own resource file or an external CSS file.

Privacy

  • Mark all sensitive user input fields with a static and unique HTML ID or CSS class name.

Best practices for UI Capture configuration

The following sections provide recommended practices for UI Capture configuration.

General

  • Use the development build when you perform initial integration and testing. This build makes it much easier to debug any issues.
  • Before you enable advanced features like DOM Capture, validate the basic operation of the UI Capture.
  • As a final step, enable gzip encoding and fine-tune the queue configuration.

DOM Capture

  • Identify the triggering user actions that result in significant DOM changes. Configure these specific DOM Capture triggers to minimize the number of DOM snapshots that are required.
  • Identifying elements by ID and IDType is more efficient than using CSS selectors.
  • Use delay configuration for fine tuning only. Use of delays is appropriate in a case where the DOM updates occur within 10 ms – 100 ms after the triggering action. For example, after CSS class updates or local JavaScript execution.
  • Use of delay configuration to account for asynchronous operations that have a large time band does not produce a predictable replay outcome and can cause missed snapshots. For example, any operation that involves network communication can cause these results.

Privacy

  • Identifying elements by ID and IDType is more efficient than using CSS selectors.
  • When you use regex rules or CSS selectors, be mindful of the performance impact. Always validate the rule is working as intended.


Join The Discussion

Your email address will not be published. Required fields are marked *