Notlar
npm (node package manager), javascript betik dili için
geliştirilmiş olan ve Node.js'in standart olarak kabul ettiği bir paket
yönetim sistemidir. npm komut satırından çalıştırılır ve uygulamalar
için bağımlılık yönetimi sağlar.
npm'yi yükleyip cypress'i yüklemeyi tavsiye ediyorlar. Cypress'i yazdığınız kodun içine yükleyin.
npm install -D cypress
Yüklendikten sonra cypress
npx cypress open, cypress in test runner ını açıyor.
Cypress için hangi IDE'yi kullandığınız önemli değil ama genelde Visual Studio Code kullanılıyor.
Cypress la test yaparken güvenlikle alakalı hata alırsan cypress.json dosyasına aşağıdaki yazılır.
{ "chromeWebSecurity" = false }
Buraya hep aynı url ye gideceksen baseURL olarak tanımlama yapabilirsin. Açılacak tarayıcının boyutunu buradan ayarlayabilirsin.
Fixtures klasörüne kodunda kullanacağın sabit veriyi yazabilirsin. Yeni bir json dosyası oluşturup aşağıdaki gibi ekleyebilirsin. (swaglabs.json)
{
"name": "Sinem",
"password": "Password",
}
Bu veriyi aşağıdaki login fonksiyonunda çağırıp kullanabilirsin. (swaglabs.cy.js)
///<reference types="Cypress"> />
describe ('Ilk Test', () => {
it('Login with Method', () =>{
cy.fixture("swaglabs").as("user")
cy.visit('https://www.saucedemo.com')
cy.get("@user").then((user) => {
cy.login(user.username, user.password)
})
})
})
Login fonksiyonunu "support" klasörünün altındaki "commands.js" dosyasına eklemen lazım önce. Commands dosyası sürekli kullandığın fonksiyonları yazabileceğin bir dosyadır. Test dosyanda değişkeni gönderip bu fonksiyonu çağırabilirsin ya da Fixtures klasöründeki json dosyandan çağırabilirsin.
Cypress.Commands.add('login', (email, password) => {
cy.visit('/login')
.get('#email_input').type(email)
.get('#password_input').type(password)
.get('button.submit').click()
});
POM(Page Object Model), kod tekrarını önlemek için oluşturulan tasarım kalıbıdır. Objeleri, metodları test kodundan uzak tutar ve tekrar kullanımını sağlar.
Page objects için ana klasörünün altında bir js dosyası oluşturup örneğin Login fonksiyonları orada tanımlayıp test dosyanda import ile çağırabilirsin.
Mesela Page Objects diye Cypress klasörünün altında bir klasör oluşturup json dosyasına böyle fonksiyonlarını yazabilirsin.
export class LoginwithPOM{
enterUsername(){
cy.get("[id = 'login2']", {timeout:3000}).click() //Wait for the form to open
cy.get("[id='loginusername']").type("Sinem", {timeout:3000}).should("be.visible")
}
enterPassword(){
cy.get("#loginpassword").type('123456');
}
clickLogin(){
cy.get('[onclick="logIn()"]').click();
}
clickLogout(){
cy.get('#logout2').click();
}
}
Bu kendi test dosyan. POM için oluşturduğun dosya neredeyse en başta onun yerini belirtmen lazım. Sonra constructor oluşturuyorsun. Ve onun fonksiyonlarını çağırıyorsun.
import {LoginwithPOM} from "../pageobjects/login";
const Pom = new LoginwithPOM();
describe ('Demo Blaze Login POM Test', () => {
it('Go to Website', () => {
cy.visit('https://demoblaze.com')
Pom.enterUsername()
Pom.enterPassword()
Pom.clickLogin()
cy.contains("Welcome Sinem").should("be.visible")
Pom.clickLogout()
})
})
Cypress Dashboard, testlerini koştururken tek bir yerden takip edebileceğin bir alan. Hatalarının resimleri vs de var. Ne kadar süreceği, kaçı geçti, kaldı vs gibi bilgiler de edinebilirsin. Project settings'teki "Record Keys" teki key'i alıp projenin terminalinde aşağıdaki kodu yazmalısın.
npx cypress run --record --key recordkeystenaldığınkod
Cypress tarayıcının ekran görüntüsünü istediğin formatta ayarlamana izin verir. İstersen bir mobil telefon görüntüsü de (iphone, ipad, macbook, samsungun bazıları var) ayarlayabilirsin. Her test için ayrı olsun istersen it() den sonra yazman gerekir ama bütün hepsi için olsun istersen beforeEach() fonksiyonunda aşağıdaki gibi belirtmen gerekir.
cy.viewport("ipad-mini")
beforeEach(() =>{
cy.viewport("samsung-note9")
})
Yorumlar
Yorum Gönder