LLM Generated web and Playwright E2E Testing

LLM ที่สร้างขึ้น-web-and-playwright-e2e-testing

การแนะนำ

โครงการนี้เป็นการทดลองที่มุ่งเน้นการใช้ LLMS (CHATGPT 4, Claude) เพื่อสร้าง HTML, CSS และ JavaScript Code ที่ตรงตามข้อกำหนดของผู้ใช้ผ่านการแจ้งเตือน

หลังจากการสร้างสคริปต์การทดสอบนักเขียนบทละครด้วยตนเองโดยผู้ทดลองแล้วจะได้รับการแจ้งเตือนจาก LLM เพื่อสร้างสคริปต์ทดสอบนักเขียนบทละครที่สามารถครอบคลุมความต้องการของผู้ใช้ทั้งหมดได้อย่างเต็มที่

มีการเปรียบเทียบสคริปต์นักเขียนบทละครที่สร้างขึ้นด้วยตนเองและสร้างขึ้นด้วยตนเองและขึ้นอยู่กับผลลัพธ์ความเป็นไปได้ของการใช้ LLM เพื่อสร้างเว็บเพจส่วนหน้าอย่างหมดจดและสร้างสคริปต์ทดสอบ E2E โดยอัตโนมัติ

การตั้งค่าการทดลอง

จะมี การทดลองอิสระทั้งหมดสี่ครั้ง (TEST1 ~ TEST4) โดยการทดสอบแต่ละครั้งที่ดำเนินการโดยนักพัฒนาที่แตกต่างกัน การทดลองแต่ละครั้งจะมีงานที่แตกต่างเช่นข้อกำหนดของผู้ใช้ประกอบด้วยงานที่เกี่ยวข้องกับเว็บที่สามารถแก้ไขได้โดยใช้ HTML, CSS และ JavaScript งานมีให้ในไฟล์ PDF ที่อยู่ในแต่ละโฟลเดอร์ทดสอบ

การทดลองจะถูกแบ่งออกเป็น สามงาน ต่อไปนี้:

1. การทดสอบพรอมต์หน้าเว็บเต็มรูปแบบ LLM

คำอธิบายงาน:

เนื่องจาก LLM สองตัว (CHATGPT-4, Claude) จะถูกทดสอบ LLM ที่จะทดสอบจะถูกกำหนดตามการทดลอง พรอมต์จะมอบให้กับ LLM ที่ได้รับมอบหมายและพรอมต์เหล่านี้จำเป็นต้องรวมข้อกำหนดทั้งหมดของงานเช่นการออกแบบ UI รูปแบบการโต้ตอบและการทำงานตามที่อธิบายไว้ในงาน พรอมต์ควรเป็นไปตามโครงสร้างการเล่าเรื่องคล้ายกับเรื่องราวของผู้ใช้

การปรับปรุงอย่างมีนัยสำคัญในผลลัพธ์และการแจ้งเตือนที่ใช้ควรได้รับการบันทึกไว้ในไฟล์ prompts_record.md สำหรับการวิเคราะห์ในภายหลัง การทดสอบจะดำเนินต่อไปจนกว่ารหัสที่สร้างโดย LLM จะตรงกับข้อกำหนดทั้งหมดของงาน (ตัดสินด้วยตนเองในขั้นต้น)

ส่งมอบ:

• ไฟล์ Markdown ( prompts_record.md ) บันทึกการปรับปรุงที่สำคัญแต่ละครั้งและการแจ้งเตือนที่ใช้
• รหัสเว็บเพจ (HTML, CSS, JavaScript) ที่ตรงตามข้อกำหนดของงาน

2. การเขียนสคริปต์การทดสอบนักเขียนบทละคร

คำอธิบายงาน:

