javascript TARAYICI İÇİ

JavaScript Step

Tarayıcı context'inde JavaScript kodu çalıştırın. LocalStorage, DOM manipülasyonu, dinamik elementler ve daha fazlası için güçlü bir araç.

JavaScript Step Nedir?

JavaScript Step, test sırasında tarayıcı içinde özel JS kodu çalıştırmanızı sağlar. Kodunuz sayfanın DOM'una, localStorage'a ve tüm tarayıcı API'larına erişebilir.

Python vs JavaScript Step

Python: Agent üzerinde çalışır, browser'ı Selenium ile kontrol eder, harici API'lara erişebilir.
JavaScript: Tarayıcı içinde çalışır, DOM'a direkt erişir, sayfa değişkenlerine ulaşabilir.

Ne Zaman Kullanmalısın?

Kullan ✓

• LocalStorage / SessionStorage işlemleri
• DOM'dan veri çekme (hidden fields, attributes)
• Sayfa değişkenlerine erişim (window objects)
• Scroll, focus, blur gibi UI işlemleri
• Date picker, slider gibi complex widget'lar
• AJAX tamamlanma kontrolü

Kullanma ✗

• Basit click/type işlemleri (Action kullan)
• Harici API çağrıları (API Step kullan)
• Dosya işlemleri (Python kullan)
• Database sorguları (Database Step kullan)
• Karmaşık hesaplamalar (Python kullan)

Gerçek Senaryo Örnekleri

Senaryo 1: E-ticaret Sepet Verisi Kontrolü

LocalStorage'daki sepet bilgisini okuma ve doğrulama

🎯 Kullanım Durumu: Kullanıcı sepete ürün ekledi. Sepet verisi localStorage'da tutuluyor. Test sırasında sepetteki ürün sayısını doğrulamak istiyorsun.

// localStorage'dan sepet verisini al
const cartData = localStorage.getItem('cart');
const cart = JSON.parse(cartData);

// Sepetteki ürün sayısını döndür
return cart.items.length;

Dönen değeri Assertion ile kontrol edebilirsin: {{js_result}} == 3

Senaryo 2: Auth Token'ı Başka Teste Aktarma

🎯 Kullanım Durumu: Login testinden sonra alınan JWT token'ı API testlerinde kullanmak istiyorsun. Token localStorage'da saklanıyor.

// JWT token'ı al ve döndür
const token = localStorage.getItem('authToken');
return token;

Dönen değeri Global Parameter'a kaydet: auth_token = {{js_result}}

Senaryo 3: Hidden Input Değeri Okuma

Form'daki gizli CSRF token'ı alma

🎯 Kullanım Durumu: Form submit öncesi CSRF token değerini doğrulamak veya API isteğinde kullanmak istiyorsun.

// Hidden input'tan CSRF token al
const csrfToken = document.querySelector('input[name="_csrf"]').value;
return csrfToken;

Senaryo 4: Lazy Load Elementi Görünür Yapma

Infinite scroll sayfada elemente scroll

🎯 Kullanım Durumu: Sayfa lazy load kullanıyor. "Daha Fazla Yükle" butonuna ulaşmak için scroll yapman gerekiyor.

// Elemente scroll yap
const element = document.querySelector('#load-more-btn');
element.scrollIntoView({ behavior: 'smooth', block: 'center' });
return true;

Senaryo 5: Date Picker'a Tarih Set Etme

React/Vue date picker'ı programatik kontrol

🎯 Kullanım Durumu: Modern JS framework'lerde date picker'lar click ile zor kontrol edilir. Direkt değer set etmek istiyorsun.

// Input değerini set et ve change event tetikle
const dateInput = document.querySelector('#departure-date');
dateInput.value = '2025-02-15';

// React/Vue için change event tetikle
const event = new Event('input', { bubbles: true });
dateInput.dispatchEvent(event);
return true;

Senaryo 6: AJAX İsteği Tamamlanma Kontrolü

Spinner kaybolana kadar bekleme

🎯 Kullanım Durumu: Butona tıkladın, AJAX başladı. Loading spinner varken devam etmek istemiyorsun.

// Loading spinner'ın görünür olup olmadığını kontrol et
const spinner = document.querySelector('.loading-spinner');
const isLoading = spinner && spinner.offsetParent !== null;
return !isLoading; // true = yükleme bitti

Senaryo 7: Referans Kodu Kopyalama Testi

"Kopyala" butonunun çalıştığını doğrulama

🎯 Kullanım Durumu: "Referans kodunu kopyala" butonu var. Clipboard'a gerçekten kopyalandığını test etmek istiyorsun.

// Clipboard'dan oku (async)
const clipboardText = await navigator.clipboard.readText();
return clipboardText;

Not: Clipboard API HTTPS gerektirir ve kullanıcı izni isteyebilir.

Senaryo 8: Shadow DOM İçindeki Elemente Erişim

Web Components içindeki elementi kontrol etme

🎯 Kullanım Durumu: Modern web component'ler Shadow DOM kullanıyor. Selenium/normal selector bu elementleri bulamıyor.

// Shadow DOM içine gir ve elementi bul
const host = document.querySelector('my-custom-component');
const shadowRoot = host.shadowRoot;
const button = shadowRoot.querySelector('.inner-button');
button.click();
return true;

Syntax & Return

Return Değeri

JavaScript Step'ten dönen değer {{js_result}} değişkeninde saklanır ve sonraki steplerde kullanılabilir.

Primitive Değerler

return "hello";     // string
return 42;          // number
return true;        // boolean

Object/Array

return { name: "Ali", age: 25 };
return ["a", "b", "c"];
// JSON olarak serialize edilir

Global Parameter'a Kaydetme

JavaScript Step'ten dönen değeri Global Parameter olarak kaydetmek için step ayarlarında "Save to Global Parameter" seçeneğini kullan.

Sık Sorulan Sorular

JavaScript Step ile Python Step arasındaki fark nedir?

JavaScript Step tarayıcı içinde çalışır ve DOM'a direkt erişir. Python Step ise SmartestQA Agent üzerinde çalışır ve browser'ı Selenium WebDriver ile kontrol eder. localStorage okumak için JS, dosya işlemleri için Python kullan.

async/await kullanabilir miyim?

Evet! JavaScript Step'te async/await kullanabilirsin. Clipboard API, fetch gibi async işlemler için await kullan.

console.log çıktılarını görebilir miyim?

Evet, test raporunda JavaScript Step'in console çıktıları "Console Output" bölümünde görüntülenir. Debug için console.log() kullanabilirsin.

Hata durumunda ne olur?

JavaScript'te hata fırlarsa step FAIL olur ve hata mesajı rapora yazılır. Try-catch ile hataları yakalayabilirsin.

Python Script API Request