Repository navigation
DOM and Automation
Allislet v1.0.0-alpha includes a substantial DOM automation layer that makes it useful not just as an overlay framework, but as an active browser inspection and interaction system.
The DOM subsystem is designed to perform a few core tasks reliably:
- observe structural changes in the host page
- locate specific DOM nodes by semantics or text
- highlight previously selected elements
- record user interactions for replay
- fill and automate form flows
- render UI into arbitrary host nodes
DOMObserver wraps MutationObserver and gives the runtime a structured, reusable way to watch DOM changes.
This enables the app to monitor:
- element insertion and removal
- attribute changes
- text changes
- subtree mutations
- dynamic page updates
This is useful for automation scripts, page analysis, and runtime overlays that need to react to page changes.
DOMFinder provides search mechanisms that can resolve nodes through XPath or text matching patterns.
Typical usage includes:
- locate login inputs by field text
- find buttons by visible label
- select target nodes in dynamic forms
- resolve repeated UI patterns across markup variants
This allows a feature-rich runtime to operate even when DOM structure is noisy or system-generated.
ElementPicker provides cursor-based target selection. A user can inspect an element in the host page and the SDK can convert it into a structured target object or runtime handle.
This is useful for:
- interactive inspection
- UI targeting
- click automation
- DOM debugging
Highlighter overlays visual highlights around target elements without corrupting the host page or altering its layout drastically.
This is a classic debugging aid because it allows users to see exactly which elements are being tracked, selected, or manipulated.
FormAutofill automates common form population workflows. This is particularly useful for repeated testing and scenario-driven interaction.
Common patterns include:
- pre-filling known form fields
- applying test values
- scraping fields in sequence
- building guided user flows
MacroRecorder is one of the most practical automation systems in the SDK. It records user activity such as:
- mouse clicks
- keyboard input
- scroll events
- interaction sequences
- field edits
Once a pattern is captured, it can be replayed to reproduce a flow or simulate standard user behavior.
Use cases include:
- repeated browser task automation
- QA test creation
- onboarding demonstration flows
- automation of routine workflows
The teleport abstraction allows the app to render UI or overlays into arbitrary host nodes in a portal-like style. This is useful when the SDK needs to inject content into a host component tree while preserving its own overlay runtime.
This makes the SDK highly flexible because the runtime does not need to be limited to one fixed app shell for all UI.
Because the SDK mounts inside a closed Shadow Root, DOM automation and UI injection are kept isolated from the host page. This prevents many UI collisions while allowing the app to still interact with the target page structure.
The combination of:
- ShadowMount
- DOMObserver
- DOMFinder
- teleport
- Highlighter
creates a safe and capable inspection surface for the host page.
This layer gives the SDK the following capabilities:
- target selection
- DOM inspection
- interaction recording and replay
- structured input automation
- isolated rendering into host nodes
- page-aware debugging with minimal visual impact
Use DOM and automation features when you want to:
- inspect or debug web pages live
- emulate user interactions
- build recorder-driven workflows
- automate repetitive browser tasks
- test page interaction logic without affecting the host app structure
The DOM and automation layer is what turns Allislet from a purely visual shell into a practical browser automation and inspection framework. It gives the project the ability to observe, target, highlight, record, and automate the host page with a controlled and isolated overlay system.