MCP HubMCP Hub
スキル一覧に戻る

moai-playwright-webapp-testing

modu-ai
更新日 Today
52 閲覧
424
78
424
GitHubで表示
メタaitestingautomationdesign

について

このClaude Skillは、Playwrightを使用したAI駆動のWebアプリケーションテストを統括し、Context7と連携してインテリジェントなテスト生成を実現します。エンタープライズ向けWebアプリケーションにおいて、ビジュアルリグレッションテスト、クロスブラウザ連携、自動化されたQAワークフローを可能にします。AI主導のテスト作成と検証による包括的なモダンWebアプリケーションテストの自動化が必要な場合にご利用ください。

クイックインストール

Claude Code

推奨
プラグインコマンド推奨
/plugin add https://github.com/modu-ai/moai-adk
Git クローン代替
git 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

FieldValue
Skill Namemoai-playwright-webapp-testing
Version4.0.0 Enterprise (2025-11-11)
TierEssential AI-Powered Testing
AI Integration✅ Context7 MCP, AI Test Generation, Visual Regression
Auto-loadOn demand for intelligent test triage and automated QA
LanguagesPython, 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.json conversation_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 リポジトリ

modu-ai/moai-adk
パス: .claude/skills/moai-playwright-webapp-testing
agentic-aiagentic-codingagentic-workflowclaudeclaudecodevibe-coding

関連スキル

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.

スキルを見る