LLM Generated web and Playwright E2E Testing

LLM生成的網絡和播放者-E2E測試

介紹

該項目是一個側重於使用LLM（Chatgpt 4，Claude）生成HTML，CSS和JavaScript代碼的實驗，該實驗通過提示來滿足用戶需求。

在由實驗人員手動製作劇作家測試腳本之後，然後將提示發送到LLMS，以生成可以完全滿足所有用戶需求的劇作測試腳本。

比較了手動製作和生成的劇作腳本，並根據結果，使用LLMS生成純粹的前端網頁並自動生成E2E測試腳本的可行性。

實驗設置

總共將有四個獨立的實驗（Test1〜Test4），每個測試由其他開發人員進行。每個實驗將具有不同的任務，即IE，用戶要求，由與Web相關的任務組成，可以使用HTML，CSS和JavaScript解決這些任務。任務是在每個測試文件夾中的PDF文件中提供的。

該實驗將分為以下三個任務：

1。 LLM生成的完整網頁提示測試

任務說明：

由於將測試兩個LLMS（Chatgpt-4，Claude），因此將根據實驗指定要測試的LLM。提示將給分配的LLM，這些提示需要包括任務的所有要求，例如UI設計，交互模式和任務中所述的功能。提示應遵循類似於用戶故事的敘事結構。

每種結果的重大改進和所使用的提示都應記錄在prompts_record.md文件中，以供以後分析。測試將繼續進行，直到LLM生成的代碼滿足任務的所有要求（最初由手動進行判斷）。

可交付成果：

• 記錄每個重大改進和所使用的提示的MARKDOWN文件（ prompts_record.md ）。
• 符合任務要求的網頁代碼（HTML，CSS，JavaScript）。

2。寫劇作家測試腳本

任務說明：

使用劇本框架，在打字稿中為給定的任務編寫E2E測試。該測試腳本應驗證LLM生成的代碼是否滿足要求。此外，需要指示LLM將data-testid和aria-label屬性添加到相關的HTML標籤中，並且應將這些屬性用作測試中的選擇器，而不是CSS選擇器（主要目標是使參與者熟悉使用Playwright進行自動測試的參與者）。

可交付成果：

• 使用劇作作者編寫的打字稿E2E測試腳本。

3。 LLM生成的劇作家測試腳本

任務說明：

提示將發送給分配的LLM，以使用playwright在打字稿中生成E2E測試腳本。此測試腳本應該能夠驗證滿足所有任務的所有要求。與第一個任務相似，每個重要的改進和所使用的提示都應記錄在prompts_record.md中進行分析。

可交付成果：

• 記錄每個重大改進和所使用的提示的MARKDOWN文件（ prompts_record.md ）。
• 符合任務要求的LLM生成的打字稿E2E測試腳本。

實驗測試儀

Yuankai619用於test1

Owen0806用於test2

Zihan0221用於test3

test4

實驗結果

每個劇作家測試腳本的快照：https：//yuankai619.github.io/llm-generated-web-and-playwright-e2e-testing/

測試	網頁滿足要求嗎	測試腳本是否完全涵蓋了測試
Test1	✅	✅
Test2	✅	✅
test3	✅	✅
Test4	✅	✅

測試	發給LLM生成Web的提示迭代次數	授予LLM的提示迭代數量以生成測試腳本
Test1	4	5
Test2	3	2
test3	3	5
Test4	2	1

結論

根據四個測試的結果，我們可以得出結論，當前的LLM能夠迭代生成在人類監督下滿足要求的Web代碼。此外，他們可以根據給定的要求和指定的框架生成相應的劇作E2E測試框架。但是，一致的人類監督和迭代對於獲得令人滿意的結果至關重要。

Test1是一個主要示例。該任務需要“隨機性”，這在生成可以有效處理這一方面的測試方面給LLM帶來了挑戰。此外，如果將故意延遲寫入JavaScript中，則生成的測試通常無法正確考慮它們。

因此，如果目標是讓LLMS根據源代碼和要求自動生成測試，則還必須考慮將測試中的錯誤與代碼本身中的錯誤區分開的挑戰。這是需要進一步探索的領域。