Web Automation Guide

slides-tape features a natively bridged Playwright engine capable of projecting complex web UI interactions directly onto your presentation or video export.

1. Defining a Web Payload

Flag your markdown execution block with the web identifier:

```web run
# 1. Boot up the local dev server
# @goto http://localhost:4200/login
# @waitUntilIdle

# 2. Emulate the user dropping their credentials
# @type input[name="email"] "admin@studio.co.ke"
# @type input[name="pwd"] "password"
# @press Enter

# 3. Wait for the dashboard to settle
# @waitUntilIdle

# 4. Highlight the welcome message
# @highlight h1.welcome-text
# @wait 1s

# 5. Fire raw sandboxed Javascript to trigger a complex UI alert visually
document.querySelector('body').style.backgroundColor = 'red';
alert("System Compromised!");
# @wait 1s
```

2. Available Directives

Directives are simplified abstractions that lower the boilerplate overhead for orchestrating browser interactions.

3. Custom Slide Durations

You can override the global auto-advancement duration on a per-slide basis using an HTML comment immediately below the --- page break. This is useful for long web interactions.

---
<!-- duration: 15s -->
# Dashboard Demo

> [!NOTE]
> For a full list of all syntax and examples, see the [Web Command Reference](/docs/01-cli-reference/02-web).

4. CSS Selectors

Since the engine uses Chromium, all modern CSS selectors are supported, including attribute queries, relational depth, and pseudo-selectors like :last-child.

```web run
# @click button[title="Edit"]:not([disabled])
# @type input[name="email"] "admin@example.com"
```

5. Javascript Sandbox

Complex logic can be executed via page.evaluate(). Any line not starting with # @ is treated as raw Javascript.

```web run
# @goto http://localhost:3000
document.title = 'Injected via slides-tape!';
```

6. v2.0 Improvements

Human-Like Speed

The engine now adds a small “human jitter” (30ms - 70ms) between keystrokes in @type and automatically scrolls every element into the center of the viewport before clicking.

Smart Synchronization

Instead of manual @wait calls, use @waitUntilIdle. It intelligently waits for the network to settle, ensuring your recording only proceeds when the page is ready.

Case-Insensitivity

Directives are now case-insensitive. # @clicktext works exactly the same as # @clickText.