LLM Generated web and Playwright E2E Testing
1.0.0
이 프로젝트는 LLMS (Chatgpt 4, Claude)를 사용하여 프롬프트를 통해 사용자 요구 사항을 충족하는 HTML, CSS 및 JavaScript 코드를 생성하는 데 중점을 둔 실험입니다.
실험자들이 극작가 테스트 스크립트를 수동으로 제작 한 후, 프롬프트는 LLMS에 제공되어 모든 사용자 요구 사항을 완전히 다룰 수있는 극작가 테스트 스크립트를 생성합니다.
수동으로 제작되고 생성 된 극작 스크립트는 비교되며 결과에 따라 LLM을 사용하여 순수한 프론트 엔드 웹 페이지를 생성하고 E2E 테스트 스크립트를 자동으로 생성하는 타당성을 분석합니다.
총 4 개의 독립적 인 실험 (Test1 ~ test4)이 있으며 각 테스트는 다른 개발자가 수행합니다. 각 실험은 HTML, CSS 및 JavaScript를 사용하여 해결할 수있는 웹 관련 작업으로 구성된 다른 작업 (즉, 사용자 요구 사항이 있습니다. 작업은 각 테스트 폴더에있는 PDF 파일로 제공됩니다.
실험은 다음 세 가지 작업 으로 나뉩니다.
작업 설명 :
두 개의 LLM (ChatGpt-4, Claude)이 테스트되므로 테스트 할 LLM은 실험에 따라 지정됩니다. 지정된 LLM에 프롬프트가 제공되며, 이러한 프롬프트는 작업에 설명 된 UI 설계, 상호 작용 패턴 및 기능과 같은 작업의 모든 요구 사항을 포함해야합니다. 프롬프트는 사용자 스토리와 유사한 이야기 구조를 따라야합니다.
결과와 사용 된 프롬프트의 각각의 상당한 개선은 나중에 분석을 위해 prompts_record.md 파일에 문서화되어야합니다. LLM 생성 코드가 작업의 모든 요구 사항을 충족 할 때까지 테스트는 계속됩니다 (처음에는 수동으로 판단).
결과물 :
prompts_record.md ).작업 설명 :
극작가 프레임 워크를 사용하여 TypeScript에서 주어진 작업에 대한 E2E 테스트를 작성하십시오. 이 테스트 스크립트는 LLM에서 생성 한 코드가 요구 사항을 충족하는지 확인해야합니다. 또한 LLM에 관련 HTML 태그에 data-testid 및 aria-label 속성을 추가하도록 지시해야하며, 이러한 속성은 CSS 선택기보다는 테스트에서 선택기로 사용해야합니다 (주요 목표는 자동화 테스트를 위해 Playwright를 사용하여 참가자를 익히는 것입니다).
결과물 :
작업 설명 :
Praywright를 사용하여 TypeScript에서 E2E 테스트 스크립트를 생성하기 위해 지정된 LLM에 프롬프트가 제공됩니다. 이 테스트 스크립트는 모든 작업의 모든 요구 사항이 충족되었는지 확인할 수 있어야합니다. 첫 번째 작업과 유사하게, 각각의 상당한 개선 및 사용 된 프롬프트는 분석을 위해 prompts_record.md 에 문서화되어야합니다.
결과물 :
prompts_record.md ). test1 에 대한 Yuankai619
test2 용 OWEN0806
test3 의 경우 zihan0221
test4 의 Deeveer
각 극작가 테스트 스크립트의 스냅 샷 : https://yuankai619.github.io/llm-generated-web-and-playwright-e2e-testing/
| 시험 | 웹 페이지가 요구 사항을 충족합니까? | 테스트 스크립트가 테스트를 완전히 다루는 지 여부 |
|---|---|---|
| 테스트 1 | ✅ | ✅ |
| 시험 2 | ✅ | ✅ |
| 시험 3 | ✅ | ✅ |
| 테스트 4 | ✅ | ✅ |
| 시험 | 웹 생성을 위해 LLM에 제공된 신속한 반복 수 | 테스트 스크립트 생성을 위해 LLM에 제공된 신속한 반복 수 |
|---|---|---|
| 테스트 1 | 4 | 5 |
| 시험 2 | 3 | 2 |
| 시험 3 | 3 | 5 |
| 테스트 4 | 2 | 1 |
네 가지 테스트 결과를 바탕으로 현재 LLM이 인간 감독하에 요구 사항을 충족시키는 웹 코드를 반복적으로 생성 할 수 있다고 결론을 내릴 수 있습니다. 또한 주어진 요구 사항 및 지정된 프레임 워크에 따라 해당 극작가 E2E 테스트 프레임 워크를 생성 할 수 있습니다. 그러나 만족스러운 결과를 얻으려면 일관된 인간의 감독과 반복이 필수적입니다.
test1은 대표적인 예입니다. 이 작업에는 "무작위성"이 필요했으며,이 측면을 효과적으로 처리 할 수있는 테스트를 생성하는 데있어 LLM에 대한 도전을 제시했습니다. 또한 의도적 인 지연이 JavaScript에 기록 된 경우 생성 된 테스트는 종종 올바르게 설명하지 못했습니다.
따라서 LLM이 소스 코드 및 요구 사항에 따라 자동으로 테스트를 생성하는 것이 목표라면 코드 자체의 오류에서 테스트에서 오류를 구별하는 데 어려움을 겪어야합니다. 이것은 추가 탐사가 필요한 영역입니다.
