Playwright, Microsoft tarafından geliştirilen bir açık kaynaklı test otomasyon framework’üdür. Web uygulamaları için güvenilir uçtan uca (end-to-end) testler yazmayı ve çalıştırmayı sağlar. Playwright, Chromium, Firefox ve WebKit gibi tüm modern tarayıcı motorlarını destekler. Ayrıca, JavaScript, TypeScript, Python, C# ve Java gibi çeşitli programlama dilleri ile uyumludur. Playwright, paralel test yürütme, cihaz emülasyonu ve güçlü hata ayıklama araçları gibi özellikler sunar, bu da onu modern web uygulamaları için ideal bir test otomasyon aracı haline getirir.
Test otomasyon framework olarak Playwright’ı neden seçmeliyiz?
- Birleşik API: Playwright, tüm modern tarayıcı motorlarında (Chromium, WebKit, Firefox) çalışır ve mobil kapsama alanı için cihaz emülasyonunu destekler. Hem başlı hem de başsız tarayıcı seçenekleri sunar, geliştiricilerin hata ayıklama kolaylığı ile CI/Bulut yürütme arasında öncelik belirlemesine olanak tanır.Başsız Tarayıcı: Grafik kullanıcı arayüzü (GUI) olmadan çalışan bir web tarayıcısıdır. Bu tür tarayıcılar, sayfa yükleme, DOM işleme ve JavaScript yürütme gibi tüm tarayıcı işlevlerini yerine getirir, ancak kullanıcıya görsel olarak sunulmaz.Bu başsız tarayıcıları kullanarak testleri daha hızlı ve verimli bir şekilde çalıştırabilir, çünkü grafiksel öğeleri yüklemeleri gerekmez.
Başlı Tarayıcı: Grafik kullanıcı arayüzü (GUI) ile çalışan geleneksel bir web tarayıcısıdır. Kullanıcılar, bu tarayıcıları kullanarak web sayfalarını görsel olarak görüntüleyebilir, etkileşimde bulunabilir ve web uygulamalarını test edebilir. Test otomasyonu sırasında, başlı tarayıcılar kullanılarak testlerin manuel olarak nasıl göründüğünü ve davrandığını gözlemlemek mümkündür. Başlı tarayıcılar, özellikle kullanıcı arayüzü testlerinde ve hata ayıklamada faydalıdır.
- Dayanıklılık Testi: Playwright, “otomatik bekleme” ve “otomatik yeniden deneme” özellikleri ile hatalı testlerin temel nedenlerini ortadan kaldırır. Zengin araç seçenekleri (izleme, zaman yolculuğu), arıza durumunda hata ayıklamayı ve sorunları düzeltmeyi kolaylaştırır.
- İzolasyon Testi: Her test, bağımsız olarak kendi tarayıcı bağlamında çalışır. Testler optimizasyon için paralel olarak gerçekleştirilir ve bir test hatası diğerlerini etkilemez.
- Güçlü Araçlar: Playwright, CLI veya Visual Studio Code uzantısını kullanma seçenekleriyle test yazmadan yürütmeye, hata ayıklamaya, raporlamaya ve profil oluşturmaya kadar geliştirici deneyimini kolaylaştırır.
Bu yazımızda Playwright haberlerini nasıl güncel tutacağımızı, Playwright dokümantasyonunu menüler ve arama özelliği ile nasıl kullanacağımızı, Playwright’ı nasıl kuracağımızı ve testleri nasıl çalıştıracağımızı öğreneceğiz.
Playwright’ı Keşfet ve Öğren
Öğrenmeye başlarken, Playwright web sitesi çok önemli bir kaynaktır. Burada, çalışmalarda kendi kendinize yeterli olmanız ve framework’ün gelişimini takip etmeniz için gereken her şeyi bulabilirsiniz.
Dokümantasyon için doğru dili seçtiğinizden emin olun. Bu eğitimde Node.js kullanıyoruz, bu zaten varsayılan dildir.
Öne çıkan bir özellik, toplulukla bağlantı kurabileceğiniz ve yardım alabileceğiniz Discord kanalıdır. Sayfanın en altına doğru kaydırdığınızda, kullanışlı olabilecek birkaç daha fazla bağlantı bulacaksınız.
Bir diğer öne çıkan özellik, uzmanlardan çok sayıda harika içerik bulabileceğiniz YouTube kanalı ve projeyi “Star”layıp “Watch”layarak e-posta ile ilgili bildirimler alabileceğiniz GitHub sayfasıdır.
“Releases” kısmında, yeni özellikler, hata düzeltmeleri ve büyük değişikliklerle ilgili notları göreceksiniz, bu yüzden bunu takip etmek önemlidir.
Kendi web sitesine döndüğümüzde, dokümantasyon üzerinden incelemeye devam edebiliriz.
“Getting Started” menüsü, framework’ü tanımak ve testlerinizi nasıl yazıp sürdüreceğinizi anlamak için ilk adımları size verecektir; bunların çoğunu bu blog yazımızda göreceğiz.
Takip etmesi güzel bir diğer menü “Playwright Test”tir, burada daha ileri özellikler ve daha kapsamlı bir framework hakkında bilgi edinebilirsiniz. Önemli bir diğer menü öğesi “Guides”dır. Burada, Playwright’ın sunduğu birçok özellik için açıklamalar ve örnekler bulabilirsiniz.
Sağ tarafta, ana konular arasında kolayca gezinebilir ve framework’ün en iyi uygulamalarını tanımak, test yürütmeyi optimize etmek ve kodun sürdürülebilirliğini artırmak için son derece önemlidir.
Sonuç olarak, en iyi uygulamaları takip edip etmeyeceğinize karar vermek size kalmış, ancak neden orada olduklarını bilmek önemlidir.
Son olarak, kodunuzu bir framework’ten başka bir framework’e taşımak veya Docker, Selenium Grid gibi üçüncü taraflarla entegrasyonlar yapmak için burada “Migration” ve “Integrations” altında birkaç seçenek de bulunuyor ancak bunları en azından şimdi test etmeyeceğiz.
İncelememize başlayalım… İlk etapta atacı kurcalamak için inceleyeceğimiz durum Mouse click olayı. İşlem çok basit, insan benzeri bir tıklama gerçekleştirir.
Dokümantasyonu incelediğimizde çok farklı örnekler ve açıklamalar da bulunuyor. Örneğin, tıklamaya bir gecikme eklemek istiyorsanız, tıklayıp birkaç saniye basılı tutmak istiyorsanız, nasıl kullanılacağını görebilirsiniz. Benzer örneklere kurulumdan sonra bakacağız.
Playwright Kurulumu ve Ayarlama
Şimdi dokümantasyonu nasıl kullanacağımızı öğrendiğimize göre, bir sonraki adım Playwright’ı kurmak. Hazırsanız, Visual Studio’da çalışma yaptığınız klasörü seçtikten sonra Terminal’i açın. Terminalinizi açtıktan sonra, istediğiniz klasöre gidin ve şunu yazın:
“` npm init playwright@latest “`
Bu, Playwright’ın en son sürümünü kuracaktır.
- Hangi dili kullanmak istediğimizdir.
√ Do you want to use TypeScript or JavaScript? · JavaScript
Javascript seçip, enter tuşuna basacağız.
- Uuçtan uca testlerinizi nereye koyduğunuzdur.
√ Where to put your end-to-end tests? · tests
Varsayılanı, yani tests klasörünü seçip “Enter” tuşuna basacağız.
GitHub Actions iş akışını eklemek isteyip istemediğinizi sorar. Şu an için bunu yapmayacağız, bu yüzden bir kez daha “Enter” tuşuna basarak false diyeceğiz. Son soru, tarayıcıları yüklemek isteyip istemediğinizdir. Biz bir kez daha “Enter” tuşuna basarak evet diyeceğiz. Çünkü tarayıcılar üzerinde test işlemi gerçekleştireceğiz.
Tarayıcılar ve Playwright indirilecek ve kurulacak ve sonunda bir başarı mesajı göreceksiniz.
Sonrasında birkaç kullanışlı komut göreceksiniz. Örneğin, testi çalıştırmak isterseniz, şunu yazabilirsiniz:
“` npx playwright test “`
Bu, projeye eklediğiniz testleri çalıştırır.
Şimdi Playwright’ı kurduğumuza göre, IDE’yi açalım.
Terminal’e `code .` yazıp enter’a basarak VS Code’u açabiliriz.
Burada, bazı klasörlerin oluşturulduğunu görebiliriz. Bu klasörler hakkında daha fazla bilgi edineceğiz, ama şimdilik Visual studio editöründe “Extensions” sekmesine gidip “playwright” yazalım. Birkaç seçenek var- Microsoft’un olanı seçtiğimizden emin olalım. Ben daha önceden kurduğum için var olan hali ile gösteriyorum.
Uzantı hakkında detayları inceleyebiliriz. Buradaki yükleme süreci çok kolay. Yükleme başarıyla tamamlandıktan sonra, sol tarafta simgesini göreceğiz. Buraya gelip birkaç seçenek olduğunu fark edebilirsiniz. Tüm testleri bu menüden çalıştırabilirsiniz. Ve bu proje için mevcut testlerin listesini filtreleyebilirsiniz.
Önemli bir not, burada gösterilecek tüm testler bu Playwright config dosyasındaki tests dizinine bağlı olacaktır. Testlerinizi orada görmek istiyorsanız, bu klasörün güncel olduğundan veya testlerin bu klasör altında olduğundan emin olun.
Şimdilik, bu düğmeye tıklayarak testleri çalıştıralım ve testin çalıştırılacağını göreceksiniz.
Testi çalıştırmanın başka bir yolu, bu simgeye tıklayarak veya bu komutları kullanarak Terminal’e gitmektir.
Terminale “` npx playwright test “` yazarsanız oluşturmuş olduğunuz testler yine çalışacaktır.
Raporu açmak isterseniz, bu komutu kolayca yazabilir ve sonuçlarla birlikte bir tarayıcı açılır. Tekrar, bunlar hakkında daha fazla detay göreceğiz, ama şimdilik Playwright’ın neler yapabileceği hakkında bir fikir edinmek için yeterli.