┌─────────────────────────────────────────────────────────────────────────┐
│              TRADITIONELLES SCRAPING vs KI-BROWSER-AGENTEN              │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  Traditionelles Scraping:                 KI-Browser-Agent:              │
│  ┌──────────────────┐                    ┌──────────────────┐            │
│  │ fetch(URL)       │                    │ "Finde und buche│            │
│  │ parse(HTML)      │                    │ den günstigsten  │            │
│  │ extract(CSS)     │                    │ Flug nach Paris  │            │
│  │ → Fragil         │                    │ für nächsten     │            │
│  └──────────────────┘                    │ Freitag"         │            │
│          │                               └──────────────────┘            │
│          ▼                                      │                      │
│  ┌──────────────────┐                  ┌──────────────────┐            │
│  │ Bricht bei       │                  │ Versteht       │            │
│  │ Layout-Änderungen│                  │ Kontext, passt │            │
│  │ Benötigt ständige│                  │ sich an,       │            │
│  │ Wartung          │                  │ handhabt Auth   │            │
│  └──────────────────┘                  └──────────────────┘            │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────────────┐
│                     KI-BROWSER-AGENT-ARCHITEKTUR                       │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  ┌──────────────┐     Anweisungen     ┌──────────────┐                │
│  │   Mensch     │──────────────────────►│   Agent      │                │
│  │   Operator   │                       │   Controller │                │
│  └──────────────┘                       └──────┬───────┘                │
│                                                 │                      │
│                    ┌────────────────────────────┼────────────┐       │
│                    │                            │            │       │
│                    ▼                            ▼            ▼       │
│           ┌──────────────┐              ┌──────────────┐ ┌──────────┐  │
│           │   Planung    │              │   Browser    │ │ Speicher │  │
│           │   Modul      │◄────────────►│   Engine     │ │ System   │  │
│           │  (LLM)       │   Zustand    │ (Playwright) │ │          │  │
│           └──────────────┘              └──────┬───────┘ └──────────┘  │
│                                                 │                      │
│                                                 ▼                      │
│                                        ┌──────────────┐               │
│                                        │   Website    │               │
│                                        │   Ziel       │               │
│                                        └──────────────┘               │
│                                                                         │
│  Schlüsselkomponenten:                                                   │
│  • Planungsmodul: LLM-gesteuerte Entscheidungsfindung                   │
│  • Browser-Engine: Playwright für Interaktionen                           │
│  • Speichersystem: Kontexterhaltung über Schritte hinweg                  │
│  • Tool-Registry: Verfügbare Aktionen (Klick, Tippen, Scrollen)       │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

const PLANUNG_PROMPT = `
Du bist ein intelligenter Web-Navigations-Agent. Deine Aufgabe ist es, mit Websites zu interagieren, um Benutzerziele zu erreichen.

Aktueller Zustand:
- URL: {{ currentUrl }}
- Seitentitel: {{ pageTitle }}
- Screenshot: [Base64-kodiertes Bild]
- Verfügbare Aktionen: {{ availableActions }}
- Vorherige Aktionen: {{ actionHistory }}

Ziel: {{ userGoal }}

Anweisungen:
1. Analysiere den aktuellen Seitenzustand aus dem Screenshot
2. Überprüfe deinen Fortschritt zum Ziel
3. Wähle EINE Aktion aus den verfügbaren Optionen
4. Wenn das Ziel erreicht ist, antworte mit "ERLEDIGT" und dem Ergebnis
5. Wenn festgefahren, erkläre warum und fordere menschliche Unterstützung an

Antworte im JSON-Format:
{
  "reasoning": "Dein schrittweiser Gedankenprozess",
  "action": "Die durchzuführende Aktion",
  "parameters": { /* aktionsspezifische Parameter */ },
  "confidence": 0.95
}
`;

const { chromium } = require('playwright');

async function createBrowserContext() {
  const browser = await chromium.launch({
    headless: true,
    args: [
      '--disable-blink-features=AutomationControlled',
      '--disable-web-security',
      '--disable-features=IsolateOrigins,site-per-process',
    ]
  });
  
  const context = await browser.newContext({
    viewport: { width: 1920, height: 1080 },
    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
    locale: 'de-DE',
    timezoneId: 'Europe/Berlin',
    geolocation: { latitude: 52.5200, longitude: 13.4050 },
    permissions: ['geolocation'],
    
    // Anti-Detection-Maßnahmen
    bypassCSP: true,
    ignoreHTTPSErrors: true,
    
    // Aufnahme-Optionen
    recordVideo: {
      dir: './recordings/',
      size: { width: 1920, height: 1080 }
    }
  });
  
  // Anti-Detection-Skripte injizieren
  await context.addInitScript(() => {
    Object.defineProperty(navigator, 'webdriver', {
      get: () => undefined
    });
    
    window.chrome = { runtime: {} };
    
    Object.defineProperty(navigator, 'plugins', {
      get: () => [1, 2, 3, 4, 5]
    });
  });
  
  return { browser, context };
}

