E2E test (Cypress bilan): foydalanuvchi tajribasini avtomatik tekshirish

Sayt yoki veb-ilova ustida ishlaganingizda eng achchiq holatlardan biri shuki, kod alohida-alohida to'g'ri ishlaydi, lekin foydalanuvchi haqiqiy brauzerda biror amalni bajarmoqchi bo'lganda hamma narsa buziladi. Forma yuborilmaydi, tugma bosilganda hech narsa sodir bo'lmaydi yoki ro'yxatdan o'tish sahifasi noto'g'ri yo'naltiradi. End-to-end (E2E) test aynan shu muammoni hal qilish uchun mavjud: u ilovani bo'laklarga bo'lmasdan, butunligicha, xuddi real odam ishlatayotgandek tekshiradi.

E2E test brauzerni ochadi, sahifaga kiradi, maydonlarni to'ldiradi, tugmalarni bosadi va ekranda kutilgan natija paydo bo'lganini tasdiqlaydi. Bu yondashuv frontend, backend, ma'lumotlar bazasi va tarmoq so'rovlari birgalikda to'g'ri ishlashini bir vaqtning o'zida tekshiradi. Shu sababli E2E test foydalanuvchi tajribasiga eng yaqin turadigan test turi hisoblanadi va u real hayotdagi nosozliklarni eng erta bosqichda ushlaydi.

E2E test unit testdan nimasi bilan farq qiladi

Unit test dasturning eng kichik bo'lagini — bitta funksiyani yoki bitta komponentni — boshqalardan ajratib tekshiradi. Masalan, narxni hisoblaydigan funksiyaga sonlarni berib, natijasi to'g'rimi yoki yo'qligini ko'rasiz. Bunday testlar juda tez ishlaydi va xato qayerdaligini aniq ko'rsatadi, lekin ular alohida qismlar bir-biri bilan qanday bog'lanishini tekshira olmaydi.

E2E test esa aksincha, butun zanjirni tekshiradi. U foydalanuvchi ko'radigan sahifadan boshlanib, server javobi va ma'lumotlar bazasidagi o'zgarishgacha bo'lgan barcha qatlamlardan o'tadi. Shu sababli E2E test sekinroq ishlaydi va xato qayerda yuzaga kelganini aniqlash biroz qiyinroq bo'ladi, lekin u eng muhim narsani kafolatlaydi: foydalanuvchi haqiqatan ham o'z maqsadiga erisha oladimi yoki yo'q. Eng yaxshi loyihalar ikkala test turini birgalikda ishlatadi — ko'p sonli tez unit testlar va kamroq sonli, lekin chuqur E2E testlar.

Cypress nima va nega u qulay

Cypress — bu zamonaviy veb-ilovalar uchun yaratilgan E2E test vositasi bo'lib, u testlarni to'g'ridan-to'g'ri real brauzer ichida ishga tushiradi. Bu uning eng katta afzalligi: test bajarilayotganda siz har bir qadamni o'z ko'zingiz bilan ko'rasiz, qaysi tugma bosilganini va sahifa qanday o'zgarganini kuzatasiz. Agar test xato bersa, Cypress aynan qaysi nuqtada to'xtaganini vizual ravishda ko'rsatib beradi, bu esa xatoni topishni juda osonlashtiradi.

Cypress'ning yana bir kuchli tomoni — uning sodda va o'qish oson sintaksisi. Test kodi shu qadar tabiiy yoziladiki, hatto dasturlashni endi o'rganayotgan QA muhandisi ham nima sodir bo'layotganini darrov tushunadi. U JavaScript asosida ishlaydi, o'rnatish bir necha buyruq bilan yakunlanadi va qo'shimcha murakkab sozlamalar talab qilmaydi. Aynan shu soddaligi tufayli ko'plab jamoalar E2E testlashni Cypress'dan boshlaydi.

Oddiy test misoli

Keling, eng keng tarqalgan stsenariyni — tizimga kirish formasini tekshiruvchi testni ko'rib chiqaylik. Quyidagi kodda biz sahifaga kiramiz, login va parol maydonlarini to'ldiramiz, tugmani bosamiz va natijada foydalanuvchi shaxsiy kabinetga o'tganini tasdiqlaymiz. Diqqat qiling, kod deyarli oddiy ingliz tilidagi jumlalardek o'qiladi.

describe('Kirish sahifasi', () => {
  it('to\'g\'ri ma\'lumot bilan kabinetga kiritadi', () => {
    cy.visit('https://sayt.uz/login')

    cy.get('input[name="email"]').type('user@example.com')
    cy.get('input[name="password"]').type('MaxfiyParol123')

    cy.get('button[type="submit"]').click()

    cy.url().should('include', '/cabinet')
    cy.contains('Xush kelibsiz').should('be.visible')
  })
})

