[Feature]: AI in UI mode

[vitalets]

🚀 Feature Request

I propose an enhancement to UI mode to assist in fixing failing tests with AI. It could be a button that sends the failed test context to an AI model and displays the response directly in the interface.

Example

Here’s where such a button could be located:

When the user clicks this button, the UI mode builds the prompt with the following data:

• test error message
• code snippet
• ARIA snapshot of the page

Then, it sends a request to AI model and displays the suggestions directly within the UI mode panel.

Users can customize the model and prompt via the ai section in the playwright.config.js:

export default defineConfig({
  ai: {
    model: 'openai-gpt-4o',
    apiKey: process.env.OPENAI_API_KEY,
    prompt: `Fix the error in the Playwright test: {error} {snippet} {ariaSnapshot}`,
  }
});

I've experimented with this approach by adding a prompt as a regular attachment in the HTML reporter. While it works, it requires copy-pasting the prompt into an AI chat, which isn’t very convenient. However, the workflow itself looks promising. For example, here’s a ChatGPT response that fixes the test:

Embedding this functionality into UI mode would make it far more helpful. Additionally, the Playwright VS Code extension could implement a similar feature, potentially integrating with GitHub Copilot.

Motivation

It will make UI mode more powerful and help us to fix tests faster.