Building a Local Auto-Healer: Integrating Playwright with Ollama

import { test, expect, Page } from '@playwright/test';

// Utility function to call local Ollama API
async function askOllama(prompt: string): Promise<string> {
  const response = await fetch('http://localhost:11434/api/generate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      model: 'llama3',
      prompt: prompt,
      stream: false
    })
  });
  const data = await response.json();
  return data.response.trim();
}

test('Auto-Healing Form Submission', async ({ page }) => {
  await page.goto('https://example.com/login');

  const oldLocatorStr = '#legacy-submit-btn'; // Purposely broken locator
  const intendedAction = "Click the 'Login' button";

  try {
    // Attempt the action with a strict, short timeout to trigger failure quickly
    await page.locator(oldLocatorStr).click({ timeout: 2000 });
  } catch (error) {
    console.log('🔴 Locator failed! Attempting AI auto-healing...');

    // 1. Get the minified DOM (stripping large, irrelevant tags)
    const domSnapshot = await page.evaluate(() => {
        const clone = document.body.cloneNode(true) as HTMLElement;
        const removeTags = ['script', 'style', 'svg', 'path'];
        removeTags.forEach(tag => clone.querySelectorAll(tag).forEach(e => e.remove()));
        return clone.innerHTML;
    });

    // 2. Build the exact prompt for Ollama
    const prompt = `
      The locator "${oldLocatorStr}" failed. 
      The user intention is: "${intendedAction}".
      Here is the minified HTML of the page:
      ${domSnapshot}
      Analyze the HTML and provide a correct Playwright locator string (either CSS or text) to accomplish the intention.
      Reply ONLY with the exact locator string, no markdown, no quotes, no explanation.
    `;

    // 3. Ask local AI for the new locator
    const newLocatorStr = await askOllama(prompt);
    console.log(`🟢 AI Suggested New Locator: ${newLocatorStr}`);

    // 4. Retry with the healed locator
    await page.locator(newLocatorStr).click();
    console.log('✅ Auto-healing successful!');
  }
});