playwright-ai-bot

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 basic setup.

Installation

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

Usage

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

Commands

Command	Description
crawl <url>	Crawl the web app and collect data
stories	Generate user stories
tests	Generate test cases from stories
code	Generate executable code from tests

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]  Simple crawler for the tested web apps to collect data about it and generate user stories, test cases, and code. For more complex
                         use cases, please provide your own implementation and store data in the playbot-data folder (screenshot, html, minimized html) or
                         contact us to integrate it with Wopee.io bot.
  stories [options]      Create a new story
  tests [options]        Create a new test
  code                   Create or update code based on the provided test cases
  help [command]         display help for command

Configuration

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

const config = {
  baseUrl: 'https://dronjo.wopee.io',
  aiModel: 'gpt-4o-mini',
  apiKey: process.env.OPENAI_API_KEY || '',
  frameworkPath: 'docs',
  framework: 'playwright', // Not implemented yet (TODO): playwright, cypress, robot-framework, webdriver-io
  frameworkPath: 'tests',
};

// CommonJS export = type: "commonjs" in package.json (default behavior)
module.exports = config;

// ES Module export = type: "module" in package.json
// export default config;

Set up your .env file with the Open AI API key:

OPENAI_API_KEY=super-secret-key

Using Azure OpenAI

Other LLM providers to be added later. Currently Azure OpenAI is available and and Wopee.io endpoint will be prepared in early 2025. In order to set it up you need to enhance .env file by adding following parameters (example):

AI_PROVIDER=azure
AI_MODEL=gpt-4o

AZURE_OPENAI_ENDPOINT=https://marcel-experiments.openai.azure.com/
AZURE_DEPLOYMENT_NAME=gpt-4o
AZURE_API_VERSION=2024-08-01-preview
AZURE_OPENAI_API_KEY=super-secret-key

Config need to be adjusted as follows:

const config = {
  baseUrl: 'https://dronjo.wopee.io',

  aiProvider: process.env.AI_PROVIDER || 'openai', // Options: wopee-io, openai, azure
  aiModel: process.env.AI_MODEL || 'gpt-4o-mini',
  apiKey: process.env.OPENAI_API_KEY || '',

  // Azure-specific configurations (only used when aiProvider is 'azure')
  azureEndpoint: process.env.AZURE_OPENAI_ENDPOINT || '',
  azureDeploymentName: process.env.AZURE_DEPLOYMENT_NAME || '',

  framework: 'playwright',
  frameworkPath: 'test-framework/tests',
};

export default config;

Authentication and cookies handling

This is very early version - feedback more than welcome.

• Open Playwright codegen tool: npx playwright codegen --save-storage=auth.json
• Stop recording
• Navigate through the pages you want to crawl later to record storage to be reused during crawling.
• Close the Playwright codegen
• You should get auth.json with storage content

This is example from Sauce demo app after logging in with standard_user

{
  "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"
        }
      ]
    }
  ]
}

• Adjust your config file: add crawlerStorageState: 'auth.json' into playbot.config.json file.

...
const config = {
  ...
  crawlerStorageState: 'auth.json',
  ...
};
...

Troubleshooting: you can easily test your auth.json is created properly by running: npx playwright codegen --load-storage=auth.json [you-web-app] and you should be logged in.

Adjusting the standard behavior

If you need to modify behavior use requirements.md file to instruct behavior of generation of outputs. Example:

# important requirements

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

Debugging (only for development)

• npm run dev -- crawl https://dronjo.wopee.io
• npm run dev -- stories
• npm run dev -- tests
• npm run dev -- code

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 what you would like to change.

License

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