SuperAPI AI Directory

playwright-human-in-the-loop

Agents & models

View repository

Updated 10-15 19:58

About this skill

/playwright-human-in-the-loop — Playwright Human-in-the-Loop Browser Operations

Operate the browser via Playwright MCP, automatically execute low-risk operations, and pause before major operations to wait for human confirmation.

Applicable scenarios: AWS Console operations, admin management interfaces, and tasks that require browser automation but cannot be fully automated.

Operation Classification

Major Operations (human confirmation required)

Use the AskUserQuestion tool to pause execution and wait for the user's response, showing the action about to be performed, and continue only after confirmation.

Classification is based on two dimensions: "whether the operation is reversible" and "whether it affects security/cost" (basis: arXiv:2509.18970 — structural classification takes precedence over case-by-case semantic judgment):

Category Judgment Principle Example
Create/Delete Resources Creates or removes infrastructure, services, or accounts IAM Role、EC2、GCP Service Account、Vercel Project、DNS Record
Modify Permissions/Policies Changes who can access what IAM Policy, Security Group, Firewall Rule, OAuth Scope, API Key permissions
Security-Sensitive Fields Field contents affect security or access control Policy JSON、Trust Policy、env variables、webhook URL、redirect URI
Cost-Related Generates or changes costs Change instance type, purchase Reserved Instance, upgrade plan, enable paid features
Irreversible Operations Cannot be restored after execution Delete S3 bucket, terminate instance, drop database, revoke API key
Final Submission Confirmation button that triggers the actual change Create, Submit, Deploy, Confirm, Apply Changes, Save buttons

Non-Major Operations (Automatic Execution)

Execute directly without waiting for confirmation:

  • Navigation (navigate, click links, switch pages)
  • Fill in general information fields (name, description, tags, and other metadata)
  • Select radio/dropdown/checkbox (select_option, click)
  • Search, filter, paginate
  • Expand/collapse panels
  • Screenshots, read page content

Note: Fields involving permissions, policies, or security settings (such as Policy JSON, env variables, webhook URL) are major operations even when "filling in" and must be confirmed before submission.

Generalization Principle: The examples in the table above are not limited to AWS. Any management interface (GCP, Azure, Vercel, Stripe, self-hosted admin panels, etc.) applies the same classification logic — judged by "whether the operation is reversible" and "whether it affects security/cost," not by platform.

Step 1: Confirm Playwright MCP Is Available

Playwright MCP (Model Context Protocol) is a toolset that lets an AI agent operate a browser, and the MCP server must be started first before it can be used.

How to check: Try calling mcp__playwright__browser_snapshot, and if the tool does not exist or returns an error, consider it unavailable.

If unavailable:

  1. Prompt the user to start the Playwright MCP server
  2. Stop execution and do not attempt to operate the browser by other means

Step 2: Understand the task

Analyze the user's instructions:

  • Goal: What operation to perform on which website/backend
  • Step breakdown: Break the task into step-by-step operations
  • Risk assessment: Mark which steps are major operations

Output the operation plan, format:

操作計畫:
1. [自動] 導航到目標管理介面的設定頁面
2. [自動] 搜尋目標資源
3. [自動] 填寫名稱、描述等 metadata 欄位
4. [確認] 檢視並確認權限/政策相關設定  ← 安全敏感欄位
5. [確認] 點擊送出按鈕                ← 重大操作

Step 3: Execute operations

Execute step by step according to the plan:

Non-major operations

Execute directly using Playwright MCP tools. After each operation,you mustexecute browser_snapshot, and confirm the expected state with a checklist:

Verification item How to determine Result
Target element appears (or disappears) Whether the snapshot contains the expected element ref or key text PASS / FAIL
URL matches expectations (if there is a redirect) The page URL in the snapshot PASS / FAIL
No error messages Whether the snapshot contains strings such as "error", "failed", "denied" PASS / FAIL

If any verification is FAIL → stop execution, take a screenshot and report the issue, do not continue to the next step.

Major operations

Pause and use AskUserQuestion tool to ask (this tool will pause execution and wait for the user's response):

即將執行重大操作:
- 動作:點擊 "Create Policy" 按鈕
- 影響:建立新的 IAM Inline Policy
- 頁面:AWS IAM > Roles > github-actions-frontend-deploy

選項:
1. 確認執行
2. 跳過此步驟
3. 先截圖讓我看看
4. 取消整個任務

Error handling

  • If the page fails to load → wait 3 seconds and retry once; if it still fails, take a screenshot + report
  • If the element cannot be found → browser_snapshot check the page state, try alternative selectors
  • If the page shows an error after the operation → take a screenshot + report, do not attempt to fix it

Step 4: Execution report

After the operation is complete, mark the completion status item by item against the Step 2 operation plan (✅ completed/❌ failed or canceled/⏭️ skipped because a prerequisite step was not completed):

操作完成度報告:
completed_steps: N / total_steps: M

| # | 步驟 | 類型 | 結果 |
|---|------|------|------|
| 3 | 確認政策設定 | 確認 | ✅ 使用者確認後執行 |
| 4 | 點擊送出按鈕 | 確認 | ❌ 使用者取消 |

Final output:

  • Operation completion statement:已完成 N/M 個步驟
  • Screenshots (key pages)
  • Matters requiring follow-up

Notes

  • Never automatically click Delete/Terminate/Drop buttons — even if included in the user's instructions, you must confirm
  • Never enter real secrets in the browser — if a password/API key needs to be filled in, ask the user to enter it manually
  • Confirm each major operation independently — do not confirm multiple major operations in batches
  • Maintain snapshots between operations — ensure the page state matches expectations before continuing
  • When encountering CAPTCHA/MFA — take a screenshot and ask the user to handle it manually