AI destekli Chrome eklentisiyle web formlarını otomatik test etmek

Web formlarının elle test edilmesi, özellikle karmaşık yapıya sahip olanlarda, saatlerce sürebilen zahmetli bir süreçtir. Her zorunlu alan, doğrulama kuralı ve koşullu açılır menü manuel olarak tek tek kontrol edilir. Geliştiriciler her değişiklik yaptığında, bu test süreci baştan başlamak zorunda kalır. Peki, bu süreci otomatikleştirmek ve AI destekli bir araçla daha verimli hale getirmek mümkün mü?

Denys adında bir yazılım mühendisi, bu soruna çözüm bulmak için iki aydır üzerinde çalıştığı bir projeyi hayata geçirdi. QA Helper adı verilen Chrome eklentisi, gereksinim belgelerini okuyarak test senaryoları oluşturuyor, ardından formları gerçek bir QA uzmanı gibi doldurup test ediyor. Puan/başarısız raporu ve Excel çıktısı sunan bu araç, özellikle Angular tabanlı formlarda karşılaşılan teknik zorlukları aşmak için özel olarak tasarlandı.

Elle yapılan testlerin zaman kaybına dönüşmesi

Denys’in üzerinde çalıştığı QA ekibi, web formlarını manuel olarak test ediyor. Her zorunlu alan, doğrulama kuralı ve koşullu açılır menü, tek tek elle doldurulup kontrol ediliyor. Özellikle çok sayıda alana sahip karmaşık formlarda bu süreç saatler alabiliyor. Geliştiriciler her değişiklik yaptığında, tüm test süreci yeniden başlıyor. Bu durum, hem zaman hem de kaynak kaybına yol açıyor.

Bu problem yalnızca Denys’in ekibi için geçerli değil. Bankacılık, sigorta ve devlet hizmetleri gibi alanlarda da karmaşık web formları yaygın olarak kullanılıyor ve bu formların manuel olarak test edilmesi gerekiyor. Ancak bu süreci otomatikleştirmek, hem QA uzmanlarının iş yükünü azaltabilir hem de geliştirme sürecini hızlandırabilir.

QA Helper nasıl çalışıyor?

QA Helper, kullanıcıların gereksinim belgelerini (örneğin, SRD – Software Requirements Document) yüklemesini ve ardından AI’nin bu belgeleri okuyarak test senaryoları oluşturmasını sağlıyor. Oluşturulan senaryolar arasında zorunlu alanların kontrolü, format doğrulaması, koşullu alanların testi ve başarılı gönderim gibi çeşitli test durumları bulunuyor.

Araç şu anda sadece tek bölümlü formlarla çalışabiliyor olsa da, çok bölümlü formlara yönelik çalışmalar devam ediyor. Desteklenen alan türleri arasında:

• Metin giriş alanları
• Yerel HTML açılır menüler
• Angular’ın ng-select bileşeniyle oluşturulan açılır menüler
• Ardışık konum seçimleri (İl → İlçe → Mahalle)
• Radyo düğmeleri (kısmi destek)
• Tarih seçicileri (kısmi destek)

Kullanıcılar, Chrome’da formu açtıktan sonra QA Helper eklentisini kullanarak testi başlatabiliyor. Eklenti, formları doldurup tıklayarak gerçek bir kullanıcı gibi davranıyor, doğrulama mesajlarını okuyor ve başarılı/başarısız sonuçları raporluyor. Ayrıca başarısızlık durumunda ekran görüntüleri de kaydediliyor ve Excel çıktısı alınabiliyor.

Angular’ın form modelini yenmek: DOM manipülasyonunun incelikleri

QA Helper’in en ilginç yanı, Angular tabanlı formlarla çalışırken karşılaşılan teknik zorlukları aşmak için geliştirilen yöntemlerdir. Angular’ın reaktif formları, yalnızca input, change ve blur gibi belirli DOM olayları tetiklendiğinde alanların doldurulduğunu kabul eder. Basitçe bir alanın değerini değiştirmek, Angular’ın form modelini güncellemeye yetmez.

Bu nedenle, QA Helper alanı doldururken gerçek bir kullanıcı gibi davranır. Örneğin, bir metin alanını doldururken:

1. Alana odaklanır ve tıklar.
2. Alanı temizler ve ardından karakter karakter değer ekler.
3. Her karakterden sonra input olayını tetikler.
4. En sonunda input, change ve blur olaylarını gönderir.

Bu yöntem, Angular’ın form modelini güncellediğinden emin olmak için gereklidir. Benzer şekilde, Angular’ın ng-select bileşeniyle oluşturulan açılır menülerde de özel bir yaklaşım kullanılır:

1. Açılır menünün bulunduğu öğeye tıklanır ve seçenekler paneli açılır.
2. .ng-option sınıfına sahip seçenekler için DOM sorgulaması yapılır.
3. İstenilen seçeneğe mouseenter ve click olayları gönderilir.

Bu yöntem, Angular bileşeninin kullanıcı tarafından seçilmiş gibi davranmasını sağlar.

Teknik altyapı ve gelecek planları

QA Helper’in teknik altyapısı oldukça basit tutulmuş. Eklenti vanilla JavaScript ile yazılmış olup, Chrome’un içerik betikleri ve açılır pencere arayüzünden oluşuyor. Backend tarafında Node.js kullanılırken, kullanıcı arayüzü React ile geliştirilmiş ve Render platformunda barındırılıyor. AI destekli test senaryosu oluşturma için şu anda Groq ve OpenAI kullanılıyor, ancak yakın zamanda Google’ın Gemini modeline geçiş planlanıyor.

Denys, aracın şu anda erken bir aşamada olduğunu ve çok bölümlü formlara yönelik destek eklemek için çalışmaların devam ettiğini belirtiyor. Gelecekte, aracın daha geniş form türlerini desteklemesi ve AI’nin test senaryolarını oluşturma yeteneklerinin geliştirilmesi hedefleniyor.

QA Helper’in başarılı olması, yalnızca geliştiricilerin değil, tüm yazılım ekiplerinin web formlarını daha verimli bir şekilde test etmelerine yardımcı olabilir. Manuel testlerin yerini AI destekli otomatik testlerin almaya başlaması, gelecekte yazılım geliştirme süreçlerini önemli ölçüde değiştirebilir.