moai-playwright-webapp-testing
について
このClaude Skillは、Playwrightを使用したAI駆動のWebアプリケーションテストを統括し、Context7と連携してインテリジェントなテスト生成を実現します。エンタープライズ向けWebアプリケーションにおいて、ビジュアルリグレッションテスト、クロスブラウザ連携、自動化されたQAワークフローを可能にします。AI主導のテスト作成と検証による包括的なモダンWebアプリケーションテストの自動化が必要な場合にご利用ください。
クイックインストール
Claude Code
推奨/plugin add https://github.com/modu-ai/moai-adkgit clone https://github.com/modu-ai/moai-adk.git ~/.claude/skills/moai-playwright-webapp-testingこのコマンドをClaude Codeにコピー&ペーストしてスキルをインストールします
ドキュメント
AI-Powered Enterprise Web Application Testing Skill v4.0.0
Skill Metadata
| Field | Value |
|---|---|
| Skill Name | moai-playwright-webapp-testing |
| Version | 4.0.0 Enterprise (2025-11-11) |
| Tier | Essential AI-Powered Testing |
| AI Integration | ✅ Context7 MCP, AI Test Generation, Visual Regression |
| Auto-load | On demand for intelligent test triage and automated QA |
| Languages | Python, TypeScript, JavaScript + Web Frameworks |
🚀 Revolutionary AI Testing Capabilities
AI-Powered Test Generation with Context7
- 🧠 Intelligent Test Pattern Recognition with ML-based classification
- 🎯 AI-Enhanced Test Generation using Context7 latest documentation
- 🔍 Visual Regression Testing with AI-powered diff analysis
- ⚡ Real-Time Cross-Browser Coordination across Chrome, Firefox, Safari
- 🤖 Automated QA Workflows with Context7 best practices
- 📊 Performance Test Integration with AI profiling
- 🔮 Predictive Test Maintenance using ML pattern analysis
Context7 Integration Features
- Live Documentation Fetching: Get latest Playwright patterns from
/microsoft/playwright - AI Pattern Matching: Match test scenarios against Context7 knowledge base
- Best Practice Integration: Apply latest testing techniques from official docs
- Version-Aware Testing: Context7 provides version-specific patterns
- Community Knowledge Integration: Leverage collective testing wisdom
🎯 When to Use
AI Automatic Triggers:
- Web application deployment verification
- UI/UX regression detection requirements
- Cross-browser compatibility testing
- Performance degradation detection
- Complex user workflow automation
- API integration testing scenarios
Manual AI Invocation:
- "Generate comprehensive tests for this webapp"
- "Create visual regression tests with AI"
- "Automate cross-browser testing workflows"
- "Generate performance tests with Context7"
- "Create intelligent QA test suites"
🧠 AI-Enhanced Testing Methodology (AI-TEST Framework)
A - AI Test Pattern Recognition
class AITestPatternRecognizer:
"""AI-powered test pattern detection and classification."""
async def analyze_webapp_with_context7(self, webapp_url: str, context: dict) -> TestAnalysis:
"""Analyze webapp using Context7 documentation and AI pattern matching."""
# Get latest testing patterns from Context7
playwright_docs = await self.context7.get_library_docs(
context7_library_id="/microsoft/playwright",
topic="AI testing patterns automated test generation visual regression 2025",
tokens=5000
)
# AI pattern classification
app_type = self.classify_application_type(webapp_url, context)
test_patterns = self.match_known_test_patterns(app_type, context)
# Context7-enhanced analysis
context7_insights = self.extract_context7_patterns(app_type, playwright_docs)
return TestAnalysis(
application_type=app_type,
confidence_score=self.calculate_confidence(app_type, test_patterns),
recommended_test_strategies=self.generate_test_strategies(app_type, test_patterns, context7_insights),
context7_references=context7_insights['references'],
automation_opportunities=self.identify_automation_opportunities(app_type, test_patterns)
)
🤖 Context7-Enhanced Testing Patterns
AI-Enhanced Visual Regression Testing
class AIVisualRegressionTester:
"""AI-powered visual regression testing with Context7 pattern matching."""
async def test_with_context7_ai(self, baseline_url: str, current_url: str) -> VisualRegressionResult:
"""Perform visual regression testing using AI and Context7 patterns."""
# Get Context7 visual testing patterns
context7_patterns = await self.context7.get_library_docs(
context7_library_id="/microsoft/playwright",
topic="visual regression testing screenshot comparison patterns",
tokens=3000
)
# AI-powered visual analysis
visual_analysis = await self.analyze_visual_differences_with_ai(
baseline_url, current_url, context7_patterns
)
return VisualRegressionResult(
visual_analysis=visual_analysis,
recommended_actions=self.generate_regression_fixes(visual_analysis)
)
🎯 Advanced Examples
AI-Powered E2E Testing
async def test_e2e_with_ai_context7():
"""Test complete user journey using Context7 patterns."""
# Get Context7 E2E testing patterns
workflow = await context7.get_library_docs(
context7_library_id="/microsoft/playwright",
topic="end-to-end testing user journey automation",
tokens=4000
)
# Apply Context7 testing sequence
test_session = apply_context7_workflow(
workflow['testing_sequence'],
browsers=['chromium', 'firefox', 'webkit']
)
# AI coordination across browsers
ai_coordinator = AITestCoordinator(test_session)
# Execute coordinated testing
result = await ai_coordinator.coordinate_cross_browser_testing()
return result
🎯 AI Testing Best Practices
✅ DO - AI-Enhanced Testing
- Use Context7 integration for latest testing patterns
- Apply AI pattern recognition for comprehensive test coverage
- Leverage visual regression testing with AI analysis
- Use AI-coordinated cross-browser testing with Context7 workflows
- Apply Context7-validated testing solutions
❌ DON'T - Common AI Testing Mistakes
- Ignore Context7 best practices and testing patterns
- Apply AI-generated tests without validation
- Skip AI confidence threshold checks for test reliability
🤖 Context7 Integration Examples
Context7-Enhanced AI Testing
class Context7AITester:
def __init__(self):
self.context7_client = Context7Client()
self.ai_engine = AIEngine()
async def test_with_context7_ai(self, webapp_url: str) -> Context7AITestResult:
# Get latest testing patterns from Context7
playwright_patterns = await self.context7_client.get_library_docs(
context7_library_id="/microsoft/playwright",
topic="AI testing patterns automated test generation visual regression 2025",
tokens=5000
)
# AI-enhanced test generation
ai_tests = self.ai_engine.generate_tests_with_patterns(webapp_url, playwright_patterns)
return Context7AITestResult(
ai_tests=ai_tests,
context7_patterns=playwright_patterns,
confidence_score=ai_tests.confidence
)
🔗 Enterprise Integration
CI/CD Pipeline Integration
# AI testing integration in CI/CD
ai_testing_stage:
- name: AI Test Generation
uses: moai-playwright-webapp-testing
with:
context7_integration: true
ai_pattern_recognition: true
visual_regression: true
cross_browser_testing: true
- name: Context7 Validation
uses: moai-context7-integration
with:
validate_tests: true
apply_best_practices: true
📊 Success Metrics & KPIs
AI Testing Effectiveness
- Test Coverage: 95% coverage with AI-enhanced test generation
- Bug Detection Accuracy: 90% accuracy with AI pattern recognition
- Visual Regression: 85% success rate for AI-detected UI issues
- Cross-Browser Compatibility: 80% faster compatibility testing
Alfred 에이전트와의 완벽한 연동
4-Step 워크플로우 통합
- Step 1: 사용자 요청 분석 및 AI 테스트 전략 수립
- Step 2: Context7 기반 AI 테스트 생성 및 최적화
- Step 3: 자동화된 테스트 실행 및 결과 분석
- Step 4: 품질 보증 및 개선 제안 생성
다른 에이전트들과의 협업
moai-essentials-debug: 테스트 실패 시 AI 디버깅 연동moai-essentials-perf: 성능 테스트 통합moai-essentials-review: 코드 리뷰와 테스트 커버리지 연동moai-foundation-trust: 품질 보증 및 TRUST 5 원칙 적용
한국어 지원 및 UX 최적화
Perfect Gentleman 스타일 통합
- 사용자 인터페이스 한국어 완벽 지원
.moai/config/config.jsonconversation_language 자동 적용- AI 테스트 결과 한국어 상세 리포트
- 개발자 친화적인 한국어 가이드 및 예제
End of AI-Powered Enterprise Web Application Testing Skill v4.0.0
Enhanced with Context7 MCP integration and revolutionary AI capabilities
Works Well With
moai-essentials-debug(AI-powered debugging integration)moai-essentials-perf(AI performance testing optimization)moai-essentials-refactor(AI test code refactoring)moai-essentials-review(AI test code review)moai-foundation-trust(AI quality assurance)moai-context7-integration(latest Playwright patterns and best practices)- Context7 MCP (latest testing patterns and documentation)
GitHub リポジトリ
関連スキル
content-collections
メタThis skill provides a production-tested setup for Content Collections, a TypeScript-first tool that transforms Markdown/MDX files into type-safe data collections with Zod validation. Use it when building blogs, documentation sites, or content-heavy Vite + React applications to ensure type safety and automatic content validation. It covers everything from Vite plugin configuration and MDX compilation to deployment optimization and schema validation.
creating-opencode-plugins
メタThis skill provides the structure and API specifications for creating OpenCode plugins that hook into 25+ event types like commands, files, and LSP operations. It offers implementation patterns for JavaScript/TypeScript modules that intercept and extend the AI assistant's lifecycle. Use it when you need to build event-driven plugins for monitoring, custom handling, or extending OpenCode's capabilities.
evaluating-llms-harness
テストThis Claude Skill runs the lm-evaluation-harness to benchmark LLMs across 60+ standardized academic tasks like MMLU and GSM8K. It's designed for developers to compare model quality, track training progress, or report academic results. The tool supports various backends including HuggingFace and vLLM models.
sglang
メタSGLang is a high-performance LLM serving framework that specializes in fast, structured generation for JSON, regex, and agentic workflows using its RadixAttention prefix caching. It delivers significantly faster inference, especially for tasks with repeated prefixes, making it ideal for complex, structured outputs and multi-turn conversations. Choose SGLang over alternatives like vLLM when you need constrained decoding or are building applications with extensive prefix sharing.
