M

MLOG

O'zbek

Cypress, kuchli end-to-end testlash freymvorki bo'yicha keng qamrovli qo'llanma. O'rnatish, testlar yozish, nosozliklarni tuzatish, CI/CD integratsiyasi va ilg'or tajribalarni o'z ichiga oladi.

Cypress: Veb-ilovalar uchun yakuniy End-to-End testlash bo'yicha qo'llanma

Bugungi tez rivojlanayotgan veb-ishlab chiqish landshaftida veb-ilovalarning sifati va ishonchliligini ta'minlash katta ahamiyatga ega. End-to-End (E2E) testlash ilovaning barcha komponentlari foydalanuvchi nuqtai nazaridan bir-biri bilan uzluksiz ishlashini tekshirishda hal qiluvchi rol o'ynaydi. Cypress dasturchilar uchun qulay tajriba, kuchli funksiyalar va a'lo darajadagi ishlash samaradorligini taklif qilib, yetakchi E2E testlash freymvorki sifatida paydo bo'ldi. Ushbu keng qamrovli qo'llanma sizga Cypress bilan ishlashni boshlash va veb-ilovalaringizni samarali testlash uchun kerak bo'lgan hamma narsani o'rgatadi.

Cypress nima?

Cypress - bu zamonaviy veb uchun yaratilgan yangi avlod front-end testlash vositasidir. Testlarni brauzerda ishga tushiradigan an'anaviy testlash freymvorklaridan farqli o'laroq, Cypress to'g'ridan-to'g'ri brauzerda ishlaydi, bu sizga ilovangizning xatti-harakatlari ustidan misli ko'rilmagan nazorat va ko'rinishni taqdim etadi. U tez, ishonchli va ishlatish uchun oson bo'lishi uchun mo'ljallangan, bu esa uni butun dunyo bo'ylab dasturchilar va QA muhandislari orasida mashhur tanlovga aylantiradi. Cypress JavaScript-da yozilgan va brauzer ichida ishlaydi, bu esa uni juda samarali qiladi va ilovaning ichki qismlariga misli ko'rilmagan kirishni taklif etadi.

Cypress'dan foydalanishning asosiy afzalliklari

O'rnatish va sozlash

Cypress bilan ishlashni boshlash juda oson. Uni qanday o'rnatish kerakligi quyida keltirilgan:

  1. Dastlabki talablar: Tizimingizda Node.js va npm (Node Package Manager) o'rnatilganligiga ishonch hosil qiling. Ularni rasmiy Node.js veb-saytidan yuklab olishingiz mumkin.
  2. Cypress'ni o'rnatish: Terminalingizni yoki buyruqlar satrini oching, loyihangiz katalogiga o'ting va quyidagi buyruqni bajaring:
    3. npm install cypress --save-dev
  3. Cypress'ni ochish: O'rnatish tugagandan so'ng, Cypress Test Runner'ni quyidagi buyruqni bajarib ochishingiz mumkin:
    4. npx cypress open

    Ushbu buyruq testlaringizni ishga tushirish va nosozliklarni tuzatish uchun grafik interfeysni taqdim etuvchi Cypress Test Runner'ni ishga tushiradi.

Birinchi Cypress testingizni yozish

Veb-saytning bosh sahifasi to'g'ri yuklanishini tekshirish uchun oddiy test yarataylik. Loyihangizning `cypress/e2e` katalogida `example.cy.js` nomli yangi fayl yarating.


// cypress/e2e/example.cy.js

