🤖 AI Playwright Test Generator

An intelligent test automation tool that leverages Google's Gemini AI to automatically generate Playwright test scripts. Simply provide a URL and requirements, and the AI will generate clean, production-ready test code for you.

✨ Features

• 🎯 AI-Powered Test Generation - Uses Google Gemini 2.5 Flash model to intelligently generate tests
• 🎭 Playwright Integration - Generates modern Playwright test syntax with best practices
• 📝 Smart Locators - Automatically creates proper element selectors
• ✅ Built-in Assertions - Includes relevant assertions and error handling
• 🎨 Clean Code Output - Generates well-formatted, readable test code
• ⚡ Performance Testing - Can include performance tests when applicable
• 🔧 Configurable - Easy to customize prompts and requirements

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Google Gemini API key (free tier available at Google AI Studio)

Installation

1. Clone the repository

git clone https://github.com/yourusername/ai-playwright-genAI.git
cd ai-playwright-genAI

2. Install dependencies

npm install

3. Set up environment variables

# Copy the example file
cp .env.example .env

# Add your Gemini API key to .env
echo "GEMINI_API_KEY=your_api_key_here" >> .env
echo "BASE_URL=https://demoqa.com" >> .env

4. Get your Gemini API Key
   • Visit Google AI Studio
   • Click "Get API Key"
   • Create a new API key (free tier available)
   • Copy and paste into your .env file

📖 Usage

Basic Usage

Run the default test generation:

npm start

This will generate a test for the URL specified in your .env file's BASE_URL variable.

Generate Custom Tests

Edit the bottom of gen-ai/ai-generate-test.js to customize:

generateTest(
    "https://your-website.com",
    "Verify login functionality and test the dashboard"
);

Then run:

npm start

Example Generated Output

The script will generate a file at gen-ai/output/generated-test.spec.js:

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

const BASE_URL = 'https://demoqa.com';

test.describe('Main Page', () => {
  test('should have correct page title', async ({ page }) => {
    await page.goto(BASE_URL);
    await expect(page).toHaveTitle(/DemoQA/);
  });

  test('should have interactive elements', async ({ page }) => {
    await page.goto(BASE_URL);
    const mainButton = page.locator('button:has-text("Elements")');
    await expect(mainButton).toBeVisible();
    await expect(mainButton).toBeEnabled();
  });
});

📁 Project Structure

ai-playwright-genAI/
├── gen-ai/
│   ├── ai-generate-test.js      # Main script
│   └── output/                  # Freshly generated test files (gitignored, unreviewed)
├── examples/                    # Reviewed, committed AI-generated tests that CI runs
│   └── demoqa-main-page.spec.js
├── .github/workflows/
│   └── playwright.yml           # CI: runs examples/ on every push; optional live-generation job
├── playwright.config.js         # Config for the reviewed examples/ suite
├── playwright.generated.config.js # Config for running fresh, unreviewed gen-ai/output/
├── .env.example                 # Environment variables template
├── .env                         # Local environment (not in git)
├── package.json                 # Project dependencies
└── README.md                    # This file

✅ Continuous Integration

This repo runs two separate CI paths, kept deliberately apart because generated code is unreviewed by definition:

• test-examples (runs on every push/PR): executes the committed, human-reviewed tests in examples/ and publishes the HTML report to GitHub Pages. This is what the badge at the top of this README reflects.
• generate-and-test (manual workflow_dispatch only): calls Gemini live to generate a fresh test from the hardcoded prompt in gen-ai/ai-generate-test.js, runs whatever it produces, and uploads both the generated file and its report as a build artifact. It only runs if a GEMINI_API_KEY repo secret is configured — otherwise it logs a warning and skips cleanly instead of failing the build.

If you fork this repo and want the live-generation job, add your own key under Settings → Secrets and variables → Actions → GEMINI_API_KEY.

🔧 Configuration

Environment Variables

Create a .env file in the root directory:

# Required: Your Google Gemini API key
GEMINI_API_KEY=your_api_key_here

# Optional: Base URL for tests (default: https://demoqa.com)
BASE_URL=https://your-website.com

Customizing the AI Model

You can change the Gemini model in gen-ai/ai-generate-test.js:

const genAIModel = "gemini-2.5-flash"; // Change this to another model

Available models: gemini-2.5-flash, gemini-2.0-pro, etc.

📦 Dependencies

• @google/generative-ai - Google's Generative AI SDK
• playwright - Web automation and testing library
• dotenv - Environment variable management

🎯 How It Works

1. You provide: A URL and test requirements
2. AI analyzes: The prompt and requirements
3. AI generates: Clean, working Playwright test code
4. Output saved: To gen-ai/output/generated-test.spec.js

⚠️ Important Notes

• Generated tests should be reviewed and validated before running in CI/CD pipelines
• The AI does its best to create functional code, but complex scenarios may need manual adjustments
• Always test generated code locally first
• The free Gemini API tier has rate limits - be mindful of usage

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

See CONTRIBUTING.md for more details.

📝 License

This project is licensed under the ISC License - see the LICENSE file for details.

🆘 Troubleshooting

Error: "Missing API key"

• Make sure you've created a .env file
• Verify your GEMINI_API_KEY is correctly set
• Check that the key is valid and not expired

Error: "Cannot use import statement outside a module"

• Ensure "type": "module" is set in package.json
• Delete node_modules and run npm install again

No output files generated

• Check that the gen-ai/output/ directory is writable
• Check console for error messages
• Verify your Gemini API key has quota remaining

🔗 Useful Links

• Google Gemini API Documentation
• Playwright Documentation
• Playwright Best Practices

💡 Future Enhancements

• Support for multiple test files generation
• Visual element detection using screenshots
• Integration with CI/CD pipelines
• Test execution and reporting
• Support for other testing frameworks (Cypress, etc.)
• Web UI for easier test generation

---

Danish Ali — QA Engineer Toronto, Canada 🇨🇦 📫 DM me on LinkedIn| Open to QA/SDET roles

Happy Testing! 🚀