LLM Generated web and Playwright E2E Testing

LLM-generiertes Web-und-Playwright-e2e-Test

Einführung

Dieses Projekt ist ein Experiment, das sich auf die Verwendung von LLMs (Chatgpt 4, Claude) konzentriert, um HTML-, CSS- und JavaScript -Code zu generieren, der die Benutzeranforderungen durch Aufforderung erfüllt.

Nach der manuellen Herstellung von Dramatikern -Testskripten durch die Experimentatoren werden die LLMs Angaben zur Erstellung von Dramatikern -Testskripten zur Verfügung gestellt, die alle Benutzeranforderungen vollständig decken können.

Die manuell gestalteten und generierten Dramatiker werden verglichen, und basierend auf den Ergebnissen wird die Machbarkeit der Verwendung von LLMs zur Generierung reiner Front-End-Webseiten und der automatischen Generierung von E2E-Testskripten analysiert.

Experimenteller Setup

Es wird insgesamt vier unabhängige Experimente (Test1 ~ test4) geben, wobei jeder Test von einem anderen Entwickler durchgeführt wird. Jedes Experiment hat eine andere Aufgabe, dh Benutzeranforderungen, die aus webbezogenen Aufgaben bestehen, die mit HTML, CSS und JavaScript gelöst werden können. Die Aufgaben sind in einer PDF -Datei in jedem Testordner bereitgestellt.

Das Experiment wird in die folgenden drei Aufgaben unterteilt:

1. LLM generierte vollständige Webseite Eingabeaufforderungstest

Aufgabenbeschreibung:

Da zwei LLMs (Chatgpt-4, Claude) getestet werden, werden die zu testenden LLM gemäß dem Experiment benannt. Eingabeaufforderungen werden an die zugewiesene LLM übertragen, und diese Eingabeaufforderungen müssen alle Anforderungen der Aufgabe enthalten, wie z. B. das UI -Design, die Interaktionsmuster und die in der Aufgabe beschriebenen Funktionalität. Die Eingabeaufforderungen sollten einer narrativen Struktur folgen, die einer Benutzergeschichte ähnelt.

Jede signifikante Verbesserung der Ergebnisse und die verwendeten Eingabeaufforderungen sollten in der Datei prompts_record.md für eine spätere Analyse dokumentiert werden. Die Tests werden fortgesetzt, bis der LLM-generierte Code alle Anforderungen der Aufgabe erfüllt (ursprünglich manuell beurteilt).

Ergebnisse:

• Eine Markdown -Datei ( prompts_record.md ), die jede signifikante Verbesserung und die verwendeten Eingabeaufforderungen dokumentiert.
• Webseitencode (HTML, CSS, JavaScript), das den Anforderungen der Aufgaben entspricht.

2. Schreiben von Dramatiker -Testskripten

Aufgabenbeschreibung:

Schreiben Sie unter Verwendung des Dramatiker -Frameworks einen E2E -Test für die angegebene Aufgabe in TypeScript. Dieses Testskript sollte überprüfen, ob der vom LLM generierte Code den Anforderungen entspricht. Darüber hinaus müssen die LLM die relevanten HTML-Tags angewiesen werden, data-testid und aria-label Attribute hinzuzufügen, und diese Attribute sollten als Selektoren im Test verwendet werden, anstatt CSS-Selektoren (das Hauptziel besteht darin, die Teilnehmer mit der Verwendung von Dramatikern für automatisierte Tests vertraut zu machen).

Ergebnisse:

• Typscript E2E -Testskript mit Dramatikern geschrieben.

3. LLM-generiertes Dramatiker-Testskript

Aufgabenbeschreibung:

Eingabeaufforderungen werden an das zugewiesene LLM zur Verfügung gestellt, um ein E2E -Testskript in TypeScript mit Dramatikern zu generieren. Dieses Testskript sollte in der Lage sein, zu überprüfen, ob alle Anforderungen der Aufgaben erfüllt sind. Ähnlich wie bei der ersten Aufgabe sollten jede signifikante Verbesserung und die verwendeten Eingabeaufforderungen für die Analyse in prompts_record.md dokumentiert werden.

Ergebnisse:

• Eine Markdown -Datei ( prompts_record.md ), die jede signifikante Verbesserung und die verwendeten Eingabeaufforderungen dokumentiert.
• Das LLM-generierte Typscript E2E-Testskript, das den Anforderungen der Aufgabe entspricht.

Experimententester

Yuankai619 für test1

Owen0806 für test2

Zihan0221 für test3

Deeveer für test4

Experimentelles Ergebnis

Schnappschüsse jedes Dramatikers-Testskript

prüfen	Erfüllt die Webseite die Anforderungen	Ob das Testskript den Test vollständig abdeckt
Test1	✅	✅
Test2	✅	✅
Test3	✅	✅
test4	✅	✅

prüfen	Anzahl der sofortigen Iterationen, die dem LLM zum Generieren von Web übergeben wurden	Anzahl der sofortigen Iterationen, die dem LLM zum Generieren von Testskript zur Verfügung gestellt wurden
Test1	4	5
Test2	3	2
Test3	3	5
test4	2	1

Abschluss

Basierend auf den Ergebnissen der vier Tests können wir schließen, dass aktuelle LLMs in der Lage sind, Webcode iterativ zu generieren, der den Anforderungen unter menschlicher Aufsicht entspricht. Darüber hinaus können sie entsprechende Dramatiker E2E -Test -Frameworks basierend auf den angegebenen Anforderungen und bestimmten Frameworks erzeugen. Einheitliche menschliche Aufsicht und Iteration sind jedoch wichtig, um zufriedenstellende Ergebnisse zu erzielen.

Test1 dient als Hauptbeispiel. Die Aufgabe erforderte "Zufälligkeit", die eine Herausforderung für das LLM bei der Erzeugung von Tests darstellte, die diesen Aspekt effektiv behandeln könnten. Wenn absichtliche Verzögerungen in das JavaScript geschrieben wurden, konnten die generierten Tests diese häufig nicht richtig berücksichtigen.

Wenn das Ziel darin besteht, dass LLMs automatisch Tests basierend auf Quellcode und Anforderungen generieren, muss man auch die Herausforderung berücksichtigen, Fehler in den Tests von Fehlern im Code selbst zu unterscheiden. Dies ist ein Bereich, der eine weitere Erkundung erfordert.