# SSH in Ihren n8n-Server oder Container
ssh user@your-n8n-server

# Navigieren Sie zum n8n-Installationsverzeichnis
cd /opt/n8n

# Installieren Sie Playwright und Browser
npm install playwright

# Installieren Sie Browser-Binärdateien
npx playwright install chromium
npx playwright install firefox

# Installieren Sie Systemabhängigkeiten (Ubuntu/Debian)
npx playwright install-deps chromium

// browser-service.js - Wiederverwendbarer Playwright-Wrapper
const { chromium, firefox, webkit } = require('playwright');

class BrowserService {
  constructor(config = {}) {
    this.browserType = config.browser || 'chromium';
    this.headless = config.headless !== false;
    this.slowMo = config.slowMo || 0;
    this.timeout = config.timeout || 30000;
    this.browsers = new Map();
  }
  
  async launch(sessionId) {
    const browserType = { chromium, firefox, webkit }[this.browserType];
    
    const browser = await browserType.launch({
      headless: this.headless,
      slowMo: this.slowMo,
      args: [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-dev-shm-usage',
        '--disable-accelerated-2d-canvas',
        '--no-first-run',
        '--no-zygote',
        '--disable-gpu',
        '--disable-blink-features=AutomationControlled'
      ]
    });
    
    const context = await browser.newContext({
      viewport: { width: 1920, height: 1080 },
      userAgent: this.getRandomUserAgent(),
      locale: 'de-DE',
      timezoneId: 'Europe/Berlin',
      bypassCSP: true,
      ignoreHTTPSErrors: true
    });
    
    // Anti-Detection
    await context.addInitScript(() => {
      Object.defineProperty(navigator, 'webdriver', { get: () => undefined });
      Object.defineProperty(navigator, 'plugins', { get: () => [1, 2, 3, 4, 5] });
      Object.defineProperty(navigator, 'languages', { get: () => ['de-DE', 'de'] });
    });
    
    const page = await context.newPage();
    page.setDefaultTimeout(this.timeout);
    
    this.browsers.set(sessionId, { browser, context, page });
    
    return { sessionId, status: 'launched' };
  }
  
  async navigate(sessionId, url, options = {}) {
    const { page } = this.browsers.get(sessionId);
    
    await page.goto(url, {
      waitUntil: options.waitUntil || 'networkidle',
      timeout: options.timeout || this.timeout
    });
    
    const title = await page.title();
    const currentUrl = page.url();
    
    return { 
      success: true, 
      url: currentUrl, 
      title,
      timestamp: new Date().toISOString()
    };
  }
  
  async screenshot(sessionId, options = {}) {
    const { page } = this.browsers.get(sessionId);
    
    const screenshot = await page.screenshot({
      fullPage: options.fullPage || false,
      encoding: 'base64',
      type: 'jpeg',
      quality: 80
    });
    
    return {
      success: true,
      screenshot: `data:image/jpeg;base64,${screenshot}`,
      timestamp: new Date().toISOString()
    };
  }
  
  async click(sessionId, selector, options = {}) {
    const { page } = this.browsers.get(sessionId);
    
    await page.locator(selector).click({
      timeout: options.timeout || 5000,
      force: options.force || false
    });
    
    await page.waitForTimeout(options.waitAfter || 1000);
    
    return { success: true, selector, timestamp: new Date().toISOString() };
  }
  
  async type(sessionId, selector, text, options = {}) {
    const { page } = this.browsers.get(sessionId);
    
    if (options.clear !== false) {
      await page.locator(selector).fill('');
    }
    
    await page.locator(selector).type(text, {
      delay: options.delay || 50
    });
    
    return { success: true, selector, text, timestamp: new Date().toISOString() };
  }
  
  async extract(sessionId, selector, options = {}) {
    const { page } = this.browsers.get(sessionId);
    
    const elements = await page.locator(selector).all();
    const data = [];
    
    for (const element of elements) {
      const item = {};
      
      if (options.text !== false) {
        item.text = await element.textContent();
      }
      
      if (options.attributes) {
        for (const attr of options.attributes) {
          item[attr] = await element.getAttribute(attr);
        }
      }
      
      data.push(item);
    }
    
    return { success: true, data, count: data.length };
  }
  
  async close(sessionId) {
    const { browser } = this.browsers.get(sessionId);
    await browser.close();
    this.browsers.delete(sessionId);
    return { success: true, sessionId };
  }
  
  getRandomUserAgent() {
    const userAgents = [
      'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
      'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
      'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:121.0) Gecko/20100101 Firefox/121.0'
    ];
    return userAgents[Math.floor(Math.random() * userAgents.length)];
  }
}

module.exports = BrowserService;

// n8n Function Node - LLM Agenten-Controller mit Vision
const { OpenAI } = require('openai');

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
});

