AI-Enhanced Playwright Testing: Extensions and Integrations Guide

npx @playwright/mcp@latest

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

test('order summary updates when quantity changes', async ({ page }) => {
  await page.goto('https://staging.your-app.com/cart');
  
  // Wait for cart to load
  await expect(page.locator('[data-testid="cart-items"]')).toBeVisible();
  
  // Get initial total
  const initialTotal = await page.locator('[data-testid="order-total"]').textContent();
  
  // Increase quantity
  await page.locator('[data-testid="quantity-input"]').first().fill('2');
  await page.locator('[data-testid="update-cart-btn"]').click();
  
  // Verify total updated
  await expect(page.locator('[data-testid="order-total"]')).not.toHaveText(initialTotal!);
  
  // Verify line item price doubled
  const linePrice = await page.locator('[data-testid="line-item-price"]').first().textContent();
  expect(parseFloat(linePrice!.replace('$', '')) % 2).toBe(0);
});

npm install @healenium/healenium-web

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    // Healenium wraps the browser context
    contextOptions: {
      healenium: {
        scoreThreshold: 0.5, // Confidence threshold for healing
        recoveryTries: 1,
      }
    }
  }
});

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

test('add to cart with auto-healing', async ({ page }) => {
  await page.goto('https://your-app.com/products');
  
  // If '#add-to-cart' no longer exists, Healenium tries 
  // related selectors based on element history
  await page.click('#add-to-cart');
  
  await expect(page.locator('.cart-count')).toHaveText('1');
});

// fixtures/ai-assertions.ts
import { test as base, expect } from '@playwright/test';
import OpenAI from 'openai';

type AIFixtures = {
  aiAssert: (description: string) => Promise<void>;
  aiExtract: <T>(description: string) => Promise<T>;
};

export const test = base.extend<AIFixtures>({
  aiAssert: async ({ page }, use) => {
    const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
    
    await use(async (description: string) => {
      // Take screenshot
      const screenshot = await page.screenshot({ encoding: 'base64' });
      
      // Ask LLM to verify the assertion
      const response = await openai.chat.completions.create({
        model: 'gpt-4o',
        messages: [
          {
            role: 'user',
            content: [
              {
                type: 'image_url',
                image_url: { url: `data:image/png;base64,${screenshot}` }
              },
              {
                type: 'text',
                text: `Look at this screenshot. Is the following true? Answer with only "YES" or "NO" followed by a brief reason.\n\nAssertion: ${description}`
              }
            ]
          }
        ]
      });
      
      const answer = response.choices[0].message.content || '';
      
      if (!answer.startsWith('YES')) {
        throw new Error(`AI assertion failed: "${description}"\n\nLLM reasoning: ${answer}`);
      }
    });
  },
  
  aiExtract: async ({ page }, use) => {
    const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
    
    await use(async <T>(description: string): Promise<T> => {
      const screenshot = await page.screenshot({ encoding: 'base64' });
      
      const response = await openai.chat.completions.create({
        model: 'gpt-4o',
        messages: [
          {
            role: 'user',
            content: [
              {
                type: 'image_url',
                image_url: { url: `data:image/png;base64,${screenshot}` }
              },
              {
                type: 'text',
                text: `Extract the following from this screenshot and return as JSON: ${description}`
              }
            ]
          }
        ],
        response_format: { type: 'json_object' }
      });
      
      return JSON.parse(response.choices[0].message.content || '{}') as T;
    });
  }
});

export { expect };

// tests/checkout.spec.ts
import { test, expect } from '../fixtures/ai-assertions';

test('checkout flow displays correct order summary', async ({ page, aiAssert, aiExtract }) => {
  await page.goto('https://staging.your-app.com/cart');
  
  // Add item via regular Playwright
  await page.click('[data-testid="add-to-cart"]');
  await page.click('[data-testid="checkout-btn"]');
  
  // Use AI assertion for visual verification
  await aiAssert('The order summary shows exactly 1 item with a subtotal greater than $0');
  await aiAssert('There is a visible "Place Order" or "Complete Purchase" button');
  
  // Use AI extraction for structured data
  const summary = await aiExtract<{
    subtotal: string;
    shipping: string;
    total: string;
  }>('the order summary including subtotal, shipping cost, and total');
  
  expect(parseFloat(summary.total.replace('$', ''))).toBeGreaterThan(0);
  console.log('Order summary:', summary);
});

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

test('form submission with AI actions', async ({ page, context }) => {
  await page.goto('https://your-app.com/contact');
  
  // Mix traditional Playwright with AI actions
  await ai('Fill in the contact form with a test inquiry about pricing', { page, test });
  await ai('Submit the form', { page, test });
  
  // Traditional assertion for the result
  await expect(page.locator('.success-message')).toBeVisible();
  await expect(page.locator('.success-message')).toContainText('Thank you');
});

import { chromium } from 'playwright';
import { ChatOpenAI } from '@langchain/openai';
import { AgentExecutor, createOpenAIFunctionsAgent } from 'langchain/agents';

async function runTestAgent(testGoal: string) {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();
  
  const llm = new ChatOpenAI({ modelName: 'gpt-4o', temperature: 0 });
  
  // Define browser tools the agent can use
  const tools = [
    {
      name: 'navigate',
      description: 'Navigate to a URL',
      func: async (url: string) => {
        await page.goto(url);
        return `Navigated to ${url}`;
      }
    },
    {
      name: 'click_element',
      description: 'Click an element described by text or role',
      func: async (description: string) => {
        await page.getByText(description).click();
        return `Clicked: ${description}`;
      }
    },
    {
      name: 'get_page_content',
      description: 'Get the current page title and main headings',
      func: async () => {
        const title = await page.title();
        const headings = await page.$$eval('h1, h2', els => 
          els.map(el => el.textContent?.trim()).filter(Boolean)
        );
        return JSON.stringify({ title, headings });
      }
    },
    {
      name: 'assert_text_visible',
      description: 'Assert that specific text is visible on the page',
      func: async (text: string) => {
        const visible = await page.getByText(text).isVisible();
        if (!visible) throw new Error(`Text not visible: "${text}"`);
        return `Verified: "${text}" is visible`;
      }
    }
  ];
  
  // Run the agent
  const agent = await createOpenAIFunctionsAgent({ llm, tools, prompt: /* ... */ });
  const executor = new AgentExecutor({ agent, tools });
  
  const result = await executor.invoke({ input: testGoal });
  await browser.close();
  
  return result;
}

// Example usage
runTestAgent('Navigate to https://staging.your-app.com, verify the homepage loads with a hero section, click the "Get Started" button, and confirm you reach the registration page')
  .then(result => console.log('Test result:', result.output));