LLM Generated web and Playwright E2E Testing
1.0.0
Ce projet est une expérience axée sur l'utilisation de LLMS (Chatgpt 4, Claude) pour générer du code HTML, CSS et JavaScript qui répond aux exigences des utilisateurs grâce à une incitation.
Après avoir fabriqué manuellement les scripts de test du dramaturge par les expérimentateurs, des invites sont ensuite données aux LLM pour générer des scripts de test du dramaturge qui peuvent entièrement couvrir toutes les exigences des utilisateurs.
Les scripts dramaturges fabriqués manuellement et générés sont comparés et sur la base des résultats, la faisabilité de l'utilisation de LLMS pour générer des pages Web purement frontaux et générer automatiquement des scripts de test E2E est analysée.
Il y aura un total de quatre expériences indépendantes (test1 ~ test4), chaque test effectué par un développeur différent. Chaque expérience aura une tâche différente, c'est-à-dire les exigences des utilisateurs, composée de tâches Web qui peuvent être résolues à l'aide de HTML, CSS et JavaScript. Les tâches sont fournies dans un fichier PDF situé dans chaque dossier de test.
L'expérience sera divisée en trois tâches suivantes:
Description de la tâche:
Étant donné que deux LLM (ChatGPT-4, Claude) seront testés, le LLM à tester sera désigné conformément à l'expérience. Des invites seront données au LLM assigné, et ces invites doivent inclure toutes les exigences de la tâche, telles que la conception de l'interface utilisateur, les modèles d'interaction et les fonctionnalités décrites dans la tâche. Les invites doivent suivre une structure narrative similaire à un utilisateur.
Chaque amélioration significative des résultats et les invites utilisées doivent être documentées dans le fichier prompts_record.md pour une analyse ultérieure. Les tests se poursuivront jusqu'à ce que le code généré par LLM réponde à toutes les exigences de la tâche (initialement jugés manuellement).
Livrables:
prompts_record.md ) documentant chaque amélioration significative et les invites utilisées.Description de la tâche:
À l'aide du framework du dramaturge, écrivez un test E2E pour la tâche donnée dans TypeScript. Ce script de test doit vérifier que le code généré par le LLM répond aux exigences. De plus, il est nécessaire de demander au LLM d'ajouter des attributs data-testid et aria-label aux balises HTML pertinentes, et ces attributs doivent être utilisés comme sélecteurs dans le test, plutôt que les sélecteurs CSS (l'objectif principal est de familiariser les participants avec l'utilisation du dramatique pour les tests automatisés).
Livrables:
Description de la tâche:
Des invites seront données au LLM assigné pour générer un script de test E2E dans TypeScript à l'aide du dramaturge. Ce script de test devrait être en mesure de vérifier que toutes les exigences de la tâche sont satisfaites. Semblable à la première tâche, chaque amélioration significative et les invites utilisées doivent être documentées dans prompts_record.md pour l'analyse.
Livrables:
prompts_record.md ) documentant chaque amélioration significative et les invites utilisées. Yuankai619 pour test1
OWEN0806 pour test2
zihan0221 pour test3
Deeveer pour test4
Instantané de chaque script de test du dramaturge: https://yuankai619.github.io/llm-generated-web-and-playwright-e2e-testing/
| test | La page Web répond-elle aux exigences | Si le script de test couvre pleinement les tests |
|---|---|---|
| test1 | ✅ | ✅ |
| test2 | ✅ | ✅ |
| test3 | ✅ | ✅ |
| test4 | ✅ | ✅ |
| test | Nombre d'itérations rapides données au LLM pour générer du Web | Nombre d'itérations rapides données au LLM pour générer le script de test |
|---|---|---|
| test1 | 4 | 5 |
| test2 | 3 | 2 |
| test3 | 3 | 5 |
| test4 | 2 | 1 |
Sur la base des résultats des quatre tests, nous pouvons conclure que les LLM actuels sont capables de générer un code Web de manière itérative qui répond aux exigences sous supervision humaine. De plus, ils peuvent générer des frameworks de test E2E du dramaturge correspondant en fonction des exigences données et des cadres spécifiés. Cependant, une surveillance et une itération humaines cohérentes sont essentielles pour obtenir des résultats satisfaisants.
TEST1 sert de premier exemple. La tâche nécessitait un «hasard», qui a présenté un défi pour le LLM dans la génération de tests qui pourraient gérer efficacement cet aspect. De plus, si des retards intentionnels étaient écrits dans le JavaScript, les tests générés n'ont souvent pas réussi à les tenir correctement.
Par conséquent, si l'objectif est de faire générer automatiquement des LLMS générés par le code source et les exigences, il faut également tenir compte du défi de distinguer les erreurs dans les tests des erreurs dans le code lui-même. Il s'agit d'un domaine qui nécessite une exploration plus approfondie.