async function planNextAction(goal, screenshot, history, pageInfo) {
  const messages = [
    {
      role: 'system',
      content: `Du bist ein Experte für Web-Automatisierung. Deine Aufgabe ist es, Websites zu navigieren und Informationen zu extrahieren.

Verfügbare Aktionen:
1. navigate({ url }) - Zu einer bestimmten URL navigieren
2. click({ selector }) - Ein Element anklicken
3. type({ selector, text }) - Text in ein Eingabefeld eingeben
4. scroll({ direction, amount }) - Die Seite scrollen
5. extract({ selector }) - Text aus Elementen extrahieren
6. screenshot({ fullPage }) - Einen Screenshot machen
7. done({ result }) - Aufgabe erledigt, Ergebnisse zurückgeben

Regeln:
- Analysiere den Screenshot sorgfältig, um die Seitenstruktur zu verstehen
- Verwende spezifische, zuverlässige CSS-Selektoren
- Falls eine Aktion fehlschlägt, versuche einen alternativen Ansatz
- Gib eine Begründung für jede Aktion an
- Gib NUR gültiges JSON zurück`
    },
    {
      role: 'user',
      content: [
        {
          type: 'text',
          text: `Ziel: ${goal}

Seiteninformationen:
- URL: ${pageInfo.url}
- Titel: ${pageInfo.title}

Vorherige Aktionen:
${history.map((h, i) => `${i + 1}. ${h.action}: ${h.reasoning}`).join('\n')}

Aktueller Screenshot:`
        },
        {
          type: 'image_url',
          image_url: {
            url: screenshot,
            detail: 'high'
          }
        }
      ]
    }
  ];
  
  const response = await openai.chat.completions.create({
    model: 'gpt-4o',
    messages,
    max_tokens: 1000,
    temperature: 0.2,
    response_format: { type: 'json_object' }
  });
  
  try {
    const result = JSON.parse(response.choices[0].message.content);
    return result;
  } catch (error) {
    return {
      action: 'done',
      parameters: { 
        result: 'Fehler beim Parsen der LLM-Antwort',
        rawResponse: response.choices[0].message.content 
      },
      reasoning: 'Fehler beim Parsen der JSON-Antwort'
    };
  }
}

// Authentifizierungs-Handler
class AuthHandler {
  async handleLogin(sessionId, credentials, browserService) {
    const { page } = browserService.browsers.get(sessionId);
    
    // Schritt 1: Zur Login-Seite navigieren
    await browserService.navigate(sessionId, credentials.loginUrl);
    await page.waitForTimeout(2000);
    
    // Schritt 2: Anmeldedaten eingeben
    await browserService.type(sessionId, credentials.usernameSelector, credentials.username);
    await browserService.type(sessionId, credentials.passwordSelector, credentials.password);
    
    // Schritt 3: Login absenden
    await browserService.click(sessionId, credentials.submitSelector);
    
    // Schritt 4: 2FA behandeln, falls vorhanden
    const has2FA = await this.detect2FA(page);
    if (has2FA) {
      const code = await this.get2FACode(credentials.twoFactorMethod);
      await browserService.type(sessionId, credentials.twoFASelector, code);
      await browserService.click(sessionId, credentials.twoFASubmitSelector);
    }
    
    // Schritt 5: Auf Dashboard/Post-Login-Zustand warten
    await page.waitForSelector(credentials.postLoginSelector, { timeout: 30000 });
    
    // Schritt 6: Sitzungszustand speichern
    const storageState = await page.context().storageState();
    await this.saveSession(sessionId, storageState);
    
    return { success: true, authenticated: true };
  }
  
  async detect2FA(page) {
    const twoFAIndicators = [
      'text=input[type="tel"]',  // OTP-Eingabe
      'input[name*="code"]',
      'input[placeholder*="code" i]',
      'text=Zwei-Faktor',
      'text=Bestätigungscode'
    ];
    
    for (const indicator of twoFAIndicators) {
      const visible = await page.locator(indicator).isVisible().catch(() => false);
      if (visible) return true;
    }
    return false;
  }
  
  async get2FACode(method) {
    switch (method.type) {
      case 'totp':
        // TOTP-Code generieren
        const speakeasy = require('speakeasy');
        return speakeasy.totp({
          secret: method.secret,
          encoding: 'base32'
        });
        
      case 'email':
        // E-Mail nach Code abfragen
        return await this.pollEmailForCode(method.emailConfig);
        
      case 'sms':
        // Von SMS-API abrufen
        return await this.getSMSCode(method.phoneNumber);
        
      default:
        throw new Error('Nicht unterstützte 2FA-Methode');
    }
  }
  
  async saveSession(sessionId, storageState) {
    // In Redis oder Datenbank für Wiederverwendung speichern
    const redis = require('redis');
    const client = redis.createClient();
    await client.set(`session:${sessionId}:storage`, JSON.stringify(storageState));
    await client.expire(`session:${sessionId}:storage`, 86400); // 24 Stunden
  }
  
