agents-cli-automation 1.0.21 → 1.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agents-cli-automation",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "Agents CLI",
   "type": "module",
   "bin": {

package/src/commands/init.js

@@ -33,7 +33,8 @@ export default async function initCommand() {
           "JavaScript (ES Modules)",
           "Java (Maven + JUnit)",
           "C# (NUnit + .NET)",
-          "API+DB+UI Full Stack (All-in-One Template)"
+          "API+DB+UI Full Stack (All-in-One Template)",
+          "Playwright CLI Agent (Token Efficient - CoPilot Chat)"
         ]
       }
     ]);
@@ -53,9 +54,12 @@ export default async function initCommand() {
     } else if (language.includes("C#")) {
       templateFile = "playwright-agent-csharp.md";
       templateName = "C#";
-    }else if (language.includes("API+DB+UI")) {
+    } else if (language.includes("API+DB+UI")) {
       templateFile = "playwright-agent-api-db-ui.md";
       templateName = "API+DB+UI Full Stack";
+    } else if (language.includes("Playwright CLI")) {
+      templateFile = "playwright-agent-cli.md";
+      templateName = "Playwright CLI Agent";
     }
 
     const templatePath = path.resolve(__dirname, `../templates/${templateFile}`);

package/src/templates/playwright-agent-cli.md

@@ -0,0 +1,172 @@
+name: Playwright CLI Agent - Token Efficient
+description: GitHub Copilot Chat agent using Playwright CLI for near-zero token usage. Browser work runs outside the LLM context.
+argument-hint: "(no args)"
+
+----
+
+# Playwright CLI Agent — Token Efficient with GitHub Copilot Chat
+
+## Overview
+
+This agent uses **Playwright CLI** instead of MCP to minimize token usage when working with GitHub Copilot Chat. Browser automation runs as local CLI commands, keeping the LLM context small.
+
+### Key Advantage
+
+- **Browser actions**: 0 tokens (run as CLI commands)
+- **DOM extraction**: 0 tokens (executes in browser)
+- **Total per task**: ~80–300 tokens vs. thousands with full DOM snapshots
+
+## Step-by-Step Token Usage Flow
+
+### 1️⃣ Prompt Processing (~10–30 tokens)
+```
+Copilot reads your instruction:
+"Generate JS test data for modal id='hjahdj'"
+```
+
+### 2️⃣ Agent Reasoning (~20–60 tokens)
+```
+Agent decides:
+Run "npx playwright" or "node extractModal.js"
+```
+
+### 3️⃣ Playwright CLI Executes (0 tokens)
+```
+Local shell commands run:
+- open page
+- click menu
+- open modal
+- extract fields
+```
+
+### 4️⃣ DOM Extraction in Browser (0 tokens)
+```javascript
+// Runs inside browser, not sent to LLM
+document.querySelectorAll("#hjahdj input, select, textarea")
+
+// Returns JSON:
+[
+  { "name":"username", "type":"text" },
+  { "name":"role", "type":"select" }
+]
+```
+
+### 5️⃣ JSON Result Returned (~20–100 tokens)
+```
+Agent reads result file and passes to LLM
+```
+
+### 6️⃣ Output Formatting (~30–150 tokens)
+```
+Copilot generates final answer
+```
+
+## Typical Modal with ~20 Fields
+
+| Step | Tokens |
+|------|--------|
+| Prompt understanding | 10–30 |
+| Agent reasoning | 20–60 |
+| Playwright CLI execution | 0 |
+| DOM extraction | 0 |
+| JSON returned | 20–100 |
+| Output formatting | 30–150 |
+| **Total** | **~80–300** |
+
+## Why CLI is More Token Efficient
+
+**With Playwright MCP:**
+- Full DOM snapshot sent to model
+- Accessibility tree included
+- Element metadata attached
+- Result: thousands of tokens
+
+**With CLI:**
+- LLM → run shell command
+- Browser → produce file
+- LLM → read small JSON
+- Result: tokens stay minimal
+
+## Practical Architecture
+
+```
+Copilot prompt
+      ↓
+Agent (reasons ~20–60 tokens)
+      ↓
+Run CLI script (~0 tokens)
+      ↓
+Playwright browser automation
+      ↓
+Extract modal fields / DOM data
+      ↓
+Return JSON test data (~20–100 tokens)
+      ↓
+Format final answer (~30–150 tokens)
+```
+
+## Common Commands
+
+```bash
+# Codegen: generates test code by recording actions
+npx playwright codegen https://example.com
+
+# Snapshot: captures page state
+npx playwright screenshot https://example.com
+
+# Run tests
+npx playwright test
+
+# Debug mode
+npx playwright test --debug
+```
+
+## Setup Instructions
+
+1. Install Playwright CLI:
+```bash
+npm install -D @playwright/test
+npx playwright install
+```
+
+2. Create CLI scripts for your workflows:
+```bash
+mkdir -p scripts
+touch scripts/extract-modal.js
+touch scripts/snapshot.js
+```
+
+3. In your agent prompt, reference these CLI commands:
+```
+Run "node scripts/extract-modal.js --modal-id=hjahdj" to get test data
+```
+
+4. Use CLI output (JSON files) in your test generation.
+
+## Best Practices
+
+- **Keep browser scripts minimal**: extract only needed data
+- **Return JSON**: structured output for LLM parsing
+- **Use snapshots**: instead of full DOM dumps
+- **Batch operations**: run multiple CLI commands in sequence, not parallel
+- **Cache results**: reuse JSON between agent calls
+
+## Integration with GitHub Copilot Chat
+
+```
+You: "Generate test data for the login modal"
+Agent:
+  1. Runs: npx playwright screenshot --url=... --selector=".modal"
+  2. Runs: node scripts/extract-fields.js
+  3. Returns: { "username": "string", "password": "string" }
+Copilot:
+  4. Formats final test template
+```
+
+## Performance Benefits
+
+- ✅ Instant feedback (no token wait)
+- ✅ Scales to large DOMs (no snapshot overhead)
+- ✅ Reusable CLI scripts across teams
+- ✅ Local-first (no external API calls)
+- ✅ Works offline