Web Command
Execute and record standalone browser automation scripts extracted from Markdown.
slides-tape web demo.md -o tour.mp4 -r 1280x720
CLI Options
| Option | Description | Default |
|---|---|---|
-o, --output <path> | Encode directly to MP4 | - |
-r, --resolution <WxH> | Resolution for video | 1920x1080 |
-f, --fps <fps> | Framerate for video | 30 |
Web Directives (v2.0)
This guide covers all directives available in the web run engine.
1. Navigation & Synchronization
These directives control browser movement and pauses.
| Directive | Syntax | Description |
|---|---|---|
@goto | @goto [url] | Navigates to a URL. Automatically waits for domcontentloaded. |
@wait | @wait [time] | Pauses execution. Supports s, ms, or raw numbers (default ms). |
@waitUntilIdle | @waitUntilIdle | New! Waits until all background network activity (scripts, images) has ceased for 500ms. |
2. Natural Language Interaction
Targets elements based on what the user sees.
| Directive | Syntax | Description |
|---|---|---|
@clickText | @clickText "text" | Finds and clicks the first element containing the specified text. Case-sensitive. |
@scrollToText | @scrollToText "text" | Scrolls the page until the specified text is centered in the viewport. |
@clickLabel | @clickLabel "text" | Finds a form field by its associated <label> text and clicks it. |
3. Structural & Nested Locators
Perfect for targeting elements within specific containers.
| Directive | Syntax | Description |
|---|---|---|
@scrollToFirst | @scrollToFirst [P] [C] | Finds the parent container and scrolls to its first encountered child. |
@clickFirst | @clickFirst [P] [C] | Identifies a container and clicks the first child element matching the selector. |
@clickTestId | @clickTestId "id" | Shorthand for targeting the data-testid attribute. |
4. Standard Selectors (CSS)
Classic directives that accept any standard CSS selector.
| Directive | Syntax | Description |
|---|---|---|
@click | @click [selector] | Clicks an element. Automatically scrolls it into view first. |
@type | @type [Sel] "[text]" | Types text into a field. New: Includes randomized “human” jitter (30ms-70ms per key). |
@scroll | @scroll [selector] | Manual scroll-to-element. |
@focus | @focus [selector] | Sets browser focus on an element. |
@highlight | @highlight [Sel] | Draws a temporary orange outline around an element for 2 seconds. |
@press | @press [Key] | Simulates a single keyboard press (e.g., Enter, Tab). |
5. Viewport Control
| Directive | Syntax | Description |
|---|---|---|
@viewport | @viewport [W] [H] | Resizes the browser window (e.g., @viewport 1920 1080). |
[!TIP] Quote Support: Any directive that takes a text string now supports quotes. Example:
@clickText "Add to cart"
[!IMPORTANT] Case Sensitivity: Directives are case-insensitive!
@CLICKTEXTand@clicktextare both valid.