  async restoreSession(sessionId, browserService) {
    const redis = require('redis');
    const client = redis.createClient();
    const storageState = await client.get(`session:${sessionId}:storage`);
    
    if (storageState) {
      // Browser mit gespeichertem Zustand starten
      const browser = await chromium.launch({ headless: true });
      const context = await browser.newContext({
        storageState: JSON.parse(storageState)
      });
      const page = await context.newPage();
      
      browserService.browsers.set(sessionId, { browser, context, page });
      return { success: true, restored: true };
    }
    
    return { success: false, restored: false };
  }
}

// Dynamischer Inhalts-Handler
class DynamicContentHandler {
  async waitForDynamicContent(sessionId, browserService, options = {}) {
    const { page } = browserService.browsers.get(sessionId);
    
    const {
      contentSelector,
      loadingIndicator,
      maxWaitTime = 30000,
      checkInterval = 500
    } = options;
    
    const startTime = Date.now();
    let lastContentCount = 0;
    let stableCount = 0;
    
    while (Date.now() - startTime < maxWaitTime) {
      // Warten, bis das Laden abgeschlossen ist
      if (loadingIndicator) {
        await page.locator(loadingIndicator).waitFor({ 
          state: 'hidden', 
          timeout: 5000 
        }).catch(() => {});
      }
      
      // Inhaltsanzahl prüfen
      const currentCount = await page.locator(contentSelector).count();
      
      if (currentCount === lastContentCount) {
        stableCount++;
        if (stableCount >= 3) {
          // Inhalt hat sich stabilisiert
          break;
        }
      } else {
        stableCount = 0;
        lastContentCount = currentCount;
      }
      
      await page.waitForTimeout(checkInterval);
    }
    
    return { 
      success: true, 
      elementCount: lastContentCount,
      waitTime: Date.now() - startTime 
    };
  }
  
  async handleInfiniteScroll(sessionId, browserService, options = {}) {
    const { page } = browserService.browsers.get(sessionId);
    
    const {
      itemSelector,
      maxScrolls = 10,
      scrollDelay = 1000,
      stopCondition = null
    } = options;
    
    let scrollCount = 0;
    let itemsBefore = 0;
    
    while (scrollCount < maxScrolls) {
      // Elemente vor dem Scrollen zählen
      itemsBefore = await page.locator(itemSelector).count();
      
      // Nach unten scrollen
      await page.evaluate(() => {
        window.scrollTo(0, document.body.scrollHeight);
      });
      
      // Warten, bis neue Inhalte geladen sind
      await page.waitForTimeout(scrollDelay);
      
      // Prüfen, ob neue Elemente geladen wurden
      const itemsAfter = await page.locator(itemSelector).count();
      
      if (itemsAfter === itemsBefore) {
        // Keine neuen Inhalte geladen
        break;
      }
      
      // Benutzerdefinierte Stoppbedingung prüfen
      if (stopCondition) {
        const shouldStop = await page.evaluate(stopCondition);
        if (shouldStop) break;
      }
      
      scrollCount++;
    }
    
    return {
      success: true,
      scrollCount,
      totalItems: await page.locator(itemSelector).count()
    };
  }
}

// Firecrawl-Integration
class FirecrawlService {
  constructor(apiKey) {
    this.apiKey = apiKey;
    this.baseUrl = 'https://api.firecrawl.dev/v1';
  }
  
  async scrapeUrl(url, options = {}) {
    const axios = require('axios');
    
    const response = await axios.post(`${this.baseUrl}/scrape`, {
      url,
      formats: options.formats || ['markdown', 'html'],
      onlyMainContent: options.onlyMainContent !== false,
      includeTags: options.includeTags || [],
      excludeTags: options.excludeTags || [],
      waitFor: options.waitFor || 0,
      timeout: options.timeout || 30000,
      actions: options.actions || [] // Pre-scrape-Aktionen
    }, {
      headers: {
        'Authorization': `Bearer ${this.apiKey}`,
        'Content-Type': 'application/json'
      }
    });
    
    return response.data;
  }
  
  async crawlWebsite(url, options = {}) {
    const axios = require('axios');
    
    const response = await axios.post(`${this.baseUrl}/crawl`, {
      url,
      excludePaths: options.excludePaths || [],
      includePaths: options.includePaths || [],
      maxDepth: options.maxDepth || 2,
      limit: options.limit || 100,
      allowBackwardLinks: options.allowBackwardLinks || false,
      allowExternalLinks: options.allowExternalLinks || false,
      scrapeOptions: {
        formats: options.formats || ['markdown'],
        onlyMainContent: true
      }
    }, {
      headers: {
        'Authorization': `Bearer ${this.apiKey}`,
        'Content-Type': 'application/json'
      }
    });
    
    // Gibt Job-ID für asynchrone Verarbeitung zurück
    return response.data;
  }
  