Bu testda cy.visit brauzerni ochib sahifaga kiradi, cy.get kerakli maydonni topadi, type esa unga matn yozadi. click tugmani bosadi, should esa natijani tekshiradi. Agar URL manzilida /cabinet bo'lsa va ekranda "Xush kelibsiz" yozuvi ko'rinsa, demak test muvaffaqiyatli o'tdi va kirish jarayoni to'g'ri ishlayapti.

Selektorlar — elementlarni qanday topish

Cypress sahifadagi elementlarni topish uchun CSS selektorlardan foydalanadi: tegning nomi, klassi, identifikatori yoki atributlari orqali. Yuqoridagi misolda biz input[name="email"] deb yozib, nomi "email" bo'lgan kiritish maydonini tanladik. Biroq tajriba shuni ko'rsatadiki, sahifaning dizayni o'zgarganda klass nomlari tez-tez almashadi va shu sababli ularga bog'langan testlar buzilib qoladi.

Aynan shu muammoni oldini olish uchun ko'pchilik jamoalar maxsus data-cy atributlaridan foydalanishni tavsiya qiladi. Bu atribut faqat testlash uchun mo'ljallangan bo'lib, dizayn o'zgarsa ham o'zgarmaydi. Masalan, HTML'da <button data-cy="submit-login"> deb belgilab, testda cy.get('[data-cy=submit-login]') orqali murojaat qilasiz. Bunday yondashuv testlarni ancha barqaror qiladi va keyinchalik xizmat ko'rsatishni osonlashtiradi.

Auto-wait — avtomatik kutish

Veb-ilovalar bilan ishlashda eng katta og'riqlardan biri vaqt masalasidir. Sahifadagi ma'lumotlar serverdan kelguncha biroz vaqt o'tadi, animatsiyalar tugashi kerak, so'rovlar javob qaytarishi lozim. Eski test vositalarida dasturchi qo'lda "uch soniya kut" degan buyruqlar yozishga majbur bo'lardi, bu esa testlarni sekin va ishonchsiz qilardi.

Cypress bu muammoni o'zining auto-wait mexanizmi bilan hal qiladi. U har bir buyruqdan oldin element paydo bo'lishini, ko'rinadigan va bosishga tayyor bo'lishini avtomatik ravishda kutadi. Ya'ni siz cy.get yozsangiz, Cypress element hali yuklanmagan bo'lsa, uni biroz kutib turadi va shundan keyingina davom etadi. Bu sizning kodingizni soddalashtiradi va testlarni real foydalanuvchi tezligiga moslaydi, natijada tasodifiy xatolar ancha kamayadi.

CI'da Cypress ishlatish

Testlardan to'liq foyda olish uchun ular har bir kod o'zgarishidan keyin avtomatik ishga tushishi kerak. Buni uzluksiz integratsiya (CI) tizimlari ta'minlaydi — masalan GitHub Actions, GitLab CI yoki boshqa platformalar. Dasturchi yangi kodni yuborishi bilan tizim avtomatik tarzda Cypress testlarini ishga tushiradi va agar biror test buzilgan bo'lsa, o'zgarishni saytga chiqarishni to'xtatadi.

Cypress'ni CI'da ishga tushirish uchun maxsus buyruq mavjud bo'lib, u brauzerni ekransiz, ya'ni "headless" rejimda ishlatadi. Quyidagi misol GitHub Actions uchun oddiy sozlamani ko'rsatadi.

name: E2E Tests
on: [push]
jobs:
  cypress:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx cypress run

Bu sozlama har bir push'dan keyin loyihani yuklab oladi, kerakli paketlarni o'rnatadi va npx cypress run buyrug'i bilan barcha testlarni ishga tushiradi. Agar test muvaffaqiyatsiz tugasa, jamoa darrov xabardor bo'ladi va muammoni foydalanuvchilar duch kelishidan oldin tuzatadi.

Cypress va Playwright — qisqacha taqqoslash

Cypress'ning asosiy raqibi — Playwright bo'lib, u Microsoft tomonidan yaratilgan va keyingi yillarda tez ommalashib bormoqda. Playwright bir nechta brauzerlarni (Chrome, Firefox, Safari) bir xil darajada qo'llab-quvvatlaydi va bir vaqtning o'zida ko'plab testlarni parallel ishlatishda kuchliroq hisoblanadi. U turli dasturlash tillarini, jumladan Python va C#'ni ham qo'llab-quvvatlaydi.

Cypress esa o'zining qulay vizual interfeysi va o'rganishning soddaligi bilan ajralib turadi, ayniqsa boshlovchilar uchun. Agar siz bitta brauzerda ishlaydigan sodda loyiha ustida ishlasangiz va testlarni tez yozib, ko'rinishini kuzatishni xohlasangiz, Cypress yaxshi tanlovdir. Murakkab, ko'p brauzerli va keng ko'lamli loyihalarda esa Playwright ustunlik qilishi mumkin. Ikkalasi ham mukammal vositalar bo'lib, asosiysi — loyihangizda E2E testlardan umuman foydalanishni boshlashdir.