M

MLOG

Български

Изчерпателно ръководство за Cypress – мощна рамка за E2E тестване. Покрива инсталация, писане на тестове, дебъгване, CI/CD и най-добри практики.

Cypress: Най-доброто ръководство за E2E тестване на уеб приложения

В днешния бързо развиващ се пейзаж на уеб разработката, гарантирането на качеството и надеждността на уеб приложенията е от първостепенно значение. End-to-End (E2E) тестването играе решаваща роля за проверка дали всички компоненти на едно приложение работят безпроблемно заедно от гледна точка на потребителя. Cypress се превърна във водеща E2E тестова рамка, предлагаща приятелско изживяване за разработчиците, мощни функции и отлична производителност. Това изчерпателно ръководство ще ви преведе през всичко, което трябва да знаете, за да започнете с Cypress и ефективно да тествате вашите уеб приложения.

Какво е Cypress?

Cypress е фронтенд тестови инструмент от следващо поколение, създаден за модерния уеб. За разлика от традиционните тестови рамки, които изпълняват тестове в браузър, Cypress работи директно в браузъра, давайки ви несравним контрол и видимост върху поведението на вашето приложение. Той е проектиран да бъде бърз, надежден и лесен за използване, което го прави популярен избор сред разработчици и QA инженери по целия свят. Cypress е написан на JavaScript и се изпълнява в браузъра, което го прави много производителен и предлага несравним достъп до вътрешността на приложението.

Ключови предимства от използването на Cypress

Инсталация и настройка

Започването с Cypress е лесно. Ето как да го инсталирате:

  1. Предварителни изисквания: Уверете се, че имате инсталирани Node.js и npm (Node Package Manager) на вашата система. Можете да ги изтеглите от официалния уебсайт на Node.js.
  2. Инсталиране на Cypress: Отворете вашия терминал или команден ред, навигирайте до директорията на вашия проект и изпълнете следната команда:
    3. npm install cypress --save-dev
  3. Отваряне на Cypress: След като инсталацията приключи, можете да отворите Cypress Test Runner, като изпълните:
    4. npx cypress open

    Тази команда ще стартира Cypress Test Runner, който предоставя графичен интерфейс за изпълнение и дебъгване на вашите тестове.

Писане на първия ви Cypress тест

Нека създадем прост тест, за да проверим дали началната страница на уебсайт се зарежда правилно. Създайте нов файл с име `example.cy.js` в директорията `cypress/e2e` на вашия проект.


// cypress/e2e/example.cy.js

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    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')
  })
})

Нека разгледаме този тест:

Изпълнете този тест в Cypress Test Runner, за да го видите в действие. Трябва да видите как браузърът се навигира до уебсайта Cypress Kitchen Sink, кликва върху връзката "type" и проверява URL адреса.

Cypress команди

Cypress предоставя широк набор от команди за взаимодействие с вашето приложение. Ето някои от най-често използваните команди:

Това са само част от многото команди, налични в Cypress. Обърнете се към документацията на Cypress за пълен списък с команди и техните опции.

Твърдения в Cypress

Твърденията се използват за проверка на очакваното поведение на вашето приложение. Cypress предоставя богат набор от вградени твърдения, които можете да използвате, за да проверявате състоянието на елементи, URL адреса, заглавието и други. Твърденията се свързват след Cypress командите чрез метода `.should()`.

Ето някои често срещани примери за твърдения:

Можете също така да създавате персонализирани твърдения, за да отговорите на вашите специфични нужди.

Най-добри практики за писане на Cypress тестове

Следването на най-добрите практики може да ви помогне да пишете по-поддържаеми, надеждни и ефективни Cypress тестове. Ето някои препоръки:

Напреднали Cypress техники

Заглушаване и мокиране (Stubbing and Mocking)

Cypress ви позволява да заглушавате мрежови заявки и отговори, което ви дава възможност да симулирате различни сценарии и да тествате обработката на грешките във вашето приложение. Това е особено полезно за тестване на функции, които разчитат на външни API или услуги.

За да заглушите мрежова заявка, можете да използвате командата `cy.intercept()`. Например, кодът по-долу заглушава GET заявка към `/api/users` и връща фалшив отговор:


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

След това можете да изчакате прихванатата заявка, като използвате `cy.wait('@getUsers')`, и да проверите дали вашето приложение обработва фалшивия отговор правилно.

Работа с Local Storage и Cookies

Cypress предоставя команди за взаимодействие с local storage и cookies. Можете да използвате тези команди, за да задавате, получавате и изчиствате local storage и cookies във вашите тестове.