  async getCrawlStatus(jobId) {
    const axios = require('axios');
    
    const response = await axios.get(`${this.baseUrl}/crawl/${jobId}`, {
      headers: {
        'Authorization': `Bearer ${this.apiKey}`
      }
    });
    
    return response.data;
  }
  
  async searchAndExtract(query, options = {}) {
    const axios = require('axios');
    
    const response = await axios.post(`${this.baseUrl}/search`, {
      query,
      limit: options.limit || 5,
      lang: options.lang || 'de',
      country: options.country || 'de',
      scrapeOptions: {
        formats: ['markdown']
      }
    }, {
      headers: {
        'Authorization': `Bearer ${this.apiKey}`,
        'Content-Type': 'application/json'
      }
    });
    
    return response.data;
  }
  
  // n8n Function Node-Implementierung
  async n8nScrapeNode(input) {
    const result = await this.scrapeUrl(
      input.json.url,
      input.json.options || {}
    );
    
    return [{ json: result }];
  }
}

// n8n-Verwendung
const firecrawl = new FirecrawlService(process.env.FIRECRAWL_API_KEY);
return await firecrawl.n8nScrapeNode($input.first());

// Browserbase-Integration
class BrowserbaseService {
  constructor(apiKey, projectId) {
    this.apiKey = apiKey;
    this.projectId = projectId;
    this.baseUrl = 'https://www.browserbase.com/v1';
    this.wsEndpoint = null;
  }
  
  async createSession(options = {}) {
    const axios = require('axios');
    
    const response = await axios.post(`${this.baseUrl}/sessions`, {
      projectId: this.projectId,
      browserSettings: {
        headless: options.headless !== false,
        viewport: options.viewport || { width: 1920, height: 1080 }
      },
      proxy: options.proxy || {
        type: 'browserbase',
        country: options.country || 'de'
      },
      timeouts: {
        inactivity: options.inactivityTimeout || 300000,
        session: options.sessionTimeout || 600000
      }
    }, {
      headers: {
        'X-BB-API-Key': this.apiKey,
        'Content-Type': 'application/json'
      }
    });
    
    this.sessionId = response.data.id;
    this.wsEndpoint = response.data.connectUrl;
    
    return {
      sessionId: this.sessionId,
      wsEndpoint: this.wsEndpoint,
      status: response.data.status
    };
  }
  
  async connectPlaywright() {
    const { chromium } = require('playwright');
    
    const browser = await chromium.connectOverCDP(this.wsEndpoint);
    const context = browser.contexts()[0] || await browser.newContext();
    const page = await context.newPage();
    
    return { browser, context, page };
  }
  
  async getSessionLogs(sessionId) {
    const axios = require('axios');
    
    const response = await axios.get(
      `${this.baseUrl}/sessions/${sessionId}/logs`,
      {
        headers: {
          'X-BB-API-Key': this.apiKey
        }
      }
    );
    
    return response.data;
  }
  
  async getSessionRecording(sessionId) {
    const axios = require('axios');
    
    const response = await axios.get(
      `${this.baseUrl}/sessions/${sessionId}/recording`,
      {
        headers: {
          'X-BB-API-Key': this.apiKey
        }
      }
    );
    
    return response.data;
  }
  
  async endSession(sessionId) {
    const axios = require('axios');
    
    await axios.delete(`${this.baseUrl}/sessions/${sessionId}`, {
      headers: {
        'X-BB-API-Key': this.apiKey
      }
    });
    
    return { success: true };
  }
}

┌─────────────────────────────────────────────────────────────────────────┐
│                    MODEL CONTEXT PROTOCOL (MCP)                        │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  ┌─────────────┐                    ┌─────────────┐                    │
│  │    KI       │◄──────────────────►│    MCP      │                    │
│  │   Modell    │    JSON-RPC        │   Server    │                    │
│  │  (Claude)   │   Protokoll        │             │                    │
│  └─────────────┘                    └──────┬──────┘                    │
│                                           │                            │
│                              Tool-Aufrufe │                            │
│                                           ▼                            │
│                                    ┌─────────────┐                     │
│                                    │   Browser   │                     │
│                                    │  Automation │                     │
│                                    │ (Playwright)│                     │
│                                    └─────────────┘                     │
│                                                                         │
│  MCP-Fähigkeiten:                                                       │
│  • tools/list - Verfügbare Browser-Aktionen entdecken                   │
│  • tools/call - navigate, click, type, screenshot ausführen             │
│  • resources/read - Seiteninhalt, Screenshots abrufen                     │
│  • prompts/get - Workflow-Vorlagen abrufen                                │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

// MCP-Server für Playwright Browser-Automatisierung
const { Server } = require('@modelcontextprotocol/sdk/server/index.js');
const { StdioServerTransport } = require('@modelcontextprotocol/sdk/server/stdio.js');
const { chromium } = require('playwright');

