### Action Log Parameter Echo Example

Source: https://github.com/microsoft/webwright/blob/main/skills/webwright/reference/cli_tool_mode.md

Example format for the initial line in final_script_log.txt, echoing resolved arguments.

```text
step 0 params: arg_a=<value> arg_b=<value> arg_c=<value>
```

--------------------------------

### Python argparse CLI Setup

Source: https://github.com/microsoft/webwright/blob/main/skills/webwright/reference/cli_tool_mode.md

Example of setting up an argparse CLI in final_script.py to handle function arguments.

```python
if __name__ == "__main__":
    import argparse
    parser = argparse.ArgumentParser(
        description=search_<domain>.__doc__.splitlines()[0])
    parser.add_argument("--arg-a", dest="arg_a", type=str,
                        default="<value>",
                        help="<copied from docstring>")
    parser.add_argument("--arg-b", dest="arg_b", type=int,
                        default=<value>,
                        help="<copied from docstring>")
    parser.add_argument("--arg-c", dest="arg_c", type=str,
                        default="<value>",
                        help="<copied from docstring>")
    args = parser.parse_args()
    result = asyncio.run(_run(**vars(args)))
    print(result)
```

--------------------------------

### OpenClaw - Install from Local Checkout

Source: https://github.com/microsoft/webwright/blob/main/README.md

Instructions to install the Webwright plugin from a local checkout using the openclaw CLI.

```bash
openclaw plugins install /absolute/path/to/Webwright
openclaw gateway restart   # reload so the plugin and skill are picked up
```

--------------------------------

### OpenAI Codex - Install from Marketplace

Source: https://github.com/microsoft/webwright/blob/main/README.md

Instructions to add the Webwright repository to the Codex plugin marketplace and install Webwright.

```bash
# 1. Add this repo as a Codex plugin marketplace
codex plugin marketplace add microsoft/Webwright

# 2. Open the plugin browser and install Webwright
codex
/plugins
```

--------------------------------

### Plan Markdown Structure

Source: https://github.com/microsoft/webwright/blob/main/skills/webwright/reference/workflow.md

Example structure for plan.md, outlining the task and critical points.

```markdown
# Task
<verbatim task description>

# Critical Points
- [ ] CP1: <constraint / filter / sort / selection / required datum>
- [ ] CP2: ...
```

--------------------------------

### Task Showcase Flask App

Source: https://github.com/microsoft/webwright/blob/main/README.md

Installs Flask and runs the Task Showcase dashboard locally.

```bash
pip install flask
python assets/task_showcase/app.py    # http://127.0.0.1:5005
```

--------------------------------

### Claude Code - Install from Marketplace

Source: https://github.com/microsoft/webwright/blob/main/README.md

Instructions to add the Webwright repository to the Claude Code plugin marketplace and then install the Webwright plugin.

```text
# 1. Add this repo as a Claude Code plugin marketplace
/plugin marketplace add microsoft/Webwright

# 2. Install the plugin from that marketplace
/plugin install webwright@webwright
```

--------------------------------

### Claude Code - Reusable CLI Example

Source: https://github.com/microsoft/webwright/blob/main/README.md

Example of how to run the generated reusable CLI tool with different arguments.

```bash
python final_script.py --origin JFK --destination LAX --depart-date 2026-07-01
```

--------------------------------

### Run the Flask App

Source: https://github.com/microsoft/webwright/blob/main/assets/task_showcase/README.md

Install Flask and run the app.py script to serve the dashboard locally.

```bash
pip install flask
python app.py            # serves http://127.0.0.1:5005
```

--------------------------------

### OpenClaw - Verify Installation

Source: https://github.com/microsoft/webwright/blob/main/README.md

Commands to verify that the Webwright plugin and skill are installed and ready.

```bash
openclaw plugins list | grep webwright
openclaw skills  list | grep webwright   # should show "✓ ready"
```

--------------------------------

### WebWright Installation

Source: https://github.com/microsoft/webwright/blob/main/README.md

Installs the WebWright package and downloads the Chromium browser via Playwright.

```bash
pip install -e .
playwright install chromium
```

--------------------------------

