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

![PlayBot Demo]

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

1. Open Playwright codegen tool: npx playwright codegen --save-storage=auth.json
2. Stop recording.
3. Navigate through the pages you want to crawl to record storage content.
4. Close the Playwright codegen.
5. 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"
        }
      ]
    }
  ]
}

6. 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:

1. Fork the repository.
2. Create a new branch: git checkout -b feature/your-feature-name.
3. Make your changes and commit them: git commit -m 'Add some feature'.
4. Push to the branch: git push origin feature/your-feature-name.
5. 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.