Visual Studio Code AI ajanlarıyla otomatik tarayıcı testleri ve web otomasyonu

Giriş

Visual Studio Code (VS Code), geliştiricilerin web uygulamaları geliştirme sürecini önemli ölçüde hızlandıran ve otomatikleştiren yeni bir özellik seti sunmaktadır. Bu özellikler, GitHub Copilot ajanlarının tarayıcı tabanlı görevleri bağımsız olarak gerçekleştirmesine olanak tanır. Özellikle otomatik tarayıcı testleri ve web otomasyonu, manuel müdahale gerektirmeden karmaşık kullanıcı arayüzü (UI) senaryolarının doğrulanmasını sağlar.

Sorun Tanımı

Geleneksel web geliştirme süreçlerinde, geliştiriciler aşağıdaki zorluklarla karşılaşmaktadır:

1. Manuel Test Süreci: Web uygulamalarının fonksiyonel doğrulamasını yapmak için geliştiriciler, her değişiklik sonrası tarayıcıda manuel testler gerçekleştirmek zorundadır. Bu süreç zaman alıcı ve hataya açıktır.
2. Hata Tespiti ve Düzeltme: Konsol hataları ve görsel bozulmaların tespiti genellikle manuel inceleme gerektirir. Bu da hata düzeltme sürecini geciktirir.
3. Çapraz Tarayıcı Uyumluluğu: Farklı tarayıcılarda (Chrome, Firefox, Edge vb.) uygulamaların tutarlı davranış sergilemesini sağlamak zorlu bir süreçtir.
4. Tekrarlayan Görevler: Rutin görevler (örneğin, form doldurma, buton tıklama) geliştiricilerin zamanını alarak asıl geliştirme sürecinden uzaklaştırır.

Çözüm: VS Code AI ajanlarıyla otomatik tarayıcı otomasyonu

Visual Studio Code, GitHub Copilot ajanlarına entegre edilen yeni tarayıcı otomasyon araçları sayesinde yukarıdaki sorunlara çözüm sunmaktadır. Bu araçlar, aşağıdaki yeteneklere sahiptir:

1. Bağımsız Tarayıcı Eylemleri

Ajanlar, aşağıdaki karmaşık tarayıcı eylemlerini bağımsız olarak gerçekleştirebilir:

• Sayfa Gezinme: URL'ler arasında otomatik geçiş yapabilir.
• Öğe Etkileşimi: Buton tıklama, form doldurma, açılır menü seçimleri gibi kullanıcı eylemlerini simüle edebilir.
• Dialog Yönetimi: Tarayıcı uyarı pencereleri, onay diyalogları ve hata mesajlarını otomatik olarak işleyebilir.
• Veri Doğrulama: Sayfa içeriğini analiz ederek beklenen sonuçları karşılaştırabilir.

2. Hata Tespiti ve Düzeltme

Ajanlar, aşağıdaki hataları otomatik olarak tespit edebilir ve düzeltme önerileri sunabilir:

• Konsol Hataları: JavaScript konsolunda oluşan hataları yakalar ve bunların nedenlerini analiz eder.
• Görsel Hatalar: Ekran görüntüleri alarak görsel regresyonları (örneğin, CSS bozulmaları) tespit eder.
• Fonksiyonel Hatalar: Uygulamanın beklenen davranışı sergileyip sergilemediğini test eder ve düzeltme önerileri sunar.

3. Entegre Test Raporlama

Otomatik testlerin sonuçları, VS Code içinde doğrudan görüntülenebilir. Bu raporlar aşağıdaki bilgileri içerir:

• Test senaryolarının geçip geçmediği.
• Tespit edilen hataların detayları ve hata kodları.
• Ekran görüntüleri ve konsol çıktıları.
• Hata düzeltme önerileri.

Uygulama Adımları

VS Code AI ajanlarıyla otomatik tarayıcı otomasyonunu kullanmak için aşağıdaki adımları izleyin:

Adım 1: Gereksinimlerin Kurulumu

1. VS Code ve Eklentilerin Yüklenmesi:

   # Visual Studio Code'un en son sürümünü indirin ve yükleyin
   # https://code.visualstudio.com/download
   
   # Gereken eklentileri yükleyin:
   # - GitHub Copilot (AI ajanları için)
   # - Playwright Test (tarayıcı otomasyonu için)
   

2. Playwright'in Kurulumu: Playwright, tarayıcı otomasyonu için kullanılan bir framework'tür. Aşağıdaki komutla projenize ekleyin:

   npm init playwright@latest

   Bu komut, gerekli bağımlılıkları ve yapılandırma dosyalarını oluşturacaktır.

Adım 2: AI ajanlarının Yapılandırılması

GitHub Copilot ajanlarının tarayıcı otomasyonunu kullanabilmesi için aşağıdaki adımları izleyin:

1. Copilot Ajanı için Yetkilendirme:

   # GitHub hesabınızda Copilot'a erişim sağlayın
   # https://github.com/features/copilot
   
   # VS Code'da Copilot eklentisini etkinleştirin
   # View > Extensions > GitHub Copilot > Enable

2. Ajanın Yetkilerini Ayarlama: Ajanın tarayıcı otomasyonu gerçekleştirebilmesi için gerekli izinleri verin. Bu, genellikle tarayıcı uzantılarının yüklenmesini ve sistem izinlerinin ayarlanmasını içerir.

Adım 3: İlk Otomatik Test Senaryosunun Oluşturulması