За да зададете елемент в local storage, можете да използвате командата `cy.window()`, за да получите достъп до обекта на прозореца и след това да използвате метода `localStorage.setItem()`. Например:


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

За да получите елемент от local storage, можете да използвате командата `cy.window()` и след това метода `localStorage.getItem()`. Например:


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

За да зададете cookie, можете да използвате командата `cy.setCookie()`. Например:


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

За да получите cookie, можете да използвате командата `cy.getCookie()`. Например:


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

Обработка на качване на файлове

Cypress предоставя плъгин, наречен `cypress-file-upload`, който опростява качването на файлове във вашите тестове. За да инсталирате плъгина, изпълнете следната команда:

npm install -D cypress-file-upload

След това добавете следния ред към вашия файл `cypress/support/commands.js`:


import 'cypress-file-upload';

След това можете да използвате командата `cy.uploadFile()`, за да качите файл. Например:


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

Работа с IFrames

Тестването на IFrames може да бъде сложно, но Cypress предоставя начин за взаимодействие с тях. Можете да използвате командата `cy.frameLoaded()`, за да изчакате IFrame да се зареди, и след това да използвате командата `cy.iframe()`, за да получите обект на документа на IFrame.


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

Cypress и непрекъсната интеграция/непрекъснато разгръщане (CI/CD)

Интегрирането на Cypress във вашия CI/CD пайплайн е от съществено значение за осигуряване на качеството на вашето приложение. Можете да изпълнявате Cypress тестове в режим без глава във вашата CI/CD среда. Ето как:

  1. Инсталиране на Cypress: Уверете се, че Cypress е инсталиран като зависимост във вашия проект.
  2. Конфигуриране на CI/CD: Конфигурирайте вашия CI/CD пайплайн да изпълнява Cypress тестове след всяка компилация.
  3. Изпълнение на Cypress без глава: Използвайте командата `cypress run`, за да изпълнявате Cypress тестове в режим без глава.

Примерен CI/CD конфигурация (използвайки GitHub Actions):


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'

Тази конфигурация ще изпълнява Cypress тестове всеки път, когато код се изпрати към `main` клона или се създаде pull заявка срещу `main` клона. Действието `cypress-io/github-action` опростява процеса на изпълнение на Cypress тестове в GitHub Actions.

Дебъгване на Cypress тестове

Cypress предоставя отлични инструменти за дебъгване, които да ви помогнат да идентифицирате и отстраните проблеми във вашите тестове. Ето няколко съвета за дебъгване на Cypress тестове:

Cypress срещу други тестови рамки

Въпреки че Cypress е мощна рамка за E2E тестване, е важно да разберете как се сравнява с други популярни опции. Ето кратък преглед:

Изборът на рамка зависи от специфичните нужди и изисквания на вашия проект. Cypress е отличен избор за модерни уеб приложения, които изискват бързо, надеждно и приятелско към разработчиците E2E тестване.

Реални примери за Cypress в действие

Нека разгледаме няколко реални примера за това как Cypress може да се използва за тестване на различни видове уеб приложения:

Тестване на E-commerce приложение

Можете да използвате Cypress, за да тествате различни потребителски потоци в e-commerce приложение, като например:

Ето пример за Cypress тест, който проверява дали потребител може успешно да добави продукт в количката си:


it('Adds a product to the cart', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Тестване на социално медийно приложение

Можете да използвате Cypress, за да тествате потребителски взаимодействия в социално медийно приложение, като например:

Ето пример за Cypress тест, който проверява дали потребител може успешно да създаде нова публикация:


it('Creates a new post', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Hello, world!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Hello, world!')
})

Тестване на Банково приложение

За банкови приложения Cypress може да се използва за тестване на критични функционалности като:

Тест за проверка на прехвърляне на средства може да изглежда така (с подходящо заглушаване за сигурност):


it('Transfers funds successfully', () => {
  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')
})

Заключение

Cypress е мощна и гъвкава рамка за E2E тестване, която може да ви помогне да гарантирате качеството и надеждността на вашите уеб приложения. Неговият приятелски API за разработчици, мощни функции и отлична производителност го правят популярен избор сред разработчици и QA инженери по целия свят. Като следвате най-добрите практики, очертани в това ръководство, можете да пишете ефективни Cypress тестове, които ще ви помогнат да улавяте грешки в ранен етап от процеса на разработка и да доставяте висококачествен софтуер на вашите потребители.

Тъй като уеб приложенията продължават да се развиват, значението на E2E тестването ще нараства. Приемането на Cypress и интегрирането му във вашия работен процес за разработка ще ви даде възможност да изграждате по-стабилни, надеждни и удобни за потребителя уеб преживявания.