LLM Generated web and Playwright E2E Testing

LLM-generated-web-and-playwright-e2eテスト

導入

このプロジェクトは、LLMS（CHATGPT 4、Claude）を使用して、プロンプトを通じてユーザーの要件を満たすHTML、CSS、およびJavaScriptコードを生成することに焦点を当てた実験です。

実験者による劇作家のテストスクリプトを手動で作成した後、すべてのユーザー要件を完全にカバーできる劇作家テストスクリプトを生成するために、プロンプトがLLMSに与えられます。

手動で作成され生成された劇作家スクリプトが比較され、結果に基づいて、LLMを使用して純粋にフロントエンドWebページを生成し、E2Eテストスクリプトを自動的に生成する可能性を分析します。

実験セットアップ

合計4つの独立した実験（TEST1〜TEST4）があり、各テストは異なる開発者によって実施されます。各実験には、HTML、CSS、およびJavaScriptを使用して解決できるWeb関連のタスクで構成される、異なるタスク、すなわちユーザー要件があります。タスクは、各テストフォルダーにあるPDFファイルで提供されます。

実験は、次の3つのタスクに分けられます。

1。LLM生成された完全なWebページプロンプトテスト

タスクの説明：

2つのLLM（ChatGPT-4、Claude）がテストされるため、テストするLLMは実験に従って指定されます。プロンプトは割り当てられたLLMに与えられ、これらのプロンプトは、タスクで説明されているように、UI設計、相互作用パターン、機能性など、タスクのすべての要件を含める必要があります。プロンプトは、ユーザーストーリーと同様の物語構造に従う必要があります。

結果の各大幅な改善と使用されるプロンプトは、後の分析のためにprompts_record.mdファイルに文書化する必要があります。テストは、LLM生成コードがタスクのすべての要件を満たすまで続きます（最初は手動で審査されます）。

成果物：

• それぞれの大幅な改善と使用されるプロンプトを文書化するMarkdownファイル（ prompts_record.md ）。
• タスクの要件を満たすWebページコード（HTML、CSS、JavaScript）。

2。劇作家のテストスクリプトを書く

タスクの説明：

Playwright Frameworkを使用して、TypeScriptで指定されたタスクのE2Eテストを作成します。このテストスクリプトは、LLMによって生成されたコードが要件を満たしていることを確認する必要があります。さらに、LLMにdata-testidおよびaria-label属性を関連するHTMLタグに追加するよう指示する必要があり、これらの属性はCSSセレクターではなく、テストのセレクターとして使用する必要があります（主な目標は、自動化されたテストのためにPlaywrightを使用することで参加者を慣れさせることです）。

成果物：

• Playwrightを使用して書かれたTypeScriptE2Eテストスクリプト。

3。LLM生成された劇作家テストスクリプト

タスクの説明：

Playwrightを使用してTypeScriptでE2Eテストスクリプトを生成するために、割り当てられたLLMにプロンプ​​トが与えられます。このテストスクリプトは、すべてのタスクの要件が満たされていることを確認できるはずです。最初のタスクと同様に、使用されるそれぞれの大幅な改善とプロンプトは、分析のためにprompts_record.mdに文書化する必要があります。

成果物：

• それぞれの大幅な改善と使用されるプロンプトを文書化するMarkdownファイル（ prompts_record.md ）。
• タスクの要件を満たすLLM-generated TypeScript E2Eテストスクリプト。

実験テスター

test1のYuankai619

test2のowen0806

test3のZihan0221

test4用のdeeveer

実験結果

各劇作家のテストスクリプトのスナップショット：https：//yuankai619.github.io/llm-generated-web-and-playwright-e2e-testing/

テスト	Webページは要件を満たしていますか	テストスクリプトがテストを完全にカバーするかどうか
テスト1	✅	✅
テスト2	✅	✅
テスト3	✅	✅
テスト4	✅	✅

テスト	Webを生成するためにLLMに与えられた迅速な反復の数	テストスクリプトを生成するためにLLMに与えられた迅速な反復の数
テスト1	4	5
テスト2	3	2
テスト3	3	5
テスト4	2	1

結論

4つのテストの結果に基づいて、現在のLLMは、人間の監督下での要件を満たすWebコードを繰り返し生成できると結論付けることができます。さらに、指定された要件と指定されたフレームワークに基づいて、対応する劇作家E2Eテストフレームワークを生成できます。ただし、満足のいく結果を達成するには、一貫した人間の監視と反復が不可欠です。

test1は主要な例として機能します。タスクには「ランダム性」が必要でした。これは、この側面を効果的に処理できるテストを生成する際にLLMに課題を提示しました。さらに、意図的な遅延がJavaScriptに書き込まれた場合、生成されたテストはしばしばそれらを正しく説明できなかった。

したがって、目標がLLMSにソースコードと要件に基づいてテストを自動的に生成することである場合、コード自体のエラーからテストのエラーを区別するという課題も考慮する必要があります。これは、さらなる調査が必要な領域です。