describe('Mening birinchi testim', () => {
  it('"Kitchen Sink" sahifasiga tashrif buyuradi', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

Keling, ushbu testni tahlil qilamiz:

Ushbu testni Cypress Test Runner'da ishga tushirib, uning qanday ishlashini ko'ring. Brauzer Cypress Kitchen Sink veb-saytiga o'tishi, "type" havolasini bosishi va URL manzilini tekshirishi kerak.

Cypress buyruqlari

Cypress ilovangiz bilan o'zaro ishlash uchun keng ko'lamli buyruqlarni taqdim etadi. Quyida eng ko'p ishlatiladigan buyruqlardan ba'zilari keltirilgan:

Bular Cypress'dagi mavjud ko'plab buyruqlardan faqat bir nechtasi. Buyruqlar va ularning variantlarining to'liq ro'yxati uchun Cypress hujjatlariga murojaat qiling.

Cypress'dagi tasdiqlashlar (Assertions)

Tasdiqlashlar ilovangizning kutilgan xatti-harakatlarini tekshirish uchun ishlatiladi. Cypress elementlarning holatini, URL manzilini, sarlavhani va boshqalarni tekshirish uchun foydalanishingiz mumkin bo'lgan boy o'rnatilgan tasdiqlashlar to'plamini taqdim etadi. Tasdiqlashlar `.should()` metodi yordamida Cypress buyruqlaridan keyin zanjirband qilinadi.

Quyida keng tarqalgan tasdiqlash misollari keltirilgan:

Shuningdek, o'zingizning maxsus ehtiyojlaringizga mos keladigan maxsus tasdiqlashlarni yaratishingiz mumkin.

Cypress testlarini yozish uchun ilg'or tajribalar

Ilg'or tajribalarga rioya qilish sizga yanada saqlanuvchan, ishonchli va samarali Cypress testlarini yozishga yordam beradi. Quyida ba'zi tavsiyalar keltirilgan:

Cypress'ning ilg'or texnikalari

Stublash va Mocklash

Cypress sizga tarmoq so'rovlari va javoblarini stublash imkonini beradi, bu esa turli stsenariylarni simulyatsiya qilish va ilovangizning xatoliklarni qayta ishlashini testlash imkonini beradi. Bu, ayniqsa, tashqi API yoki xizmatlarga tayanadigan funksiyalarni testlash uchun foydalidir.

Tarmoq so'rovini stublash uchun `cy.intercept()` buyrug'idan foydalanishingiz mumkin. Masalan, quyidagi kod `/api/users` ga GET so'rovini stublaydi va soxta javobni qaytaradi:


cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

Keyin siz `cy.wait('@getUsers')` yordamida ushlangan so'rovni kutishingiz va ilovangiz soxta javobni to'g'ri qayta ishlashini tekshirishingiz mumkin.

Local Storage va Cookie'lar bilan ishlash

Cypress local storage va cookie'lar bilan ishlash uchun buyruqlar taqdim etadi. Ushbu buyruqlardan testlaringizda local storage va cookie'larni o'rnatish, olish va tozalash uchun foydalanishingiz mumkin.

Local storage elementini o'rnatish uchun `cy.window()` buyrug'idan foydalanib oyna obyektiga kirishingiz va keyin `localStorage.setItem()` metodidan foydalanishingiz mumkin. Masalan:


cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

Local storage elementini olish uchun `cy.window()` buyrug'idan va keyin `localStorage.getItem()` metodidan foydalanishingiz mumkin. Masalan:


cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

Cookie o'rnatish uchun `cy.setCookie()` buyrug'idan foydalanishingiz mumkin. Masalan:


cy.setCookie('myCookie', 'myCookieValue')

Cookie olish uchun `cy.getCookie()` buyrug'idan foydalanishingiz mumkin. Masalan:


cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

Fayl yuklashlarni qayta ishlash

Cypress `cypress-file-upload` deb nomlangan plaginni taqdim etadi, bu esa testlaringizda fayl yuklashlarni soddalashtiradi. Plaginni o'rnatish uchun quyidagi buyruqni bajaring:

npm install -D cypress-file-upload

Keyin, `cypress/support/commands.js` faylingizga quyidagi qatorni qo'shing:


import 'cypress-file-upload';

Shundan so'ng fayl yuklash uchun `cy.uploadFile()` buyrug'idan foydalanishingiz mumkin. Masalan:


cy.get('input[type="file"]').attachFile('example.txt')

IFrame'lar bilan ishlash

IFrame'larni testlash qiyin bo'lishi mumkin, ammo Cypress ular bilan ishlash usulini taqdim etadi. IFrame yuklanishini kutish uchun `cy.frameLoaded()` buyrug'idan, so'ngra IFrame'ning hujjat obyektini olish uchun `cy.iframe()` buyrug'idan foydalanishingiz mumkin.


cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

Cypress va Uzluksiz Integratsiya/Uzluksiz Yetkazib Berish (CI/CD)

Cypress'ni CI/CD quvuringizga integratsiya qilish ilovangiz sifatini ta'minlash uchun zarur. Siz Cypress testlarini CI/CD muhitingizda "headless" rejimida ishga tushirishingiz mumkin. Bu qanday amalga oshiriladi:

  1. Cypress'ni o'rnating: Cypress loyihangizda bog'liqlik sifatida o'rnatilganligiga ishonch hosil qiling.
  2. CI/CD'ni sozlang: CI/CD quvuringizni har bir qurilishdan keyin Cypress testlarini ishga tushirish uchun sozlang.
  3. Cypress'ni "Headless" rejimida ishga tushiring: Cypress testlarini "headless" rejimida ishga tushirish uchun `cypress run` buyrug'idan foydalaning.

CI/CD konfiguratsiyasi misoli (GitHub Actions yordamida):


name: Cypress Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

Ushbu konfiguratsiya kod `main` filialiga yuborilganda yoki `main` filialiga qarshi pull request yaratilganda Cypress testlarini ishga tushiradi. `cypress-io/github-action` amali GitHub Actions'da Cypress testlarini ishga tushirish jarayonini soddalashtiradi.

Cypress testlarini nosozliklarni tuzatish

Cypress testlaringizdagi muammolarni aniqlash va tuzatishga yordam beradigan ajoyib nosozliklarni tuzatish vositalarini taqdim etadi. Quyida Cypress testlarini nosozliklarni tuzatish bo'yicha ba'zi maslahatlar keltirilgan:

Cypress va boshqa testlash freymvorklari

Cypress kuchli end-to-end testlash freymvorki bo'lsa-da, uning boshqa mashhur variantlar bilan qanday taqqoslanishini tushunish muhim. Quyida qisqacha sharh keltirilgan:

Freymvork tanlovi loyihangizning o'ziga xos ehtiyojlari va talablariga bog'liq. Cypress tez, ishonchli va dasturchilar uchun qulay end-to-end testlashni talab qiladigan zamonaviy veb-ilovalar uchun ajoyib tanlovdir.

Cypress'ning real hayotdagi misollari

Keling, Cypress'dan turli xil veb-ilovalarni testlash uchun qanday foydalanish mumkinligini ko'rsatadigan bir nechta real hayotdagi misollarni ko'rib chiqaylik:

Elektron tijorat ilovasini testlash

Siz Cypress yordamida elektron tijorat ilovasida turli xil foydalanuvchi oqimlarini testlashingiz mumkin, masalan:

Quyida foydalanuvchi mahsulotni savatga muvaffaqiyatli qo'shishi mumkinligini tekshiradigan Cypress testi misoli keltirilgan:


it('Mahsulotni savatga qo\'shadi', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Ijtimoiy tarmoq ilovasini testlash

Siz Cypress yordamida ijtimoiy tarmoq ilovasida foydalanuvchi o'zaro ta'sirlarini testlashingiz mumkin, masalan:

Quyida foydalanuvchi yangi postni muvaffaqiyatli yaratishi mumkinligini tekshiradigan Cypress testi misoli keltirilgan:


it('Yangi post yaratadi', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Salom, dunyo!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Salom, dunyo!')
})

Bank ilovasini testlash

Bank ilovalari uchun Cypress quyidagi kabi muhim funksiyalarni testlash uchun ishlatilishi mumkin:

Mablag' o'tkazmasini tekshirish uchun test (xavfsizlik uchun tegishli stublash bilan) quyidagicha ko'rinishi mumkin:


it('Mablag\'larni muvaffaqiyatli o\'tkazadi', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

Xulosa

Cypress - bu veb-ilovalaringiz sifati va ishonchliligini ta'minlashga yordam beradigan kuchli va ko'p qirrali end-to-end testlash freymvorkidir. Uning dasturchilar uchun qulay API'si, kuchli funksiyalari va a'lo darajadagi ishlash samaradorligi uni butun dunyo bo'ylab dasturchilar va QA muhandislari orasida mashhur tanlovga aylantiradi. Ushbu qo'llanmada keltirilgan ilg'or tajribalarga rioya qilish orqali siz ishlab chiqish jarayonining dastlabki bosqichlarida xatoliklarni aniqlashga va foydalanuvchilaringizga yuqori sifatli dasturiy ta'minot yetkazib berishga yordam beradigan samarali Cypress testlarini yozishingiz mumkin.

Veb-ilovalar rivojlanishda davom etar ekan, end-to-end testlashning ahamiyati faqat ortib boradi. Cypress'ni o'zlashtirish va uni ishlab chiqish ish oqimingizga integratsiya qilish sizga yanada mustahkam, ishonchli va foydalanuvchilar uchun qulay veb-tajribalarni yaratishga imkon beradi.