autospec

オートスペック

Web アプリ向けのオープンソースのエンドツーエンド (e2e) テスト生成

コードエントリポイント

Autospec は、エンドツーエンドのテスト/QA エージェントであり、ビジョンおよびテキスト言語モデルを使用して、Web アプリケーションの常識的なテスト仕様を探索および生成します。これは、厳密に定義された以前の動作に対する回帰を捉えるのではなく、各インタラクション後の UI 出力全体に対するユーザーのような判断を模倣して、アプリケーションの動作に関するエラーを発生させるかどうかを決定することを目的としています。

• このアプローチにより、autospec はリグレッションをチェックするだけでなく、実装直後に新機能をテストできるようになります。
• 設定が不要なので、簡単に使用できます。

クイックスタート

古典的なサンプル Web アプリである TodoMVC で 10 のスペックを生成して実行します。

 npx autospecai --url https://todomvc.com/examples/react/dist/ --apikey YOUR_OPENAI_API_KEY

autospecai パッケージをインストールするには「はい」と答える必要があります。最初の実行では、テスト環境の実行に使用されるブラウザー バイナリなどの依存関係をダウンロードするのに数分かかる場合があります。

実行が完了すると、実行されたテストの概要と、テストが成功したか失敗したかが表示されます。

成功したスペックは、作業ディレクトリのtrajectoriesフォルダー内に保存されます。これらのテストは、以下を実行することでいつでも再実行できます。

 npx playwright test

既存の Playwright 設定によっては、playwright.config.js ファイルの testDir に「軌跡」を追加する必要がある場合があります。

キーをフラグとして渡す代わりに環境変数を使用する

サンプルの .env ファイルをコピーし、アプリを実行する前に OPENAI_API_KEY または GOOGLE_GENERATIVE_AI_API_KEY を入力します。

mv .env.example .env # rename the example to .env
nano .env # edit as you like

構成について詳しくはこちら

 > npx autospecai --help
    Usage: npx autospecai --url < url > [--model < model > ] [--spec_limit < limit > ] [--help | -h ]

    Required:
    --url < url >          The target URL to run the autospec tests against.

    Optional:
    --help, -h           Show this help message.
    --spec_limit < limit > The max number of specs to generate. Default 10.
    --model < model >      The model to use for spec generation
                            * " gpt-4o " (default)
                            * " gemini-1.5-flash-latest "
                            * " claude-3-haiku "
                            * (note: Gemini flash is free up to rate limits)
    --apikey < key >       The relevant API key for the chosen model ' s API.
                            * If not specified, we ' ll fall back on the
                            following environment variables:
                            * OPENAI_API_KEY
                            * GOOGLE_GENERATIVE_AI_API_KEY
                            * ANTHROPIC_API_KEY

出力例

ログは次のようにコンソールに出力されるほか、ビデオ、png、HTML/JSON DOM スナップショットとともに trajectories/** フォルダーにも出力されます。

 Test Summary:
✔ 1. Check if the page loads successfully
  1.1) action: markSpecAsComplete, reason: The spec passed, fullProseExplanationOfReasoning100charmax: The page loaded successfully with all expected elements visible., planningThoughtAboutTheActionIWillTake: The page has loaded successfully as indicated by the presence of the header, input field, and footer. I will mark the spec as complete.
✔ 2. Check if the title 'todos' is displayed
  2.1) action: markSpecAsComplete, reason: The spec passed, fullProseExplanationOfReasoning100charmax: The title 'todos' is displayed as an h1 element in the header section., planningThoughtAboutTheActionIWillTake: I will verify if the title 'todos' is displayed by checking the presence of the h1 element with the text 'todos'.
✔ 3. Check if the input box with placeholder 'What needs to be done?' is present
  3.1) action: markSpecAsComplete, reason: The spec passed, fullProseExplanationOfReasoning100charmax: The input box with the placeholder 'What needs to be done?' is present in the HTML snapshot., planningThoughtAboutTheActionIWillTake: I will check if the input box with the placeholder 'What needs to be done?' is present in the HTML snapshot.
✔ 4. Check if a new todo item can be added
  4.1) action: clickOn, cssSelector: input.new-todo, nth: 0, planningThoughtAboutTheActionIWillTake: I will move the mouse cursor to the input field to add a new todo item.
  4.2) action: keyboardInputString, cssSelector: input.new-todo, nth: 0, string: Buy groceries, planningThoughtAboutTheActionIWillTake: I will type a new todo item into the input field.
  4.3) action: keyboardInputSingleKey, cssSelector: input.new-todo, nth: 0, key: Enter, planningThoughtAboutTheActionIWillTake: I will press the Enter key to add the new todo item.
  4.4) action: markSpecAsComplete, reason: The spec passed, fullProseExplanationOfReasoning100charmax: The new todo item 'Buy groceries' was successfully added to the list., planningThoughtAboutTheActionIWillTake: I will mark the spec as complete because the new todo item 'Buy groceries' has been successfully added.
✔ 5. Check if a todo item can be marked as completed
  5.1) action: keyboardInputString, cssSelector: input.new-todo, nth: 0, string: Test Todo Item, planningThoughtAboutTheActionIWillTake: To check if a todo item can be marked as completed, I first need to add a new todo item. I will type a new todo item in the input field and press Enter.
  5.2) action: keyboardInputSingleKey, cssSelector: input.new-todo, nth: 0, key: Enter, planningThoughtAboutTheActionIWillTake: I need to press Enter to add the new todo item to the list.
  5.3) action: clickOn, cssSelector: input.toggle, nth: 0, planningThoughtAboutTheActionIWillTake: Now that the todo item is added, I will mark it as completed by clicking the checkbox next to the todo item.
  5.4) action: markSpecAsComplete, reason: The spec passed, fullProseExplanationOfReasoning100charmax: The todo item was successfully marked as completed., planningThoughtAboutTheActionIWillTake: The todo item has been marked as completed, as indicated by the strikethrough text and the checkbox being checked. I will mark the spec as complete.
...
autospec passed for https://todomvc.com/examples/react/dist/

貢献する

autospec はオープンソースであり、貢献者を歓迎します。開始するには、Issue またはプルリクエストを開いてください。

貢献者

ライセンス

このプロジェクトは MIT ライセンスに基づいてライセンスされています。詳細については、LICENSE ファイルを参照してください。