Agent skill
automating-browser
Provides Playwright-based browser automation and E2E testing. Supports screenshots, web scraping, and form automation. Use for "브라우저", "스크린샷", "E2E 테스트", "웹 스크래핑" requests.
Install this agent skill to your Project
npx add-skill https://github.com/jiunbae/agent-skills/tree/main/development/playwright
SKILL.md
Playwright Browser Automation
E2E testing, screenshots, and web scraping.
Quick Start
# Install
npm init playwright@latest
# Run tests
npx playwright test
# Debug mode
npx playwright test --debug
Common Patterns
Screenshot
const { chromium } = require('playwright');
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'screenshot.png', fullPage: true });
await browser.close();
Fill Form
await page.fill('#email', 'user@example.com');
await page.fill('#password', 'secret');
await page.click('button[type="submit"]');
await page.waitForNavigation();
Wait Strategies
// Wait for element
await page.waitForSelector('.result');
// Wait for network idle
await page.waitForLoadState('networkidle');
// Wait for specific response
await page.waitForResponse(resp => resp.url().includes('/api'));
Extract Data
const items = await page.$$eval('.item', els =>
els.map(el => ({
title: el.querySelector('.title').textContent,
price: el.querySelector('.price').textContent,
}))
);
Selectors
| Type | Example |
|---|---|
| CSS | page.click('.btn') |
| Text | page.click('text=Submit') |
| Role | page.click('role=button[name="Submit"]') |
| XPath | page.click('//button') |
Best Practices
- Use
data-testidattributes for stable selectors - Always close browser in finally block
- Use
waitFor*instead of arbitrary delays - Run headless in CI, headed for debugging
See references/selector-guide.md for advanced selectors.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
jiunbae/agent-skills
implementing-in-background
Orchestrates multiple AI agents (Claude, Codex, Gemini) for parallel implementation in the background. Separates independent tasks from planning docs, each agent writes code directly. Context-safe with auto-save. Use for "백그라운드 구현", "bg impl", "병렬 구현", "Codex로 구현", "구현해줘", "코드 작성해줘" requests.
jiunbae/agent-skills
review-fix-loop
Autonomous review-fix cycle that continuously reviews code using background-reviewer, fixes issues, and repeats until all findings are resolved. Use for "리뷰 루프", "자동 개선", "review fix loop", "리뷰 반복", "코드 개선 루프", "keep reviewing" requests.
jiunbae/agent-skills
planning-in-background
Orchestrates multiple AI agents (Claude, Codex, Gemini) for parallel planning in the background with auto-save. Agents continue running even when session hits context limits. Use for "백그라운드 기획", "bg plan", "병렬 기획", "멀티 AI 기획", "기획해줘", "N명이 기획", "계획", "플래닝", "plan", "설계" requests.
jiunbae/agent-skills
background-reviewer
Orchestrates multi-LLM parallel code review using Claude, Codex, and Gemini. Each agent reviews from a different perspective using agent personas (security, architecture, code quality, performance). Supports persona-based review via `agt persona review`. Use for "코드 리뷰", "리뷰해줘", "bg review", "멀티 리뷰", "background review", "페르소나 리뷰" requests.
jiunbae/agent-skills
managing-context
Discovers and loads relevant project context from markdown documentation before each task. Matches context documents based on keywords, file paths, and task types. Use at task start to access project plans, architecture, and implementation status.
jiunbae/agent-skills
indexing-static-context
Provides an index of global static context files in ~/.agents/. Returns appropriate static file paths for natural language queries like "내 정보", "보안 규칙". Use when other skills or agents need to locate reference information.
Didn't find tool you were looking for?