class PlaywrightMCPService {
  constructor() {
    this.server = new Server({
      name: 'playwright-browser-server',
      version: '1.0.0'
    }, {
      capabilities: {
        tools: {},
        resources: {}
      }
    });
    
    this.sessions = new Map();
    this.setupHandlers();
  }
  
  setupHandlers() {
    // Verfügbare Tools auflisten
    this.server.setRequestHandler('tools/list', async () => ({
      tools: [
        {
          name: 'browser_launch',
          description: 'Eine neue Browser-Sitzung starten',
          inputSchema: {
            type: 'object',
            properties: {
              headless: { type: 'boolean', default: true },
              browser: { type: 'string', enum: ['chromium', 'firefox', 'webkit'], default: 'chromium' }
            }
          }
        },
        {
          name: 'browser_navigate',
          description: 'Zu einer URL navigieren',
          inputSchema: {
            type: 'object',
            properties: {
              sessionId: { type: 'string' },
              url: { type: 'string' }
            },
            required: ['sessionId', 'url']
          }
        },
        {
          name: 'browser_screenshot',
          description: 'Einen Screenshot der aktuellen Seite machen',
          inputSchema: {
            type: 'object',
            properties: {
              sessionId: { type: 'string' },
              fullPage: { type: 'boolean', default: false }
            },
            required: ['sessionId']
          }
        },
        {
          name: 'browser_click',
          description: 'Ein Element auf der Seite anklicken',
          inputSchema: {
            type: 'object',
            properties: {
              sessionId: { type: 'string' },
              selector: { type: 'string' },
              description: { type: 'string' }
            },
            required: ['sessionId', 'selector']
          }
        },
        {
          name: 'browser_type',
          description: 'Text in ein Eingabefeld eingeben',
          inputSchema: {
            type: 'object',
            properties: {
              sessionId: { type: 'string' },
              selector: { type: 'string' },
              text: { type: 'string' },
              description: { type: 'string' }
            },
            required: ['sessionId', 'selector', 'text']
          }
        },
        {
          name: 'browser_extract',
          description: 'Daten von der Seite extrahieren',
          inputSchema: {
            type: 'object',
            properties: {
              sessionId: { type: 'string' },
              selector: { type: 'string' },
              attributes: { type: 'array', items: { type: 'string' } }
            },
            required: ['sessionId', 'selector']
          }
        },
        {
          name: 'browser_close',
          description: 'Eine Browser-Sitzung schließen',
          inputSchema: {
            type: 'object',
            properties: {
              sessionId: { type: 'string' }
            },
            required: ['sessionId']
          }
        }
      ]
    }));
    
    // Tool-Aufrufe behandeln
    this.server.setRequestHandler('tools/call', async (request) => {
      const { name, arguments: args } = request.params;
      
      switch (name) {
        case 'browser_launch':
          return await this.handleLaunch(args);
        case 'browser_navigate':
          return await this.handleNavigate(args);
        case 'browser_screenshot':
          return await this.handleScreenshot(args);
        case 'browser_click':
          return await this.handleClick(args);
        case 'browser_type':
          return await this.handleType(args);
        case 'browser_extract':
          return await this.handleExtract(args);
        case 'browser_close':
          return await this.handleClose(args);
        default:
          throw new Error(`Unbekanntes Tool: ${name}`);
      }
    });
  }
  
