genai playwright demo

GenAI Playwright のデモ ?

Playwright テストを生成しますか? Azure OpenAI を使用する

説明

1. システム プロンプトの構成: モデルが Playwright コード ジェネレーターとして機能するように指示するシステム プロンプトを設定し、ルールと予想される出力例を提供します。

2. ユーザー プロンプトの構成: テスト ステップを生成するためのユーザー プロンプトを定義します。

3. Send Request : Playwright テスト コードを生成するためのプロンプトを使用して、Azure OpenAI の GPT-4 モデルにリクエストを送信します。

4. Parse Response : 応答を解析し、Playwright テストとして保存します。

5. テスト実行のトリガー: 通常の Playwright テストとしてテストを実行します。

6. 結果の表示: 通常どおり、 npx playwright show-reportコマンドを使用して、Playwright の実行結果を表示します。

前提条件

• Node.js
• Visual Studio コード
• Azure サブスクリプション
• Azure サブスクリプションの Azure OpenAI サービス
• gpt-35-turboまたはgpt-4モデルがデプロイされた Azure OpenAI Service リソース
• 詳細: Azure OpenAI の前提条件

説明

• OpenAI に指示とテスト手順に基づいて Playwright テスト コードを生成するように指示する
• OpenAI が生成した応答を解析し、 /tests/フォルダー内の Playwright Test ファイルに保存します。
• npm testコマンドを使用して、プログラムから生成された Playwright テストを自動的に実行します
• 実行結果の表示、 npx playwright show-reportコマンドによる結果の起動

リソース：

クイックスタート: Azure OpenAI Service で GPT-35-Turbo および GPT-4 の使用を開始する

実行するには:

• ローカル環境変数を設定します (詳細については、上記のクイックスタートリンクを参照)

 AZURE_OPENAI_ENDPOINT
AZURE_OPENAI_API_KEY
AZURE_OPENAI_DEPLOYMENT_NAME

• このリポジトリのクローンをローカル マシンに作成します
• VSCode でリポジトリ プロジェクトを開き、新しいターミナル ウィンドウを開きます
• npm installコマンドを実行して依存関係をインストールします。
• npm i --save-dev @playwright/testコマンドを実行して、Playwright の最新バージョンをインストールします
• コマンド: node PlaywrightTestGenAI.jsを使用してプロジェクトを実行します。
• コンソールで実行ログを表示し、完了するまで待ちます。数秒 (最大 1 分) かかる場合があります。
• Playwright テストは自動的に起動します
• 完了したら、コマンドnpx playwright show-report実行して、Playwright テストの結果を表示します。

幸運を！ ?

注:

• 実行中に、新しいテスト ファイル ( genai-test-2404231521.spec.jsが生成されます。
• genai-testで始まる以前に生成されたファイルは、 /tests-bkpフォルダーにバックアップされます。
• 実行ごとに新しいテスト ファイルが生成され、以前のファイルが/tests-bkpフォルダーにバックアップされます。

ゼロステップのデモ

• https://zerostep.com/ でアカウントを登録し、ZeroStep API Key (トークン) を取得します。
• $ export ZEROSTEP_TOKEN="<your token here>"を設定するか、システム環境変数に保存します
• npm test ZeroStep-test.spec.jsコマンドを使用して ZeroStep ベースのテストを実行します。
• 完了したら、コマンドnpx playwright show-report実行して、Playwright テストの結果を表示します。