M

MLOG

Українська

Вичерпний посібник з Cypress, потужного фреймворку для наскрізного тестування, що охоплює встановлення, написання тестів, налагодження, інтеграцію з CI/CD та найкращі практики.

Cypress: Повний посібник з наскрізного тестування для вебзастосунків

У сучасному світі веб-розробки, що стрімко розвивається, забезпечення якості та надійності вебзастосунків має першочергове значення. Наскрізне (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('Мій перший тест', () => {
  it('Відвідує 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 для повного списку команд та їх опцій.

Твердження (Assertions) в 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')` і перевірити, чи ваш застосунок коректно обробляє мок-відповідь.

Робота з локальним сховищем та файлами cookie

Cypress надає команди для взаємодії з локальним сховищем та файлами cookie. Ви можете використовувати ці команди для встановлення, отримання та очищення локального сховища та файлів cookie у ваших тестах.

Щоб встановити елемент локального сховища, ви можете використовувати команду `cy.window()` для доступу до об'єкта window, а потім використати метод `localStorage.setItem()`. Наприклад:


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

Щоб отримати елемент локального сховища, ви можете використовувати команду `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()` для отримання об'єкта document IFrame.


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

Cypress та безперервна інтеграція/безперервне розгортання (CI/CD)

Інтеграція Cypress у ваш CI/CD-пайплайн є важливою для забезпечення якості вашого застосунку. Ви можете запускати тести Cypress в headless-режимі у вашому середовищі CI/CD. Ось як:

  1. Встановіть Cypress: Переконайтеся, що Cypress встановлено як залежність у вашому проєкті.
  2. Налаштуйте CI/CD: Налаштуйте ваш CI/CD-пайплайн для запуску тестів Cypress після кожної збірки.
  3. Запустіть Cypress у headless-режимі: Використовуйте команду `cypress run` для запуску тестів Cypress у headless-режимі.

Приклад конфігурації 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 є потужним фреймворком для наскрізного тестування, важливо розуміти, як він співвідноситься з іншими популярними варіантами. Ось короткий огляд:

Вибір фреймворку залежить від конкретних потреб та вимог вашого проєкту. Cypress є чудовим вибором для сучасних вебзастосунків, які вимагають швидкого, надійного та дружнього до розробників наскрізного тестування.

Реальні приклади використання Cypress

Давайте розглянемо кілька реальних прикладів того, як Cypress можна використовувати для тестування різних типів вебзастосунків:

Тестування застосунку для електронної комерції

Ви можете використовувати Cypress для тестування різних користувацьких сценаріїв у застосунку для електронної комерції, таких як:

Ось приклад тесту Cypress, який перевіряє, що користувач може успішно додати товар у свій кошик:


it('Додає товар у кошик', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Тестування застосунку соціальної мережі

Ви можете використовувати Cypress для тестування взаємодій користувачів у застосунку соціальної мережі, таких як:

Ось приклад тесту Cypress, який перевіряє, що користувач може успішно створити новий допис:


it('Створює новий допис', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Привіт, світе!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Привіт, світе!')
})

Тестування банківського застосунку

Для банківських застосунків Cypress можна використовувати для тестування критично важливих функцій, таких як:

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


it('Успішно переказує кошти', () => {
  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 — це потужний та універсальний фреймворк для наскрізного тестування, який може допомогти вам забезпечити якість та надійність ваших вебзастосунків. Його дружній до розробників API, потужні функції та відмінна продуктивність роблять його популярним вибором серед розробників та QA-інженерів у всьому світі. Дотримуючись найкращих практик, викладених у цьому посібнику, ви зможете писати ефективні тести Cypress, які допоможуть вам виявляти помилки на ранніх етапах процесу розробки та надавати високоякісне програмне забезпечення вашим користувачам.

Оскільки вебзастосунки продовжують розвиватися, важливість наскрізного тестування буде тільки зростати. Використання Cypress та його інтеграція у ваш робочий процес розробки дозволить вам створювати більш надійні, стабільні та зручні для користувача веб-рішення.