Cypress.io Kurulum ve Kullanımı

Merhaba arkadaşlar, bu yazımda Cypress.io kütüphanesinin kullanımını ve ortam kurulumlarının nasıl yapılacağını anlatmaya çalışacağım.

Cypress.io Nedir ?

Cypress, JavaScript dili ile UI testler yazabilmemize olanak sağlayan açık kaynak kodlu nodeJS kütüphanesidir.

Cypress.io Avantajları

  • Başarısız olan testlerin kaynağını çok hızlı bulabilirsiniz.
  • Testlerinizde değişiklik yaptığınızda Cypress otomatik olarak yeniden çalışır.
  • Testlerinizde herhangi bir nedenden dolayı yaşanan yavaşlıklar için bekleme komutları eklemenize gerek kalmaz Cypress bunları otomatik olarak yapar.
  • Testler sırasında otomatik ekran görüntüsü veya video kaydı alabilirsiniz.

Ortam Kurulumları

Cypres.io kullanabilmek için bir kaç kurulum yapmamız gerekmektedir.

  1. IDE olarak Visual Studio Code kullanacağım siz farklı bir IDE kullanabilirsiniz. Visual Studio Code için https://code.visualstudio.com/ adresine gidin bilgisayarınıza indirin ve kurulumunu yapın.
  2. Cypress.io bir NodeJS kütüphanesi olduğu için bilgisayarınıza NodeJS de kurmanız gerekmektedir. NodeJS için https://nodejs.org/en/download/ adresine gidin bilgisayarınıza indirin ve kurulumunu yapın.

Cypress.io Kurulum

Kendinize cypress.io için bir çalışma dizini belirleyin, Visual Studio Code’u açın ve Open Folder linkine tıklayarak çalışma dizininizi gösterin.

Daha sonra Visual Studio Code ekranında New File butonuna basın. Açılan alana package.json yazarak dosyayı oluşturun. Bu dosyayı oluşturma sebebimiz cypress kütüphanesini kurabilmektir.

Oluşturduğumuz package.json dosyasına kurulum için gerekli komutları yazdıktan sonra son hali aşağıdaki gibi olmalıdır.

Package.json dosyasına kurmak istediğimiz kütüphaneleri tanımladıktan sonra Visual Studio Code üzerinde yer alan Terminal menüsüne ardından New Terminal seçeneğine basın. Aşağıdaki komutu yazarak kurulumu başlatın.

npm install

Kurulum tamamlandığında çalışma dizininize node_modules adında bir klasör oluştuğunu göreceksiniz. Bu klasör içinde cypress kütüphanesine ait bileşenler bulunmaktadır.

Terminal ekranında aşağıdaki komutu çalıştırarak cypress’ı açın.

npx cypress open

Cypress açıldığında aşağıdaki ekranla karşılaşacaksınız. OK, go it! butonuna basın. Ayrıca Visual Studio Code üzerinde çalışma dizininize cypress adında bir klasör daha oluştuğunu da görebilirsiniz. Test kodumuzu bu oluşan dizin içerisinde yer alan integration klasörünün içerisine oluşturacağız. Bu klasör içerisinde örnek kodlara da erişebilirsiniz.

New File butonuna basın, javascript dosyanız için bir ad belirleyin ve uzantısını .spec.js olarak tanımlayın.

İlk test kodumuzu yazabilmek için oluşturduğumuz javascript dosyasına aşağıdaki kod bloğunu eklememiz ve test kodlarını bu bloğun içerisine yazmamız gerekmektedir. Siz My First Test yerine kendi test case adını yazın.

describe('My First Test', function () {
})

it() ifadesi ile test adımlarınızı tanımlayabilirsiniz. cy.visit() methodu ile de test edeceğiniz sayfanın url bilgisini tanımlayabilirsiniz.

it('Visit to login page', function () {
        cy.visit('https://demo.yasinalbakir.net')
    })

Test edeceğimiz sayfa basit bir oturum açma sayfasıdır, sayfada kullanıcı adı, parola ve giriş yap butonları yer almaktadır. cy.get(locator).type(value) methodu ile kullanıcı adı ve parola alanlarına değer gönderiyoruz.

it('Enter username and password', function () {
        cy.get('#kullaniciAdi').type('admin')
        cy.get('#parola').type('123456')
    })

cy.get(locator).click() methodu ile de sayfa da yer alan giriş yap butonuna tıklıyoruz.

it('Click login button', function () {
        cy.get('#btnGirisYap').click()
    })

Test sonucunu kontrol etmek içinse should() methodunda faydalanıyoruz. Bu method ile hem url içerisinde hem de sayfa başlığında karşılaştırma yapabiliriz.

it('Assert login page', function () {
        cy.url().should('include', 'kullaniciTanimlama')
        cy.title().should('eq', 'Kullanıcı Tanımlama')
    })

Son olarak yürüttüğünüz test sonucunda açılan sayfanın ekran görüntüsünü cy.screenshot() methodunu kullanarak alabilirsiniz.

it('Screenshot page', function () {
        cy.screenshot('screenshot.png')
    })

Örnek çalışmaya ait kodların tamamı ise aşağıdaki gibidir.

describe('Demo Login Page Test', function () {
    it('Visit to login page', function () {
        cy.visit('https://demo.yasinalbakir.net')
    })
    it('Enter username and password', function () {
        cy.get('#kullaniciAdi').type('admin')
        cy.get('#parola').type('123456')
    })
    it('Click login button', function () {
        cy.get('#btnGirisYap').click()
    })
    it('Assert login page', function () {
        cy.url().should('include', 'kullaniciTanimlama')
        cy.title().should('eq', 'Kullanıcı Tanımlama')
    })
    it('Screenshot page', function () {
        cy.screenshot('screenshot.png')
    })
})

Yazdığınız kodu çalıştırmak içinse cypress.io ekranında oluşturduğunuz javascript dosyasına tıklamanız gerekmektedir. Visual Studio Code üzerinde oluşturduğunuz test kodunda herhangi bir değişiklik yapıp kaydettiğinizde test otomatik olarak tekrar çalışacaktır.

Test sonucu aşağıdaki gibi görünecektir.

Bu makale hazırlanırken https://www.cypress.io/ sayfasından faydalanılmıştır.

Faydalı olması dileğiyle…

www.yasinalbakir.net