LLM Generated web and Playwright E2E Testing
1.0.0
Este projeto é um experimento focado no uso do LLMS (ChatGPT 4, Claude) para gerar código HTML, CSS e JavaScript que atenda aos requisitos do usuário por meio de promoção.
Depois de criar scripts de teste de dramaturgo manualmente pelos experimentadores, são fornecidos os prompts ao LLMS para gerar scripts de teste de dramaturgos que podem cobrir completamente todos os requisitos do usuário.
Os scripts de dramaturgo criados e gerados manualmente são comparados e, com base nos resultados, a viabilidade do uso de LLMs para gerar páginas da Web puramente front-end e gerar automaticamente scripts de teste E2E é analisado.
Haverá um total de quatro experimentos independentes (TEST1 ~ TEST4), com cada teste conduzido por um desenvolvedor diferente. Cada experimento terá uma tarefa diferente, ou seja, requisitos de usuário, consistindo em tarefas relacionadas à Web que podem ser resolvidas usando HTML, CSS e JavaScript. As tarefas são fornecidas em um arquivo PDF localizado em cada pasta de teste.
O experimento será dividido nas três tarefas a seguir:
Descrição da tarefa:
Como dois LLMs (ChatGPT-4, Claude) serão testados, o LLM a ser testado será designado de acordo com o experimento. Os avisos serão fornecidos ao LLM atribuído, e esses avisos precisam incluir todos os requisitos da tarefa, como design da interface do usuário, padrões de interação e funcionalidade, conforme descrito na tarefa. Os avisos devem seguir uma estrutura narrativa semelhante à história do usuário.
Cada melhora significativa nos resultados e os avisos utilizados deve ser documentada no arquivo prompts_record.md para análise posterior. Os testes continuarão até que o código gerado por LLM atenda a todos os requisitos da tarefa (inicialmente julgado manualmente).
Entregas:
prompts_record.md ) documentando cada melhoria significativa e os prompts utilizados.Descrição da tarefa:
Usando a estrutura do dramaturgo, escreva um teste E2E para a tarefa fornecida no TypeScript. Este script de teste deve verificar se o código gerado pelo LLM atende aos requisitos. Além disso, é necessário instruir o LLM a adicionar atributos de dados data-testid e aria-label para as tags HTML relevantes, e esses atributos devem ser usados como seletores no teste, em vez de seletores de CSS (o principal objetivo é familiarizar os participantes com o uso de dramaturgos para testes automatizados).
Entregas:
Descrição da tarefa:
Os prompts serão fornecidos ao LLM atribuído para gerar um script de teste E2E no TypeScript usando dramaturgo. Este script de teste deve poder verificar se todos os requisitos da tarefa são atendidos. Semelhante à primeira tarefa, cada melhoria significativa e os avisos utilizados devem ser documentados no prompts_record.md para análise.
Entregas:
prompts_record.md ) documentando cada melhoria significativa e os prompts utilizados. Yuankai619 para test1
OWEN0806 para test2
Zihan0221 para test3
Deeveer para test4
Instantâneos de cada script de teste dramaturgo: https://yuankai619.github.io/llm-generated-web-and-playwright-e2e-testing/
| teste | A página da web atende aos requisitos | Se o script de teste cobre totalmente o teste |
|---|---|---|
| Test1 | ✅ | ✅ |
| Test2 | ✅ | ✅ |
| Test3 | ✅ | ✅ |
| Test4 | ✅ | ✅ |
| teste | Número de iterações prontas dadas ao LLM para gerar web | Número de iterações imediatas dadas ao LLM para gerar script de teste |
|---|---|---|
| Test1 | 4 | 5 |
| Test2 | 3 | 2 |
| Test3 | 3 | 5 |
| Test4 | 2 | 1 |
Com base nos resultados dos quatro testes, podemos concluir que os LLMs atuais são capazes de gerar o código da Web iterativamente que atenda aos requisitos sob supervisão humana. Além disso, eles podem gerar estruturas de teste de dramaturgo e2e correspondentes com base nos requisitos fornecidos e nas estruturas especificadas. No entanto, a supervisão e a iteração consistentes humanas são essenciais para obter resultados satisfatórios.
O teste1 serve como um excelente exemplo. A tarefa exigia "aleatoriedade", que apresentou um desafio para o LLM na geração de testes que poderiam lidar efetivamente a esse aspecto. Além disso, se atrasos intencionais foram gravados no JavaScript, os testes gerados geralmente falham em contabilizar corretamente.
Portanto, se o objetivo é que o LLMS gerar automaticamente testes com base no código e requisitos fonte, também é preciso considerar o desafio de distinguir erros nos testes dos erros no próprio código. Esta é uma área que requer uma exploração adicional.