Aşağıdaki örnekte, basit bir web sayfasında buton tıklama işlemini otomatik olarak gerçekleştiren bir test senaryosu oluşturulmaktadır:

// tests/example.spec.ts
import { test, expect } from '@playwright/test';

// Test senaryosu: Basit buton tıklama
const { test } = require('@playwright/test');

test('Buton tıklama testi', async ({ page }) => {
  // Web sayfasını aç
  await page.goto('https://example.com');

  // 'Click Me' butonunu bul ve tıkla
  await page.locator('button:text("Click Me")').click();

  // Beklenen sonuç: Buton tıklama sonrası mesajın görünmesi
  await expect(page.locator('#message')).toHaveText('Button clicked!');
});

Adım 4: AI ajanının Test Senaryosunu Yürütmesi

1. Ajanı Etkinleştirme: VS Code'da Copilot ajanını etkinleştirin ve test senaryosunu açıklayan bir talimat verin. Örneğin:

   // Aşağıdaki yorumla ajanlara talimat verilebilir
   // @agent: Lütfen 'Buton tıklama testi' senaryosunu Chrome tarayıcısında çalıştır ve sonuçları raporla.

2. Testin Çalıştırılması: Ajan, verilen talimata göre Playwright framework'ünü kullanarak testi otomatik olarak gerçekleştirecektir. Test sonuçları VS Code'un Test Explorer'ında görüntülenecektir.

   # Terminalde manuel olarak da çalıştırılabilir
   npx playwright test

3. Sonuçların İncelenmesi: Test sonuçları, aşağıdaki bilgileri içerecektir:
   • Testin geçip geçmediği.
   • Tespit edilen hatalar (varsa).
   • Ekran görüntüleri ve konsol çıktıları.

Adım 5: Hata Düzeltme ve Optimizasyon

Ajanlar tarafından tespit edilen hataların düzeltilmesi ve test senaryolarının optimize edilmesi için aşağıdaki adımları izleyin:

1. Hata Raporlarının İncelenmesi: AI ajanının sağladığı hata raporlarını ve ekran görüntülerini inceleyin. Hataların nedenlerini analiz edin.

   İpucu: Konsol hataları genellikle JavaScript kodundaki hatalardan kaynaklanır. Hata mesajlarını dikkatlice inceleyin ve ilgili kod satırlarını kontrol edin.

2. Test Senaryosunun Güncellenmesi: Hataları düzeltmek için test senaryosunu güncelleyin. Örneğin, butonun doğru şekilde bulunup bulunmadığını kontrol edin.

   // Butonun bulunması için daha spesifik bir locator kullanın
   await page.locator('button[id="submit-button"]:visible').click();

3. Tekrarlanan Testlerin Çalıştırılması: Güncellenen test senaryosunu tekrar çalıştırarak düzeltmelerin doğruluğunu onaylayın.

İpuçları ve En İyi Uygulamalar

İpucu 1: Test senaryolarınızı mümkün olduğunca küçük ve odaklanmış tutun. Büyük test senaryoları, hata tespitini zorlaştırabilir ve hata düzeltme sürecini karmaşıklaştırabilir.

İpucu 2: Farklı tarayıcılarda (Chrome, Firefox, Edge, Safari) testlerinizi çalıştırarak çapraz tarayıcı uyumluluğunu sağlayın. Playwright, bu tarayıcıları yerel olarak destekler.

Uyarı: AI ajanları tarafından gerçekleştirilen otomatik testler, insan müdahalesi olmadan çalışır. Ancak, kritik işlemler veya güvenlik açısından hassas uygulamalar için manuel doğrulama önerilir.

En İyi Uygulama: Test senaryolarınızı bir CI/CD pipeline'ına entegre edin. Bu sayede her kod değişikliği sonrası otomatik olarak testlerin çalıştırılması ve hata tespiti sağlanır.

Örnek Kullanım Senaryosu: Form Doldurma ve Gönderme

Aşağıdaki örnek, bir web formunun otomatik olarak doldurulması ve gönderilmesi işlemini göstermektedir:

// tests/form.spec.ts
import { test, expect } from '@playwright/test';

test('Form doldurma ve gönderme testi', async ({ page }) => {
  // Web formunun bulunduğu sayfayı aç
  await page.goto('https://example.com/form');

  // Form alanlarını doldur
  await page.fill('#name', 'Ahmet Yılmaz');
  await page.fill('#email', 'ahmet@example.com');
  await page.fill('#message', 'Merhaba, bu bir otomatik test mesajıdır.');

  // Formu gönder
  await page.click('#submit-button');

  // Beklenen sonuç: Başarılı gönderim mesajının görünmesi
  await expect(page.locator('#success-message')).toHaveText('Form başarıyla gönderildi!');
});

Sonuç

Visual Studio Code'un AI ajanlarıyla entegre olan otomatik tarayıcı otomasyonu araçları, web geliştiricilerinin verimliliğini önemli ölçüde artırmaktadır. Bu araçlar sayesinde, manuel test süreçleri otomatikleştirilebilir, hata tespiti hızlandırılabilir ve geliştirme süreci optimize edilebilir. AI destekli ajanların kullanımı, özellikle karmaşık UI testleri ve çapraz tarayıcı uyumluluğu gibi zorlu senaryolarda büyük avantajlar sunmaktadır. Geliştiriciler, bu araçları kullanarak daha güvenilir ve hızlı bir şekilde web uygulamaları geliştirebilirler.

Referanslar

• Visual Studio Code Resmi Web Sitesi
• GitHub Copilot
• Playwright Framework
• Kaynak Makale