WebElemateSTUDIO Back to product site

First-party learning environment

Automation Practice Lab

Inspect, record, replay, and troubleshoot common browser controls on a page designed to stay predictable across product releases.

A repeatable workflow

Use the lab in four steps

  1. 1

    Inspect a labelled control and review its stable locator hints.

  2. 2

    Record a short form journey with fictional values.

  3. 3

    Test waits, scrolling, and a second browser tab.

  4. 4

    Reset the page and replay the same deterministic flow.

Form controls

Build a representative browser flow

Every control has a permanent semantic ID and a visible data-webelemate-demo hook. Required fields are marked required.

Fictional profile

Use a fictional name, such as Avery Tester.

Stable locators#practice-name[data-webelemate-demo="text-input"]

Use only the clearly fictional value DemoPass!42. The result never displays this field.

Stable locators#practice-password[data-webelemate-demo="password-input"]

Fictional notes only. Maximum 240 characters.

0 / 240

Stable locators#practice-notes[data-webelemate-demo="textarea"]

Choices and state

A native select for text, value, and index selection.

Stable locators#practice-plan[data-webelemate-demo="native-select"]

Choose a suggestion or enter another fictional value.

Stable locators#practice-city[data-webelemate-demo="datalist-input"]

Preferred demo channel

The group always has one deterministic default selection.

Stable locators#practice-contact-method#practice-channel-email[name="channel"][value="Chat"]

Native input types
5

A deterministic integer from 0 through 10.

Stable locators#practice-range[data-webelemate-demo="range-input"]

#2563eb

The selected hexadecimal value appears beside the control.

Stable locators#practice-color[data-webelemate-demo="color-input"]

The fixed default makes recorded and replayed results predictable.

Stable locators#practice-date[data-webelemate-demo="date-input"]

The lab shows the selected filename only. It never reads or uploads file contents.

No file selected

Stable locators#practice-file[data-webelemate-demo="file-input"]

Stable button locators#practice-submit#practice-reset

Local result

No result yet

Complete the required practice fields and choose Create local result. Nothing leaves this page.

Stable locators#practice-results[data-webelemate-demo="results-status"]

Browser behavior

Practice waits, tabs, and scrolling

These controls change local page state only. Their timing and destinations are fixed so the same flow can be replayed.

Wait for a delayed state

Choose the button and wait for its status to change from Waiting to Ready after exactly 1,200 milliseconds.

Idle — choose Start delayed state

Stable locators#practice-delay-button#practice-delay-status[data-state="ready"]

Open a second browser tab

The link opens this same first-party page in a new tab with a deterministic destination marker. It does not contact another site.

Open deterministic second tab

Stable locators#practice-new-tab-link[data-webelemate-demo="new-tab-link"]

Scroll to a known target

Use the link or WebElemate Studio's Scroll to view policy to reach the labelled target below.

Go to scroll target

Stable locator#practice-scroll-target[data-webelemate-demo="scroll-target"]

Deterministic destination

Scroll target reached

This landmark has a stable ID, a stable data hook, and a focus outline. It is suitable for Scroll to view, visible-state, and location checks.

Return to the top of the lab

Tab destination

Primary practice tab

Open the second-tab link above to load this landmark in another WebDriver-owned tab.

Stable locators#second-tab-destination[data-webelemate-demo="second-tab-destination"]