### WebWright Quick Start Run

Source: https://github.com/microsoft/webwright/blob/main/README.md

Executes a sample flight search task using WebWright with OpenAI backend.

```bash
python -m webwright.run.cli \
    -c base.yaml -c model_openai.yaml \
    -t "Search for flights from SEA to JFK on 2026-08-15 to 2026-08-20" \
    --start-url https://www.google.com/flights \
    --task-id demo_openai \
    -o outputs/default
```

--------------------------------

### Claude Code - Install from Local Checkout

Source: https://github.com/microsoft/webwright/blob/main/README.md

Instructions to add a local Webwright repository to the Claude Code plugin marketplace and then install the Webwright plugin.

```text
/plugin marketplace add /absolute/path/to/Webwright
/plugin install webwright@webwright
```

--------------------------------

### Prerequisites (one-time)

Source: https://github.com/microsoft/webwright/blob/main/skills/webwright/SKILL.md

Install Firefox for Playwright.

```bash
playwright install firefox
```

--------------------------------

### plan.md Parameters Table

Source: https://github.com/microsoft/webwright/blob/main/skills/webwright/reference/cli_tool_mode.md

Example structure for the '# Parameters' section in plan.md, defining arguments for a CLI tool.

```markdown
# Task
<verbatim task description>

# Parameters
| name    | type | source phrase from task | default     | allowed / format        |
|---------|------|-------------------------|-------------|-------------------------|
| <arg_a> | str  | "..."                   | "<value>"   | <format / allowed set>  |
| <arg_b> | int  | "..."                   | <value>     | <range or units>        |
| <arg_c> | str  | "..."                   | "<value>"   | <format>                |

# Critical Points
- [ ] CP1: ...
- [ ] CP2: ...
```

--------------------------------

### OpenAI Codex - Install from Local Checkout

Source: https://github.com/microsoft/webwright/blob/main/README.md

Instructions to add a local Webwright repository to the Codex plugin marketplace.

```bash
codex plugin marketplace add /absolute/path/to/Webwright
```

--------------------------------

### OpenClaw - Use Slash Command

Source: https://github.com/microsoft/webwright/blob/main/README.md

Example of invoking the Webwright skill using a slash command.

```bash
/webwright run <task>
```

--------------------------------

### Browser launch skeleton (local mode)

Source: https://github.com/microsoft/webwright/blob/main/skills/webwright/reference/playwright_patterns.md

Launches Playwright Firefox in local mode, navigates to a start URL, takes a screenshot, and prints the URL, title, and ARIA snapshot of the body.

```bash
python - <<'PY'
import asyncio
import os
from pathlib import Path

from playwright.async_api import async_playwright

WORKSPACE = Path(os.environ.get("WORKSPACE_DIR", "."))
SCREENSHOTS = WORKSPACE / "screenshots"
SCREENSHOTS.mkdir(parents=True, exist_ok=True)

async def main():
    async with async_playwright() as playwright:
        browser = await playwright.firefox.launch(headless=True)
        context = await browser.new_context(viewport={"width": 1280, "height": 1800})
        page = await context.new_page()

        await page.goto("<START_URL>", wait_until="domcontentloaded")
        await page.screenshot(path=str(SCREENSHOTS / "explore_1_start.png"))

        print("URL:", page.url)
        print("TITLE:", await page.title())

        # Inspect the region you care about with an ARIA snapshot
        snapshot = await page.locator("body").aria_snapshot()
        print("ARIA:", snapshot)

        await browser.close()

asyncio.run(main())
PY

```

--------------------------------

### Final-script instrumentation example

Source: https://github.com/microsoft/webwright/blob/main/skills/webwright/reference/playwright_patterns.md

Python script demonstrating how to instrument a final script for logging, screenshots, and capturing final data.

