LLM Generated web and Playwright E2E Testing
1.0.0
Proyek ini adalah percobaan yang berfokus pada penggunaan LLMS (ChatGPT 4, Claude) untuk menghasilkan kode HTML, CSS, dan JavaScript yang memenuhi persyaratan pengguna melalui dorongan.
Setelah secara manual membuat skrip tes penulis naskah oleh para peneliti, prompt kemudian diberikan kepada LLM untuk menghasilkan skrip tes penulis naskah yang dapat sepenuhnya menutupi semua persyaratan pengguna.
Skrip penulis naskah yang dibuat secara manual dan dihasilkan dibandingkan, dan berdasarkan hasilnya, kelayakan menggunakan LLM untuk menghasilkan halaman web murni front-end dan secara otomatis menghasilkan skrip uji E2E dianalisis.
Akan ada total empat percobaan independen (test1 ~ test4), dengan setiap tes dilakukan oleh pengembang yang berbeda. Setiap percobaan akan memiliki tugas yang berbeda, yaitu, persyaratan pengguna, yang terdiri dari tugas terkait web yang dapat diselesaikan menggunakan HTML, CSS, dan JavaScript. Tugas disediakan dalam file PDF yang terletak di setiap folder tes.
Eksperimen akan dibagi menjadi tiga tugas berikut:
Deskripsi Tugas:
Karena dua LLM (chatgpt-4, Claude) akan diuji, LLM yang akan diuji akan ditetapkan sesuai percobaan. Prompt akan diberikan kepada LLM yang ditugaskan, dan petunjuk ini perlu memasukkan semua persyaratan tugas, seperti desain UI, pola interaksi, dan fungsionalitas seperti yang dijelaskan dalam tugas. Prompt harus mengikuti struktur naratif yang mirip dengan kisah pengguna.
Setiap peningkatan yang signifikan dalam hasil dan prompt yang digunakan harus didokumentasikan dalam file prompts_record.md untuk analisis selanjutnya. Pengujian akan berlanjut hingga kode yang dihasilkan LLM memenuhi semua persyaratan tugas (awalnya dinilai secara manual).
Hasilnya:
prompts_record.md ) yang mendokumentasikan setiap peningkatan yang signifikan dan prompt yang digunakan.Deskripsi Tugas:
Menggunakan Kerangka Playwright, tulis tes E2E untuk tugas yang diberikan dalam TypeScript. Skrip uji ini harus memverifikasi bahwa kode yang dihasilkan oleh LLM memenuhi persyaratan. Selain itu, diperlukan untuk menginstruksikan LLM untuk menambahkan atribut data-testid dan aria-label ke tag HTML yang relevan, dan atribut ini harus digunakan sebagai pemilih dalam pengujian, daripada selektor CSS (tujuan utama adalah untuk membiasakan para peserta dengan menggunakan penulis drama untuk pengujian otomatis).
Hasilnya:
Deskripsi Tugas:
Prompt akan diberikan kepada LLM yang ditugaskan untuk menghasilkan skrip uji E2E di TypeScript menggunakan Playwright. Skrip tes ini harus dapat memverifikasi bahwa semua persyaratan tugas dipenuhi. Mirip dengan tugas pertama, setiap peningkatan yang signifikan dan prompt yang digunakan harus didokumentasikan dalam prompts_record.md untuk analisis.
Hasilnya:
prompts_record.md ) yang mendokumentasikan setiap peningkatan yang signifikan dan prompt yang digunakan. Yuankai619 untuk test1
owen0806 untuk test2
Zihan0221 untuk test3
Deeveer untuk test4
Snapshots dari setiap skrip tes penulis drama: https://yuankai619.github.io/llm-generated-web-and-playwright-e2e-testing/
| tes | Apakah halaman web memenuhi persyaratan | Apakah skrip pengujian sepenuhnya mencakup pengujian |
|---|---|---|
| test1 | ✅ | ✅ |
| test2 | ✅ | ✅ |
| test3 | ✅ | ✅ |
| test4 | ✅ | ✅ |
| tes | Jumlah iterasi prompt yang diberikan kepada LLM untuk menghasilkan web | Jumlah iterasi prompt yang diberikan kepada LLM untuk menghasilkan skrip tes |
|---|---|---|
| test1 | 4 | 5 |
| test2 | 3 | 2 |
| test3 | 3 | 5 |
| test4 | 2 | 1 |
Berdasarkan hasil dari empat tes, kami dapat menyimpulkan bahwa LLM saat ini mampu menghasilkan kode web secara iteratif yang memenuhi persyaratan di bawah pengawasan manusia. Selain itu, mereka dapat menghasilkan kerangka kerja pengujian E2E penulisan yang sesuai berdasarkan persyaratan yang diberikan dan kerangka kerja yang ditentukan. Namun, pengawasan dan iterasi manusia yang konsisten sangat penting untuk mencapai hasil yang memuaskan.
Test1 berfungsi sebagai contoh utama. Tugas membutuhkan "keacakan," yang menghadirkan tantangan bagi LLM dalam menghasilkan tes yang dapat secara efektif menangani aspek ini. Selain itu, jika penundaan yang disengaja ditulis ke dalam JavaScript, tes yang dihasilkan sering gagal memperhitungkannya dengan benar.
Oleh karena itu, jika tujuannya adalah untuk memiliki LLM secara otomatis menghasilkan tes berdasarkan kode sumber dan persyaratan, seseorang juga harus mempertimbangkan tantangan membedakan kesalahan dalam tes dari kesalahan dalam kode itu sendiri. Ini adalah area yang membutuhkan eksplorasi lebih lanjut.