  async handleLaunch(args) {
    const sessionId = `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
    
    const browser = await chromium.launch({
      headless: args.headless !== false
    });
    
    const context = await browser.newContext({
      viewport: { width: 1920, height: 1080 }
    });
    
    const page = await context.newPage();
    
    this.sessions.set(sessionId, { browser, context, page });
    
    return {
      content: [{
        type: 'text',
        text: JSON.stringify({
          sessionId,
          status: 'gestartet',
          browser: args.browser || 'chromium'
        })
      }]
    };
  }
  
  async handleNavigate(args) {
    const session = this.sessions.get(args.sessionId);
    if (!session) throw new Error('Sitzung nicht gefunden');
    
    await session.page.goto(args.url, { waitUntil: 'networkidle' });
    
    return {
      content: [{
        type: 'text',
        text: JSON.stringify({
          url: session.page.url(),
          title: await session.page.title()
        })
      }]
    };
  }
  
  async handleScreenshot(args) {
    const session = this.sessions.get(args.sessionId);
    if (!session) throw new Error('Sitzung nicht gefunden');
    
    const screenshot = await session.page.screenshot({
      fullPage: args.fullPage,
      encoding: 'base64',
      type: 'jpeg',
      quality: 80
    });
    
    return {
      content: [{
        type: 'image',
        data: screenshot,
        mimeType: 'image/jpeg'
      }, {
        type: 'text',
        text: `Screenshot erfasst. Seiten-URL: ${session.page.url()}`
      }]
    };
  }
  
  async handleClick(args) {
    const session = this.sessions.get(args.sessionId);
    if (!session) throw new Error('Sitzung nicht gefunden');
    
    await session.page.click(args.selector);
    await session.page.waitForTimeout(500);
    
    return {
      content: [{
        type: 'text',
        text: `Element angeklickt: ${args.description || args.selector}`
      }]
    };
  }
  
  async handleType(args) {
    const session = this.sessions.get(args.sessionId);
    if (!session) throw new Error('Sitzung nicht gefunden');
    
    await session.page.fill(args.selector, args.text);
    
    return {
      content: [{
        type: 'text',
        text: `"${args.text}" in ${args.description || args.selector} eingegeben`
      }]
    };
  }
  
  async handleExtract(args) {
    const session = this.sessions.get(args.sessionId);
    if (!session) throw new Error('Sitzung nicht gefunden');
    
    const elements = await session.page.locator(args.selector).all();
    const data = [];
    
    for (const element of elements) {
      const item = { text: await element.textContent() };
      
      if (args.attributes) {
        for (const attr of args.attributes) {
          item[attr] = await element.getAttribute(attr);
        }
      }
      
      data.push(item);
    }
    
    return {
      content: [{
        type: 'text',
        text: JSON.stringify({ count: data.length, data }, null, 2)
      }]
    };
  }
  
  async handleClose(args) {
    const session = this.sessions.get(args.sessionId);
    if (!session) throw new Error('Sitzung nicht gefunden');
    
    await session.browser.close();
    this.sessions.delete(args.sessionId);
    
    return {
      content: [{
        type: 'text',
        text: JSON.stringify({ sessionId: args.sessionId, status: 'geschlossen' })
      }]
    };
  }
  
  async start() {
    const transport = new StdioServerTransport();
    await this.server.connect(transport);
    console.error('Playwright MCP-Server läuft auf stdio');
  }
}

// Server starten
const service = new PlaywrightMCPService();
service.start().catch(console.error);

// claude_desktop_config.json
{
  "mcpServers": {
    "playwright": {
      "command": "node",
      "args": ["/pfad/zu/playwright-mcp-server.js"],
      "env": {
        "NODE_PATH": "/opt/n8n/custom/node_modules"
      }
    }
  }
}

# playwright-agent-deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: n8n-playwright-agent
  namespace: automation
spec:
  replicas: 3
  selector:
    matchLabels:
      app: n8n-playwright
  template:
    metadata:
      labels:
        app: n8n-playwright
    spec:
      containers:
      - name: n8n
        image: your-registry/n8n-playwright:latest
        ports:
        - containerPort: 5678
        env:
        - name: N8N_BASIC_AUTH_ACTIVE
          value: "true"
        - name: OPENAI_API_KEY
          valueFrom:
            secretKeyRef:
              name: n8n-secrets
              key: openai-api-key
        - name: ANTHROPIC_API_KEY
          valueFrom:
            secretKeyRef:
              name: n8n-secrets
              key: anthropic-api-key
        resources:
          requests:
            memory: "2Gi"
            cpu: "1000m"
          limits:
            memory: "4Gi"
            cpu: "2000m"
        volumeMounts:
        - name: n8n-data
          mountPath: /home/node/.n8n
        - name: tmp
          mountPath: /tmp
      volumes:
      - name: n8n-data
        persistentVolumeClaim:
          claimName: n8n-pvc
      - name: tmp
        emptyDir: {}
      securityContext:
        runAsUser: 1000
        runAsGroup: 1000

---
apiVersion: v1
kind: Service
metadata:
  name: n8n-playwright-service
  namespace: automation
spec:
  selector:
    app: n8n-playwright
  ports:
  - port: 5678
    targetPort: 5678
  type: ClusterIP

---
apiVersion: autoscaling/v2
kind: HorizontalPodAutoscaler
metadata:
  name: n8n-playwright-hpa
  namespace: automation
spec:
  scaleTargetRef:
    apiVersion: apps/v1
    kind: Deployment
    name: n8n-playwright-agent
  minReplicas: 3
  maxReplicas: 20
  metrics:
  - type: Resource
    resource:
      name: cpu
      target:
        type: Utilization
        averageUtilization: 70
  - type: Resource
    resource:
      name: memory
      target:
        type: Utilization
        averageUtilization: 80

// Sitzungs-Pool für effizientes Browser-Management
class BrowserSessionPool {
  constructor(maxSessions = 10) {
    this.maxSessions = maxSessions;
    this.available = [];
    this.inUse = new Map();
    this.waiting = [];
    
    // Veraltete Sitzungen alle 5 Minuten bereinigen
    setInterval(() => this.cleanup(), 300000);
  }
  
  async acquire(sessionId, options = {}) {
    // Prüfen, ob Sitzung existiert und verfügbar ist
    const existingIndex = this.available.findIndex(s => s.sessionId === sessionId);
    if (existingIndex !== -1) {
      const session = this.available.splice(existingIndex, 1)[0];
      this.inUse.set(sessionId, session);
      return session;
    }
    
    // Wenn Kapazität erreicht, auf Sitzung warten
    if (this.inUse.size >= this.maxSessions) {
      return new Promise((resolve) => {
        this.waiting.push({ sessionId, options, resolve });
      });
    }
    
    // Neue Sitzung erstellen
    const session = await this.createSession(sessionId, options);
    this.inUse.set(sessionId, session);
    return session;
  }
  
  async createSession(sessionId, options) {
    const { chromium } = require('playwright');
    
    const browser = await chromium.launch({
      headless: options.headless !== false,
      args: [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-dev-shm-usage',
        '--disable-gpu',
        '--disable-blink-features=AutomationControlled'
      ]
    });
    
    const context = await browser.newContext({
      viewport: { width: 1920, height: 1080 },
      userAgent: this.getRandomUserAgent()
    });
    
    // Anti-Detection-Skripte hinzufügen
    await context.addInitScript(() => {
      Object.defineProperty(navigator, 'webdriver', { get: () => undefined });
    });
    
    const page = await context.newPage();
    
    return {
      sessionId,
      browser,
      context,
      page,
      createdAt: new Date(),
      lastUsed: new Date(),
      requestCount: 0
    };
  }
  
  release(sessionId) {
    const session = this.inUse.get(sessionId);
    if (!session) return;
    
    session.lastUsed = new Date();
    session.requestCount++;
    
    this.inUse.delete(sessionId);
    
    // Wiederverwenden oder zerstören basierend auf Nutzung
    if (session.requestCount > 100) {
      // Maximale Nutzung erreicht, Browser schließen
      this.destroySession(session);
    } else {
      this.available.push(session);
    }
    
    // Warteschlange verarbeiten
    if (this.waiting.length > 0) {
      const next = this.waiting.shift();
      this.acquire(next.sessionId, next.options).then(next.resolve);
    }
  }
  
  async destroySession(session) {
    try {
      await session.browser.close();
    } catch (e) {
      console.error('Fehler beim Schließen des Browsers:', e);
    }
  }
  
  async cleanup() {
    const now = new Date();
    const maxIdleTime = 600000; // 10 Minuten
    
    // Leerlauf-Sitzungen entfernen
    this.available = this.available.filter(session => {
      const idleTime = now - session.lastUsed;
      if (idleTime > maxIdleTime) {
        this.destroySession(session);
        return false;
      }
      return true;
    });
    
    // Pool-Statistik loggen
    console.log(`Sitzungspool: ${this.available.length} verfügbar, ${this.inUse.size} in Benutzung, ${this.waiting.length} wartend`);
  }
  
  getRandomUserAgent() {
    const agents = [
      'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
      'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36'
    ];
    return agents[Math.floor(Math.random() * agents.length)];
  }
  
  getStats() {
    return {
      available: this.available.length,
      inUse: this.inUse.size,
      waiting: this.waiting.length,
      maxSessions: this.maxSessions
    };
  }
}

module.exports = BrowserSessionPool;

┌─────────────────────────────────────────────────────────────────────────┐
│                    BEST-PRACTICES-CHECKLISTE                           │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  Architektur:                                                           │
│  □ Sitzungs-Pools verwenden, um Browser-Instanzen effizient zu verwalten │
│  □ Circuit-Breaker für externe Service-Aufrufe implementieren          │
│  □ Für horizontale Skalierung mit zustandslosen Workern entwerfen       │
│  □ Trennung der Belange: Planung, Ausführung und Datenextraktion       │
│                                                                         │
│  Sicherheit:                                                            │
│  □ Anmeldedaten in Umgebungsvariablen speichern, nie im Code           │
│  □ Ratenbegrenzung implementieren, um Blockierung zu vermeiden         │
│  □ Stealth-Maßnahmen verwenden, um Erkennung zu reduzieren              │
│  □ User-Agents und IP-Adressen rotieren                                │
│                                                                         │
│  Zuverlässigkeit:                                                       │
│  □ Umfassende Retry-Logik mit exponentiellem Backoff implementieren     │
│  □ Dead-Letter-Queues für fehlgeschlagene Aufgaben verwenden           │
│  □ Vollständige Audit-Trails für Compliance aufrechterhalten           │
│  □ Ressourcenlimits setzen, um außer Kontrolle geratene Prozesse zu verhindern │
│                                                                         │
│  Leistung:                                                              │
│  □ Sitzungszustand bei Bedarf cachen                                     │
│  □ Headless-Modus für Produktion verwenden                               │
│  □ Connection-Pooling für Datenbanken implementieren                     │
│  □ Langsame Selektoren profilieren und optimieren                        │
│                                                                         │
│  Monitoring:                                                            │
│  □ Erfolgsraten, Latenzen und Fehlermuster verfolgen                    │
│  □ Alerts für ungewöhnliche Aktivität einrichten                         │
│  □ Screenshots von Fehlern für Debugging sammeln                         │
│  □ Ressourcennutzung (CPU, Speicher, Festplatte) überwachen             │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