Playwright 1.56 hadir dengan tiga ejen AI terbina dalam yang merancang suite ujian, menulis skrip TypeScript yang berkaitan, dan membaiki locator yang rosak secara langsung. Hasilnya: kerja keras ujian manual berubah menjadi aliran kerja berbantu AI.
Mengapa perubahan ini penting
Jurutera automasi telah lama mengikuti kitaran yang berulang: menterjemah keperluan kepada kes ujian, menulis kod skrip secara manual, menjalankannya, kemudian mengejar selector yang tidak stabil setiap kali UI berubah. Beban penyelenggaraan boleh mengatasi masa yang dijimatkan melalui automasi, terutamanya dalam pembangunan front-end yang pantas. Dengan menyematkan ejen AI secara terus ke dalam rangka kerja ujian, Playwright memendekkan kitaran “baiki-dan-jalankan” dan membolehkan jurutera fokus pada strategi ujian tahap tinggi berbanding mencari selector.
Penjelasan tiga ejen tersebut
- Planner Agent – Mengambil penerangan bahasa tabii tentang apa yang sepatutnya dilakukan oleh aplikasi, meneroka laman web secara langsung, dan menghasilkan pelan Markdown yang berstruktur. Pelan tersebut menyenaraikan aliran pengguna utama dan senario kes terpinggir (edge-case), memberikan pelan tindakan yang jelas sebelum sebarang kod ditulis.
- Generator Agent – Menggunakan pelan Markdown tersebut dan menghasilkan kod ujian TypeScript yang boleh dilaksanakan. Ia berinteraksi dengan pelayar yang sedang berjalan untuk mengesahkan bahawa selector adalah stabil, dan ia boleh mengikut Page Object Model (corak reka bentuk yang memisahkan struktur halaman daripada logik ujian) jika diarahkan.
- Healer Agent – Memantau pelaksanaan ujian; apabila kegagalan dikesan berpunca daripada perubahan UI, ia memainkan semula langkah yang gagal, memeriksa DOM yang telah dikemas kini, dan mencadangkan selector atau locator yang telah diperbetulkan. Cadangan tersebut muncul sebagai draf tampalan (patch) yang boleh diterima atau diubah suai oleh pembangun.
Ejen-ejen ini beroperasi dalam “gelung ejen” (agentic loop): Planner → Generator → Healer. Setiap langkah memberi input kepada langkah seterusnya, mewujudkan saluran paip (pipeline) yang melaras sendiri dan sentiasa selaras dengan aplikasi yang sedang diuji.
Perbezaannya dengan alatan AI generik
Model gaya sembang atau sambungan pelengkapan kod boleh menghasilkan keratan kod (snippets), tetapi ia kekurangan akses terus ke DOM secara langsung dan konfigurasi projek yang khusus. Ejen Playwright menggunakan Model Context Protocol yang menyalurkan struktur halaman semasa dan tetapan rangka kerja ujian ke dalam model, membolehkan AI menaakul tentang elemen tepat yang akan berinteraksi dengannya. Kod yang dihasilkan bukan sahaja betul dari segi sintaks, tetapi juga berpaksikan kepada UI sebenar pada saat ia dihasilkan.
Bermula dengan beberapa arahan
- Sediakan projek Node dan tambah Playwright sebagai kebergantungan (dependency).
- Jalankan
npx playwright init-agents --loop=vscodeuntuk memulakan gelung AI di dalam editor anda. - Tulis ujian “benih” (seed) minimal yang memuatkan aplikasi; ini memberikan konteks konkrit kepada ejen.
- Berikan arahan bahasa tabii (contohnya, “Cipta aliran pembayaran yang merangkumi kod diskaun”) untuk mencetuskan Planner, biarkan Generator menghasilkan skrip, dan biarkan Healer mengekalkannya dalam keadaan baik.
Tip untuk menjadikan ejen berfungsi dengan lebih baik
- Ujian benih yang jelas – Ujian awal harus melancarkan aplikasi dengan boleh dipercayai dan mendedahkan elemen UI utama; titik masuk yang kabur akan mengelirukan Planner.
- Data benih yang berstruktur – Membekalkan fixture JSON yang menerangkan input yang dijangkakan membantu Generator memilih selector yang sesuai.
- Minta Page Object Model – Memberitahu Generator secara eksplisit untuk membina rangka (scaffold) objek halaman akan menghasilkan kod yang lebih bersih dan mudah diselenggara.
- Anggap output AI sebagai draf – Semak skrip yang dihasilkan sebelum melakukan commit; ejen masih boleh terlepas nuansa logik perniagaan atau menghasilkan selector yang terlalu generik.