Interacting with your web app in the mabl Trainer

The mabl Trainer automatically records interactions with the vast majority of elements in your web application, including elements within a shadow DOM. If you are uncertain whether you can create test steps that interact with or assert on a particular element, read on to learn more about recorded actions and supported interactions in the Trainer:

• Recorded actions
• Testable items
• Untestable items

Recorded actions

When the record button is on, the mabl Trainer automatically records your interactions with the web application and adds two default steps to the beginning of the test:

• Set viewport size to width 1000 and height 800. 
• Visit URL assigned to variable "app.url"

Recorded actions in the mabl Trainer include the following:

• Click
• Enter text
• Double click
• Right click
• Hover over
• Drag and drop
• Keypress steps
• Reload the page
• Visit URL
• Switch to a new tab
• Interacting with HTML select dropdowns
• Selecting file input for an upload

In addition to recorded actions, you can also add test steps from the Add step menu. See adding and editing steps in the mabl Trainer for more information.

Scrolling

During Trainer replay, local runs, and cloud runs, the mabl Trainer automatically scrolls to the target element as long as the element exists in the page. 

If you are comfortable with creating and maintaining JavaScript snippets, you may try this workaround from the mabl snippet repo to implement scrolling within a lazy-loaded list.

Testable items

The mabl Trainer supports the vast majority of interactions with webpage elements as long as the page itself is HTML. Supported interactions are somewhat nuanced for the following:

• Visual elements
• Context menus
• Webcam and microphone access

Visual elements

Keep in mind the following when testing visual elements in a web app:

• SVGs - the Trainer can record clicks and assertions for <svg> elements and elements within an <svg> tag. However, the Trainer cannot record clicks or assertions on specific coordinates within <path> elements.
• Canvas elements - the mabl Trainer can find <canvas> elements but is not aware of the contents of the <canvas>. When playing back click steps, the mabl Trainer can only click on the center of the <canvas> element. If you are comfortable working with JavaScript, you can create a custom JS step that clicks on a canvas element at certain coordinates using the canvasClick.js snippet

Context menus

Context menus, also known as right-click menus, appear when you right click on the page. If you're testing an application that has a custom context menu, the Trainer can record steps interacting with that context menu. 

Example of a custom context menu

The Trainer cannot capture interactions with the default context menu in your browser window because it is not part of the actual webpage.

Example of a default context menu

Webcam and microphone access

Webcam and microphone access is supported for tests running on Chrome, Edge, and Firefox. If your application includes a browser webcam or microphone APIs, the mabl Trainer supplies a default feed for testing.

Untestable items

The mabl Trainer cannot interact with most browser and system settings because they are not part of the HTML of the page, including:

• Chrome DevTools - this is a browser setting. The Trainer cannot interact with it.
• Window prompts - examples of window prompts include `window.alert()` and `window.prompt()`. See automatic popup dismissal for more information
• Basic auth popups - the Trainer cannot record steps interacting with basic auth popups, but you can configure your mabl tests to handle basic auth. Learn more here.
• Print dialogs - print dialogs are part of your system settings.
• Clipboard access - the Trainer cannot copy and paste values from the clipboard because this is a system setting. If you want to extract values from your app and use them in subsequent steps, create variables instead.
• Chrome extensions - Chrome extensions are a configuration in the browser and are not supported for testing in the mabl Trainer.

Learn more

• Adding and editing steps in the mabl Trainer
• Playing steps in the mabl Trainer
• Save conflicts