```python
import asyncio, os
from pathlib import Path
from playwright.async_api import async_playwright

RUN_DIR = Path(__file__).parent
SCREENSHOTS = RUN_DIR / "screenshots"
SCREENSHOTS.mkdir(parents=True, exist_ok=True)
LOG = RUN_DIR / "final_script_log.txt"
LOG.write_text("")  # reset

def log(step: int, msg: str) -> None:
    line = f"step {step} action: {msg}\n"
    LOG.open("a").write(line)
    print(line, end="")

async def main():
    async with async_playwright() as playwright:
        browser = await playwright.firefox.launch(headless=True)
        context = await browser.new_context(viewport={"width": 1280, "height": 1800})
        page = await context.new_page()

        await page.goto("<START_URL>", wait_until="domcontentloaded")
        await page.screenshot(path=str(SCREENSHOTS / "final_execution_1_open_start_page.png"))
        log(1, "open start page")

        # ... apply CP1, screenshot, log ...
        # ... apply CP2, screenshot, log ...

        # End of run: capture the final datum visibly and in the log
        final_value = "<extracted price / code / winner>"
        with LOG.open("a") as f:
            f.write(f"\nFINAL_RESPONSE: {final_value}\n")

        await browser.close()

asyncio.run(main())
```

--------------------------------

### Claude Code - Use /webwright:run

Source: https://github.com/microsoft/webwright/blob/main/README.md

Example of using the /webwright:run command for a one-shot task.

```bash
/webwright:run search Google Flights for flights from SEA to JFK on 2026-08-15 to 2026-08-20
```

--------------------------------

### Plan - Critical Points Markdown

Source: https://github.com/microsoft/webwright/blob/main/skills/webwright/SKILL.md

Example of how to structure the critical points in the plan.md file.

```markdown
# Critical Points
- [ ] CP1: <description>
- [ ] CP2: <description>
```

--------------------------------

### OpenAI Codex - Use @webwright

Source: https://github.com/microsoft/webwright/blob/main/README.md

Example of invoking the Webwright skill with the @webwright prefix in a Codex thread.

```bash
@webwright search Google Flights for flights from SEA to JFK on 2026-08-15 to 2026-08-20
```

--------------------------------

### Serve Tasks from a Specific Directory

Source: https://github.com/microsoft/webwright/blob/main/assets/task_showcase/README.md

Point the app to a different tasks directory, for example, to render JSON from a Webwright run.

```bash
python app.py --tasks-dir ../../outputs/default/<run>/task_showcase/tasks
```

--------------------------------

### Hermes Agent - Install via Symlink

Source: https://github.com/microsoft/webwright/blob/main/README.md

Instructions to symlink the Webwright skills directory into the Hermes user-skills directory.

```bash
mkdir -p ~/.hermes/skills
ln -sfn /absolute/path/to/Webwright/skills/webwright ~/.hermes/skills/webwright
```

--------------------------------

### Claude Code - Use /webwright:craft

Source: https://github.com/microsoft/webwright/blob/main/README.md

Example of using the /webwright:craft command to create a reusable CLI tool.

```bash
/webwright:craft search a ticket on Google Flights from LAX to SFO depart June 7 return June 14
```

--------------------------------

### Print --help

Source: https://github.com/microsoft/webwright/blob/main/skills/webwright/reference/cli_tool_mode.md

Command to display the help message for the script.

```bash
python final_runs/run_<id>/final_script.py --help
```

--------------------------------

### Reproduce the task with no arguments

Source: https://github.com/microsoft/webwright/blob/main/skills/webwright/reference/cli_tool_mode.md

Command to run the script with no arguments in a fresh directory.

```bash
cd final_runs/run_<id> && python final_script.py
```

--------------------------------

### CSS for Details/Summary Element

Source: https://github.com/microsoft/webwright/blob/main/assets/task_showcase/templates/task.html

Customizes the appearance and behavior of the details/summary element for interactive sections.

```css
details > summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 12px;
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details[open] > summary::after {
  content: " ▾";
}
details:not([open]) > summary::after {
  content: " ▸";
}
```

--------------------------------

### Task Showcase Template

Source: https://github.com/microsoft/webwright/blob/main/assets/task_showcase/templates/dashboard.html

