Playwright AI Bot (PlayBot) - early preview

PlayBot is an AI-powered CLI tool designed to accelerate the development and maintenance of Playwright test automation.

Features

Web app crawling for data collection
AI-driven generation and updating of:
- User stories
- Test cases
- Executable code

Demo Project for First Experiments

For first experiments, we created a demo project with a basic setup.

Installation

npm install --save-dev playwright-ai-bot

Usage

npx playwright-ai-bot <command> [options]

Commands

Command	Description	Options
`crawl <url>`	Crawl the web app and collect data	`-f, --folder <folder>`: Specify folder to save crawled data (default: `playbot-data`) `-l, --limit <limit>`: Set the limit of pages to crawl (default: `10`) `-t, --temperature <temperature>`: Set creativity level for AI generation (0 to 1, default: `0.7`) `-c, --clean`: Remove crawled data
`stories`	Generate user stories	`-f, --folder <folder>`: Specify folder to save stories (default: `playbot-data`) `-t, --temperature <temperature>`: Set creativity level for story generation (0 to 1, default: `0.7`)
`tests`	Generate test cases from stories	`-f, --folder <folder>`: Specify folder to save tests (default: `playbot-data`) `-t, --temperature <temperature>`: Set creativity level for test generation (0 to 1, default: `0.7`)
`code`	Generate executable code from tests	No options available yet

Usage: playwright-ai-bot [options] [command]

PlayBot: AI-powered CLI tool that speeds up the development and maintenance of Playwright test automation.

Options:
  -V, --version          Output the version number
  -h, --help             Display help for command

Commands:
  crawl [options] [url]  Crawl the web app to collect data for generating user stories, test cases, and code
  stories [options]      Generate user stories from crawled data
  tests [options]        Generate test cases from user stories
  code                   Generate or update executable code based on test cases
  help [command]         Display help for a specific command

Examples

Crawling a Web App

npx playwright-ai-bot crawl https://example.com -f my-data-folder -l 50 -t 0.5

This command crawls https://example.com, saves the data to my-data-folder, limits crawling to 50 pages, and sets creativity to 0.5 for AI generation.

Generating User Stories

npx playwright-ai-bot stories -f my-data-folder -t 0.7

This generates user stories from the data in my-data-folder with creativity set to 0.7.

Generating Test Cases

npx playwright-ai-bot tests -f my-data-folder -t 0.9

This generates test cases from user stories in my-data-folder with creativity set to 0.9.

Generating Code

npx playwright-ai-bot code

This generates executable code based on the generated test cases.

Configuration

Basic Configuration

Create a playbot.config.js file in your project root:

const config = {
  baseUrl: 'https://example.com',
  aiModel: 'gpt-4o-mini',
  apiKey: process.env.OPENAI_API_KEY || '',
  frameworkPath: 'docs',
  framework: 'playwright',
  frameworkPath: 'tests',
};

module.exports = config; // CommonJS
// export default config; // ES Module

Environment Variables

Set your .env file with your OpenAI API key:

OPENAI_API_KEY=your-secret-key

Using Azure OpenAI

Configure .env for Azure:

AI_PROVIDER=azure
AI_MODEL=gpt-4o
AZURE_OPENAI_ENDPOINT=https://your-endpoint.openai.azure.com/
AZURE_DEPLOYMENT_NAME=gpt-4o
AZURE_API_VERSION=2024-08-01-preview
AZURE_OPENAI_API_KEY=your-secret-key

Update your playbot.config.js accordingly:

const config = {
  ...
  aiProvider: process.env.AI_PROVIDER || 'openai',
  aiModel: process.env.AI_MODEL || 'gpt-4o-mini',
  azureEndpoint: process.env.AZURE_OPENAI_ENDPOINT || '',
  azureDeploymentName: process.env.AZURE_DEPLOYMENT_NAME || '',
  ...
};
export default config;

Debugging

Use these commands for debugging during development:

Crawl a web app:

  npm run dev -- crawl https://dronjo.wopee.io

  # Remove crawled data
  npm run dev -- crawl --clean

Generate user stories:

  npm run dev -- stories -t 0.7

Generate test cases:

  npm run dev -- tests -t 0.9

Generate code:

  npm run dev -- code

Adjusting the Standard Behavior

To modify behavior, use a requirements.md file to instruct how outputs should be generated. Example:

# important requirements

- Use emojis to generate names of scenarios and user stories
- Use priority A, B, C for business prioritization where A is most important
- Generate all tests into one file

Authentication and Cookies Handling

Steps

Open Playwright codegen tool: npx playwright codegen --save-storage=auth.json
Stop recording.
Navigate through the pages you want to crawl to record storage content.
Close the Playwright codegen.
Verify auth.json is created with storage content.

Example auth.json:

{
  "cookies": [
    {
      "name": "session-username",
      "value": "standard_user",
      "domain": "www.saucedemo.com",
      "path": "/",
      "expires": 1729532645,
      "httpOnly": false,
      "secure": false,
      "sameSite": "Lax"
    }
  ],
  "origins": [
    {
      "origin": "https://www.saucedemo.com",
      "localStorage": [
        {
          "name": "backtrace-guid",
          "value": "d3575904-a4dc-4139-a1a0-01f25a69e5c4"
        },
        {
          "name": "backtrace-last-active",
          "value": "1729532012509"
        }
      ]
    }
  ]
}

Add crawlerStorageState: 'auth.json' to your config file.

Troubleshooting: Test auth.json by running:

npx playwright codegen --load-storage=auth.json [your-web-app]

You should be logged in.

Contributing

We welcome contributions! Please follow these steps:

Fork the repository.
Create a new branch: git checkout -b feature/your-feature-name.
Make your changes and commit them: git commit -m 'Add some feature'.
Push to the branch: git push origin feature/your-feature-name.
Submit a pull request.

For major changes, please open an issue first to discuss your proposal.

License

This project is licensed under a Proprietary License. For more details, refer to the LICENSE file.