5 Eylül 2022 Pazartesi

Home » cypress , cypress commands , e2e test » Cypress genel konsept ve komutlara giriş #2

Cypress genel konsept ve komutlara giriş #2

Ahmet Şimşek 5 Eylül 2022 Pazartesi

Cypress ile yazılan testlerde asenkron işlemleri eklemenize gerek yoktur. Tüm işlemleri sırasıyla çalıştırıp bir sonraki işlemin kontrolünü belirli timeoutlar üzerinden takip eder. Yani örneğin bir butonu tıklayıp ekranda bir yazının gözükmesini sağlayan aşağıdaki kod blogunda komutların default timeout değerleri vardır. Ve bu timeout değerlerinin aşılması durumunda testler hata verir.

cy.get('[data-testid="button"]').click()

cy.contains('hello world')

Cypresste tüm komutlar belirli bir kuyruk üzerinde toplanıp çalıştırılır. Komutlar Javascript Promise mantığında çalışmaz. Tek seferde bir komut çalıştırılır ve tamamlandığı durumda diğer komuta geçiş yapılır.

Testleri tanımlamak, gruplandırmak ve takip etmek

Test dosyalarında genel olarak kullanacağımız 2 fonksiyon var. describe ve it. describe fonksiyonu test yazılacak genel kapsamı, it ise bu kapsam içerisindeki yazılacak olan akışı tanımlar diyebiliriz.

Örneğin login bir akışı başarılı ve başarısız senaryolar altındaki aşağıdaki gibi toplayabiliriz.

describe('login', () => {
  it('failed login', () => {
    // ...
  });

  it('successful login', () => {
    // ...
  });
});

Test yazarken ihtiyacımız olacak bir diğer konu testlerin başlangıcı ve bitişi gibi durumları takip edebilmektir. Örneğin testler çalışmaya başladığınız bir db connection aç ve bitiminde kapat gibi bir yapı kurmak istiyorsak bunu hooklar üzerinden tanımlayabiliriz.

Örneğin aşağıdaki şekilde direkt tanımladığımız durumda bu fonksiyon tüm testlerin başlangıç aşamasında tetiklenir.

before(() => {
  // ...
})

Aşağıdaki gibi bir tanımlama ise çalıştırılan test kapsamının başlangıcını takip eder.

describe('...', () => {
  before(() => {
    // ...
  })

beforeEach komutu ile de her test blogunun çalıştırılmadan önceki anlarını takip edebiliriz. before yerine after yazdığınız durumdaysa testlerin çalıştırılması sonrasını takip edebilirsiniz.

Assertions

Assertion kelimesi Türkçe iddia anlamına gelir. Test yazmak istediğimiz herhangi bir uygulama ya da uygulamanın belirli bir bölümü için tanımlamamız gereken kriterleri assertion olarak tanımlayabiliriz. Yani kullanıcı bilgilerini girdim, giriş yap butonuna tıkladım, hata aldım ve sonrasında doğru kullanıcı bilgileri ile giriş yapmayı denedim ve başarıyla giriş yaptım akışını birden fazla assertion ile tanımlayabiliriz.

Genel Assertion Komutları

* cy.visit

Browserda açmak istediğimiz sayfa adresini girdiğimiz kısım. e2e.baseUrl tanımlamasını yaptıysanız path değerini vermeniz yeterli.

* cy.contains

DOM üzerinde belirtilen yazının olup olmadığını kontrol eden komut.

* cy.get

Herhangi bir elemente DOM selektörü ile erişmeyi sağlayan komut.

* cy.type

Yazılabilir bir elemente veri girişi yapmayı sağlayan komut.

* cy.click

Seçilen elemente tıklamayı sağlayan komut.

Timeout ayarları

Yukarıda tüm komutların default zaman aşımı değerleri olduğundan bahsetmiştik. Bu default değerleri ve nasıl değiştirilebileceğini dokümandan öğrenebilirsiniz. Ana konfigürasydan genel timeout değerlerini de değiştirebilirsiniz.

Komutlar İçin Zincirlenebilirlik

Bazı komutları birbiri ardına çalışıp kullanabilirsiniz. Örneğin click komutunu aşağıdaki gibi çalıştırabilir;

cy.click('[data-testid=button]')

ya da

cy.get('[data-testid=button]').click()

şeklinde de çağırabilirsiniz.

Custom komut eklemek

Sürekli tekrar edecek olan komutları tek bir komut haline getirip cypress/support/commands.js dosyasına ekleyebilirsiniz. Örneğin aşağıdaki şekildeki gibi login komutlarını tek bir komutta toplayabiliriz.

cy.get('[data-testid="email"]').type('mail@mail.com')
cy.get('[data-testid="password"]').type('verysecretpassword')
cy.get('[data-testid="submit"]').click()

Aşağıdaki gibi toplayıp

Cypress.Commands.add('login', (email, password) => {
  cy.get('[data-testid="email"]').type(email)
  cy.get('[data-testid="password"]').type(password)
  cy.get('[data-testid="submit"]').click()
})

Direkt cy.login şeklinde parametre vererek kullanabiliriz.

cy.login('test@mail.com', 'verysecretpassword')

wait komutu

wait komutu ile sonraki komutun çalışana kadar milisaniye cinsinden bir bekleme durumu ekleyebilirsiniz.

cy.wait(1000)

Bununla birlikte belirli bir endpoint çağrısının sonlanması durumunuda komut olarak ekleyebilirsiniz. Endpoint çağrılarını komut olarak takip edebilmek testlerin doğru aşamaları takip ederek çalışmasını kolaylaştırabilir. Örneğin bir endpoint çağrısının hazır olmasını beklemeden bir işlemi tetiklemek bazı durumlarda çalışıp bazı durumlarda çalışmama gibi tutarsızlıklara sebep olabilir. Bunu wait komutu ile endpoint çağrılarını takip ederek çözebilirsiniz.

cy.intercept('GET', '/users').as('getUsers')

// ...

cy.wait('@getUsers')

Bu yazıda genel test konseptini ve genel kullanılan komutları özetlemeye çalıştım. Sonraki yazı yukarıda wait komutu ile birlikte kullandığımız cy.intercept komutu üzerine olacak.

Thanks for reading Cypress genel konsept ve komutlara giriş #2