This is the HTML template for the task showcase dashboard, using Jinja for dynamic content rendering.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Repeatable Task Showcase</title>
  <style>
    :root {
      --bg: #f3f5f8;
      --panel: #ffffff;
      --text: #0f172a;
      --muted: #64748b;
      --line: #e5e7eb;
      --accent: #0e7490;
      --good: #047857;
      --good-bg: #ecfdf5;
      --warn: #b45309;
      --warn-bg: #fef3c7;
      --bad: #b91c1c;
      --bad-bg: #fef2f2;
    }
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.5;
    }
    a {
      color: var(--accent);
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    main {
      max-width: 1180px;
      margin: 0 auto;
      padding: 28px 28px 64px;
    }
    .eyebrow {
      color: var(--accent);
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    h1 {
      margin: 0;
      font-size: 36px;
      font-weight: 700;
      line-height: 1.15;
    }
    .subtitle {
      color: var(--muted);
      font-size: 14px;
      margin: 6px 0 22px;
    }
    .grid {
      display: grid;
      gap: 14px;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
    .card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      text-decoration: none;
      color: var(--text);
      transition: border-color .12s, transform .12s, box-shadow .12s;
    }
    .card:hover {
      border-color: var(--accent);
      transform: translateY(-1px);
      text-decoration: none;
      box-shadow: 0 6px 18px rgba(15,23,42,.06);
    }
    .card .topline {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      color: var(--muted);
    }
    .card .topline .src-tag {
      font-weight: 600;
      color: var(--text);
      font-size: 12px;
    }
    .pill {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      background: #e2e8f0;
      color: #1e293b;
    }
    .pill.ok {
      background: var(--good-bg);
      color: var(--good);
    }
    .pill.warn {
      background: var(--warn-bg);
      color: var(--warn);
    }
    .pill.error {
      background: var(--bad-bg);
      color: var(--bad);
    }
    .card h2 {
      margin: 4px 0 0;
      font-size: 16px;
      line-height: 1.3;
    }
    .card .summary {
      color: #334155;
      font-size: 13px;
      flex: 1;
      min-height: 60px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
    }
    .meta {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      font-size: 11.5px;
      color: var(--muted);
      border-top: 1px solid var(--line);
      padding-top: 8px;
    }
    .meta .k {
      color: var(--accent);
      font-weight: 600;
      margin-right: 3px;
    }
    .score {
      color: var(--good);
      font-weight: 700;
    }
  </style>
</head>
<body>
  <main>
    <div class="eyebrow">Local Web-Agent Showcase · {{ tasks|length }} repeatable tasks</div>
    <h1>Task Dashboard</h1>
    <p class="subtitle">Six perfect-score odyssey runs whose underlying data refreshes on a schedule. Open any card to see the agent's findings, sources, critical points, and screenshots from the run.</p>
    <div class="grid">
      {% for t in tasks %}
        <a href="{{ url_for('task_view', short_id=t.short_id) }}" class="card">
          <div class="topline">
            <div>
              <span class="pill {{ t.status }}">{{ t.theme }}</span>
              <span class="pill">{{ t.cadence }}</span>
            </div>
            <span class="src-tag">{{ t.source }}</span>
          </div>
          <h2>{{ t.title }}</h2>
          <div class="summary">
            {{ t.task_prompt[:240] }}{% if t.task_prompt|length > 240 %}…{% endif %}
          </div>
          <div class="meta">
            <div><span class="k">Score:</span> <span class="score">{{ t.score }}</span></div>
            <div><span class="k">Runs:</span> {{ t.runs }}</div>
            <div><span class="k">Last run:</span> {{ t.last_run }}</div>
          </div>
        </a>
      {% endfor %}
    </div>
  </main>
</body>
</html>
```

--------------------------------

### Running WebWright with Task Showcase Overlay

Source: https://github.com/microsoft/webwright/blob/main/README.md

Executes a WebWright run with the Task Showcase overlay enabled, generating task JSON files.

```bash
python -m webwright.run.cli \
    -c base.yaml -c model_openai.yaml -c task_showcase.yaml \
    -t "<repeatable web task>" \
    --task-id my_repeatable_task \
    -o outputs/default
```

--------------------------------

### Task File Structure

Source: https://github.com/microsoft/webwright/blob/main/assets/task_showcase/README.md

Each task consists of a task.json for metadata and a report.json for structured agent output.

```bash
tasks/<short_id>/
  task.json     – metadata (title, theme, cadence, level, prompt, website)
  report.json   – curated, structured agent output: {sources, result.sections}
```

--------------------------------

### Prefer interactive form filling over deep-link URLs

Source: https://github.com/microsoft/webwright/blob/main/skills/webwright/reference/playwright_patterns.md

Illustrates a strategy for interactively filling form fields, reading the form state, and falling back to interactive filling when necessary.

```python
# After navigating, read the visible form state and decide.
form_state = await page.locator("input[aria-label]").evaluate_all(
    "els => els.map(e => ({label: e.getAttribute('aria-label'), \
    "value": e.value, "hidden": e.offsetParent === null}))"
)
if not form_is_fully_populated(form_state, expected):
    # Type into each field, pick from the suggestion list, fill grouped
    # inputs via their shared modal (Tab between siblings to keep one
    # modal open), then click the submit control.
    await fill_form_interactively(page, expected)

```

--------------------------------

### Targeting elements with role + name

Source: https://github.com/microsoft/webwright/blob/main/skills/webwright/reference/playwright_patterns.md

Demonstrates how to target elements using their role and name, including clicking a button, inspecting its parent, and checking a checkbox.

```python
await page.get_by_role("button", name="Filters").click()
await asyncio.sleep(1)

# Snapshot the *parent* of the control to see siblings/options
panel = page.get_by_role("button", name="Filters").first.locator("..")
print(await panel.aria_snapshot())

await page.get_by_role("checkbox", name="BMW").check()
await asyncio.sleep(1)

```

--------------------------------

### Inspection commands

Source: https://github.com/microsoft/webwright/blob/main/skills/webwright/reference/playwright_patterns.md

Bash commands for inspecting the latest run's files and logs.

```bash
# Latest run tree + log
ls -R final_runs/run_<id>
cat final_runs/run_<id>/final_script_log.txt

# Quick file read
sed -n '1,220p' final_runs/run_<id>/final_script.py
```

--------------------------------

### Rendering Generated Task Files

Source: https://github.com/microsoft/webwright/blob/main/README.md

Renders task JSON files generated by WebWright directly from the output directory.

```bash
python assets/task_showcase/app.py \
    --tasks-dir outputs/default/<run>/task_showcase/tasks
```

--------------------------------

### Import-safety smoke test

Source: https://github.com/microsoft/webwright/blob/main/skills/webwright/reference/cli_tool_mode.md

Command to perform an import-safety smoke test on the script.

```python
python -c "import importlib.util, pathlib; \
  spec = importlib.util.spec_from_file_location('fs', 'final_runs/run_<id>/final_script.py'); \
  m = importlib.util.module_from_spec(spec); spec.loader.exec_module(m); \
  print([n for n in dir(m) if not n.startswith('_')])"
```

--------------------------------

### Python Function and Docstring Shape

Source: https://github.com/microsoft/webwright/blob/main/skills/webwright/reference/cli_tool_mode.md

Required shape for a reusable function in final_script.py, including a Google-style docstring.

```python
def search_<domain>(arg_a: str, arg_b: int, arg_c: str) -> dict:
    """<One-line summary of what this tool does on the target site>.

    Args:
        arg_a: <what it represents>; <format / allowed values>.
            Default: "<value>".
        arg_b: <what it represents>; <range / units>.
            Default: <value>.
        arg_c: <what it represents>; <format>.
            Default: "<value>".

    Returns:
        dict with keys ``<key1>`` (<type>), ``<key2>`` (<type>),
    """
```

--------------------------------

### BibTeX Citation

Source: https://github.com/microsoft/webwright/blob/main/README.md

Citation information for using Webwright in research.

```bibtex
@misc{webwright2026,
  title        = {Webwright: A terminal is all you need for web agents},
  author       = {Lu, Yadong and Xu, Lingrui and Huang, Chao and Awadallah, Ahmed},
  year         = {2026},
  howpublished = {\url{https://github.com/microsoft/Webwright}},
  note         = {GitHub repository}
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.