playwright-ai-integration

This MCP server enables natural language prompts to drive a Playwright-enabled browser session via an AI agent. Users can describe tests or interactions in plain language, and the system will translate those prompts into browser actions such as launching a browser, navigating to pages, clicking elements, filling forms, taking screenshots, and generating Playwright test code. Real-time feedback is streamed back over WebSocket, so you can watch actions as they happen and view the generated test code for reuse in your projects.

Key capabilities include launching and controlling a browser, navigating to URLs, interacting with page elements through CSS selectors, waiting for elements to appear, capturing screenshots, retrieving page content, and generating Playwright test scripts. The MCP tools exposed by this server include launch_browser, navigate_to, click_element, fill_input, wait_for_element, take_screenshot, get_page_content, generate_test, and close_browser. You can start a session, submit prompts like “Go to google.com and search for Playwright testing” or “Open example.com and take a screenshot,” and monitor live updates as the AI executes tasks and builds the corresponding tests.

Prerequisites:

• Node.js v18 or higher
• An OpenAI API key
• A modern web browser

Installation steps:

1. Clone the repository or download the project files.

2. Navigate to the project directory:

   cd playwright-ai-integration

3. Install dependencies:

   npm install

4. Install Playwright browsers (required for browser automation):

   npm run install-browsers

5. Set up environment variables:

   cp .env.example .env

   Edit .env and add your OpenAI API key:

   OPENAI_API_KEY=your_openai_api_key_here

6. Start the server:

   npm start

7. Open the web interface in your browser at:

   http://localhost:3000

Tips and troubleshooting:

• Ensure your OPENAI_API_KEY is valid and has access to the required model (gpt-4o-mini is commonly recommended).
• If you encounter browser launch issues, run npm run install-browsers to verify Playwright binaries are installed.
• If you see MCP connection errors, verify that the Node server is running and that the port (default 3000) is not in use by another process.
• The OPENAI_MODEL setting can be adjusted in .env to balance performance and cost (options include gpt-4o-mini, gpt-4o, gpt-4-turbo, gpt-3.5-turbo).
• For debugging, export DEBUG=* before starting the server to get verbose logs.
• The MCP server can generate Playwright test code via the generate_test tool; copy this code into your project to reuse or customize tests.