LLM Generated web and Playwright E2E Testing
1.0.0
Este proyecto es un experimento centrado en usar LLMS (CHATGPT 4, Claude) para generar el código HTML, CSS y JavaScript que cumple con los requisitos del usuario a través de la solicitud.
Después de elaborar manualmente los scripts de prueba de dramaturgo por parte de los experimentadores, las indicaciones se otorgan a los LLM para generar scripts de prueba de dramaturgo que pueden cubrir completamente todos los requisitos del usuario.
Se comparan los scripts de dramaturgo manualmente elaborados y generados, y se basan en los resultados, se analiza la viabilidad de usar LLM para generar páginas web puramente front-end y generar automáticamente scripts de prueba E2E.
Habrá un total de cuatro experimentos independientes (Test1 ~ Test4), con cada prueba realizada por un desarrollador diferente. Cada experimento tendrá una tarea diferente, es decir, requisitos del usuario, que consiste en tareas relacionadas con la web que se pueden resolver utilizando HTML, CSS y JavaScript. Las tareas se proporcionan en un archivo PDF ubicado en cada carpeta de prueba.
El experimento se dividirá en las siguientes tres tareas :
Descripción de la tarea:
Dado que se probarán dos LLM (CHATGPT-4, Claude), el LLM a probar se designará según el experimento. Las indicaciones se otorgarán al LLM asignado, y estas indicaciones deben incluir todos los requisitos de la tarea, como el diseño de la interfaz de usuario, los patrones de interacción y la funcionalidad como se describe en la tarea. Las indicaciones deben seguir una estructura narrativa similar a la historia de un usuario.
Cada mejora significativa en los resultados y las indicaciones utilizadas deben documentarse en el archivo prompts_record.md para un análisis posterior. Las pruebas continuarán hasta que el código generado por LLM cumpla con todos los requisitos de la tarea (inicialmente juzgado manualmente).
Entregables:
prompts_record.md ) que documenta cada mejora significativa y las indicaciones utilizadas.Descripción de la tarea:
Usando el marco de los dramaturgos, escriba una prueba E2E para la tarea dada en TypeScript. Este script de prueba debe verificar que el código generado por la LLM cumpla con los requisitos. Además, se requiere instruir a la LLM que agregue los atributos data-testid y aria-label a las etiquetas HTML relevantes, y estos atributos deben usarse como selectores en la prueba, en lugar de selectores CSS (el objetivo principal es familiarizar a los participantes con el uso de pruebas automatizadas).
Entregables:
Descripción de la tarea:
Se darán indicaciones al LLM asignado para generar un script de prueba E2E en TypeScript usando Playwright. Este script de prueba debe poder verificar que se cumplan todos los requisitos de la tarea. Similar a la primera tarea, cada mejora significativa y las indicaciones utilizadas deben documentarse en prompts_record.md para su análisis.
Entregables:
prompts_record.md ) que documenta cada mejora significativa y las indicaciones utilizadas. Yuankai619 para test1
Owen0806 para test2
zihan0221 para test3
Deeveer para test4
Instantáneas de cada script de prueba de dramaturgo: https://yuankai619.github.io/llm-generated-web-and-playwright-e2e-testing/
| prueba | ¿La página web cumple con los requisitos? | Si el script de prueba cubre completamente la prueba |
|---|---|---|
| prueba1 | ✅ | ✅ |
| test2 | ✅ | ✅ |
| test3 | ✅ | ✅ |
| test4 | ✅ | ✅ |
| prueba | Número de iteraciones rápidas dadas a la LLM para generar Web | Número de iteraciones rápidas dadas a la LLM para generar script de prueba |
|---|---|---|
| prueba1 | 4 | 5 |
| test2 | 3 | 2 |
| test3 | 3 | 5 |
| test4 | 2 | 1 |
Según los resultados de las cuatro pruebas, podemos concluir que los LLM actuales son capaces de generar iterativamente el código web que cumple con los requisitos bajo supervisión humana. Además, pueden generar marcos de prueba E2E de dramaturgo correspondientes en función de los requisitos dados y los marcos especificados. Sin embargo, la supervisión humana y la iteración consistentes son esenciales para lograr resultados satisfactorios.
Test1 sirve como un excelente ejemplo. La tarea requería "aleatoriedad", que presentó un desafío para la LLM en la generación de pruebas que podrían manejar efectivamente este aspecto. Además, si se escribieron retrasos intencionales en el JavaScript, las pruebas generadas a menudo no pudieron dar cuenta de ellas correctamente.
Por lo tanto, si el objetivo es que las LLM generen pruebas automáticamente en función del código fuente y los requisitos, también se debe considerar el desafío de distinguir los errores en las pruebas de los errores en el código en sí. Esta es un área que requiere más exploración.