การใช้เฟรมเวิร์กนักเขียนบทละครเขียนการทดสอบ E2E สำหรับงานที่กำหนดเป็น typeScript สคริปต์ทดสอบนี้ควรตรวจสอบว่ารหัสที่สร้างโดย LLM ตรงตามข้อกำหนด นอกจากนี้จำเป็นต้องสั่งให้ LLM เพิ่มแอตทริบิวต์ data-testid และ aria-label ลงในแท็ก HTML ที่เกี่ยวข้องและคุณลักษณะเหล่านี้ควรใช้เป็นตัวเลือกในการทดสอบแทนที่จะเลือก CSS ตัวเลือก (เป้าหมายหลักคือการทำความคุ้นเคยกับผู้เข้าร่วม

ส่งมอบ:

• สคริปต์ทดสอบ TypeScript E2E ที่เขียนโดยใช้นักเขียนบทละคร

3. สคริปต์ทดสอบนักเขียนบทละครที่สร้างขึ้น LLM

คำอธิบายงาน:

พรอมต์จะถูกมอบให้กับ LLM ที่ได้รับมอบหมายเพื่อสร้างสคริปต์ทดสอบ E2E ใน typeScript โดยใช้นักเขียนบทละคร สคริปต์ทดสอบนี้ควรจะสามารถตรวจสอบได้ว่าเป็นไปตามข้อกำหนดของงานทั้งหมด เช่นเดียวกับงานแรกการปรับปรุงที่สำคัญแต่ละครั้งและการแจ้งเตือนที่ใช้ควรได้รับการบันทึกไว้ใน prompts_record.md สำหรับการวิเคราะห์

ส่งมอบ:

• ไฟล์ Markdown ( prompts_record.md ) บันทึกการปรับปรุงที่สำคัญแต่ละครั้งและการแจ้งเตือนที่ใช้
• สคริปต์ทดสอบ TypeScript E2E ที่สร้างขึ้น LLM ซึ่งตรงตามข้อกำหนดของงาน

ผู้ทดสอบทดลอง

yuankai619 สำหรับ test1

OWEN0806 สำหรับ test2

Zihan0221 สำหรับ test3

deeveer สำหรับ test4

ผลการทดลอง

ภาพรวมของสคริปต์การทดสอบนักเขียนบทละครแต่ละรายการ: https://yuankai619.github.io/llm-enerated-web-and-playwright-e2e-testing/

ทดสอบ	หน้าเว็บตรงตามข้อกำหนดหรือไม่	ไม่ว่าสคริปต์ทดสอบจะครอบคลุมการทดสอบอย่างเต็มที่หรือไม่
ทดสอบ 1
Test2
ทดสอบ 3
ทดสอบ 4

ทดสอบ	จำนวนการวนซ้ำพรอมต์ที่มอบให้กับ LLM สำหรับการสร้างเว็บ	จำนวนการวนซ้ำพรอมต์ที่มอบให้กับ LLM สำหรับการสร้างสคริปต์ทดสอบ
ทดสอบ 1	4	5
Test2	3	2
ทดสอบ 3	3	5
ทดสอบ 4	2	1

บทสรุป

จากผลการทดสอบสี่ครั้งเราสามารถสรุปได้ว่า LLM ปัจจุบันสามารถสร้างรหัสเว็บซ้ำ ๆ ที่ตรงตามข้อกำหนดภายใต้การดูแลของมนุษย์ นอกจากนี้พวกเขาสามารถสร้างกรอบการทดสอบนักเขียนบทละครที่สอดคล้องกันตามข้อกำหนดที่กำหนดและเฟรมเวิร์กที่ระบุ อย่างไรก็ตามการกำกับดูแลของมนุษย์และการทำซ้ำที่สอดคล้องกันเป็นสิ่งจำเป็นเพื่อให้ได้ผลลัพธ์ที่น่าพอใจ

Test1 ทำหน้าที่เป็นตัวอย่างสำคัญ งานที่จำเป็นต้องใช้ "การสุ่ม" ซึ่งนำเสนอความท้าทายสำหรับ LLM ในการสร้างการทดสอบที่สามารถจัดการกับแง่มุมนี้ได้อย่างมีประสิทธิภาพ นอกจากนี้หากความล่าช้าโดยเจตนาถูกเขียนลงในจาวาสคริปต์การทดสอบที่สร้างขึ้นมักจะล้มเหลวในการบัญชีอย่างถูกต้อง

ดังนั้นหากเป้าหมายคือการมี LLMs สร้างการทดสอบโดยอัตโนมัติตามซอร์สโค้ดและข้อกำหนดเราจะต้องพิจารณาความท้าทายของการแยกข้อผิดพลาดในการทดสอบจากข้อผิดพลาดในรหัสเอง นี่คือพื้นที่ที่ต้องมีการสำรวจเพิ่มเติม