Puppeteer’da Bir Web Uygulamasına Giriş Yapmak ve Giriş Bilgilerini Saklamak

Merhabalar.

Önceki 2 yazımda Puppeteer’a giriş yapıp, setup ve teardown durumlarını incelemiştik.

Puppeteer ile bir test yazarken bazı durumlarda web uygulamasına giriş yapılması gerekebilir ve giriş bilgilerinin (örneğin cookie veya token bilgileri) bir yerde saklanıp kullanılması gerekebilir.

Bu yazımda ben bir web sitesine login olup ilgili cookie değerlerini nasıl saklayabileceğimizden bahsedeceğim. Örnek olması açısından Ekşi Sözlük’e giriş yapıp oluşan session’a ait cookie bilgilerini saklayacağız.

Oluşan cookie bilgilerini saklamanın birden fazla yolu vardır. Örneğin dosya sistemine JSON formatında kaydetmek, Redis’e, MongoDb’ye veya herhangi bir ilişkisel veritabanına kaydedip sonrasında buradaki değerlere erişip testlerimize devam edebiliriz. Bu yazıda Redis’e ve dosya sistemine yazmayı örnekleyeceğiz.

Öncelikle aşağıdaki komutlar yardımıyla projemizi oluşturalım.

Bu komutlar sayesinde ihtiyacımız olan temel paketlerin kurulumunu tamamladık. Artık testlerimizi yazmaya başlayabiliriz.

Cookie Bilgilerini Dosya Sistemine Yazma

Dosya sisteminde çalışabilmek için Node.JS’in fs paketini kullanacağız. fs paketinin writeFileSync ve readFileSync metotlarını kullanarak verileri dosya sisteminde saklayacağız.

O zaman testimizi yazmaya başlayabiliriz. tests klasörünün altına index.test.js isimli bir dosya oluşturalım ve içeriğini aşağıdaki şekilde düzenleyelim.

Burada yaptığımız işlemleri kısaca açıklamak gerekirse öncelikle Jest’in beforeAll metodu ile tüm testler çalışmadan önce dosya dizinindeki cookies.json dosyasının içeriğini okumaya çalışıyoruz. Eğer bu dosya var ise JSON.parse metodu ile JSON'a çevirip page.setCookie metodu ile Chromium tarayıcının cookie'lerini düzenliyoruz. Eğer dosya sisteminde cookies.json dosyası bulunmuyorsa Chromium'u öncelikle Ekşi Sözlük'ün giriş sayfasına yönlendiriyoruz. Bu ekranda e-posta adresi ve şifre alanlarını otomatik doldurarak ilgili formu sunucuya post ediyoruz. Eğer başarılı bir şekilde giriş yapılırsa page.cookies metodu yardımıyla oluşan cookie bilgisini alıyoruz ve cookies.json dosyasının içerisine yazıyoruz.

Bu işlem sonucunda testimizin başarıyla tamamlandığını ve testin bulunduğu dizinde cookies.json dosyasının oluştuğunu görmekteyiz. Testi bir daha çalıştırdığımız zaman artık giriş sayfasına değil ana sayfaya yönleneceğiz.

Cookie Bilgilerini Redis’e Yazma

Örnek uygulamamızda Redis’e bağlanabilmek için redis isimli NPM paketini kullanacağız. İlgili paketi projemize eklemek için aşağıdaki komutu kullanacağız.

yarn add redis

Eğer elimizde herhangi bir Redis sunucu yok ise Docker üzerinde bir Redis sunucusu oluşturup kullanabiliriz. Örnek uygulamada Redis üzerinde bir Docker sunucu oluşturup kullanacağım. Aşağıdaki komut yardımıyla Redis’i Docker üzerinde oluşturabiliriz.

docker run --name redis -p 6379:6379 -d redis

Bu komutla redis isimli, 6379 portundan gelen istekleri dinleyecek bir container’ı Docker üzerinde oluşturduk.

Bu işlemlerden sonra test dosyamızın içeriğini düzenleyebiliriz. tests klasörünün altındaki index.test.js dosyasının içeriğini aşağıdaki şekilde düzenleyelim.

Burada yaptıklarımızı adım adım açıklayalım. Öncelikle redis.createClient metodu ile localhost:6379 adresindeki Redis sunucusuna bağlantı gerçekleştiriyoruz. Eğer bağlantı başarılı olursa connect, olmazsa error eventları tetiklenecek. Sonrasında ise getAsync metodu yardımıyla Redis'te PUPPETEER_LOGIN_COOKIE isimli anahtarın olup olmadığına bakıyoruz. Eğer yoksa Chromium'u giriş sayfasına yönlendirip e-posta adresi ve şifre bilgilerini otomatik olarak giriyoruz ve oluşan cookie bilgilerini Redis'te PUPPETEER_LOGIN_COOKIE isimli anahtarda saklıyoruz. Zaten bu anahtar varsa ilgili değeri Redis'ten okuyoruz ve page.setCookie metodu ile Chromium'un cookie değerlerini düzenliyoruz.

Testimizi çalıştırdığımız zaman başarılı bir şekilde giriş sayfasına yönlendiğini ve oluşan cookie bilgilerini Redis’e kaydettiğini görmekteyiz.

Testi daha sonra çalıştırdığımız zaman ilgili anahtar Redis’te olduğundan dolayı Chromium giriş sayfası yerine ana sayfaya yönlenecektir.

Dosya sistemi ile yapılan örneğe buradan, Redis ile yapılan örneğe ise buradan erişebilirsiniz.

Originally published at https://mennankose.com on December 27, 2019.