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

Основні особливості Cypress:

1. Дружній для розробників інтерфейс: Cypress має простий та зрозумілий синтаксис, що спрощує процес написання тестів для веб-додатків.
2. Автоматичне очікування: Cypress автоматично очікує дій користувача та подій у додатку, спрощуючи процес написання тестів.
3. Широкі можливості відлагодження: Фреймворк має вбудований інструмент для відлагодження тестів. Ви можете додавати перерви, спостерігати змінні стану, та використовувати інші інструменти для полегшення відлагодження.
4. Можливості вбудованого візуального тестування: Cypress дозволяє виконувати візуальне тестування в реальному часі.
5. Підтримка асинхронних операцій: Основна структура Cypress гарантує, що тести будуть виконуватися у відповідності до асинхронних операцій у веб-додатку.
6. Робота з DOM: Cypress надає простий доступ до DOM-елементів та можливість їх маніпулювання під час тестування.
7. Можливість тестування на різних пристроях: З допомогою інструментів Cypress можна емулювати різні пристрої та перевіряти реакцію додатку на різних пристроях.

Процес написання тестів у Cypress складається з написання тестових сценаріїв (тестів), які можна створювати за допомогою JavaScript. Вони використовують спеціальний синтаксис, який дозволяє інтерактивно взаємодіяти з веб-елементами.

Основні складові Cypress:

• Mocha тестовий фреймворк: Використовує Mocha для написання тестових сценаріїв.
• Chai бібліотека для перевірки: Використовує Chai для зручної перевірки тестових умов.
• jQuery подібні селектори: Використовує синтаксис селекторів, схожий на jQuery, для взаємодії з DOM-елементами.
• Cypress Dashboard: Платформа для збереження результатів тестів та їх аналізу.

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

Основні аспекти Cypress:

1. Простота використання: Cypress має інтуїтивний та зрозумілий API, що спрощує написання тестів. Він використовує зрозумілі команди та можливості для взаємодії з веб-елементами.
2. Автоматичне очікування: Фреймворк автоматично очікує дій користувача та подій у додатку, тому вам не потрібно вставляти чеки або останні очікування в тестах.
3. Висока продуктивність: Cypress має вбудовану паралельність тестів, що дозволяє швидше виконання тестів. Крім того, він забезпечує швидке відлагодження через свою архітектуру.
4. Широкі можливості відлагодження: Вбудований інструмент відлагодження дозволяє додавати точки зупинки, спостерігати змінні стану та використовувати інші інструменти для полегшення відлагодження.
5. Вбудоване візуальне тестування: Можливість перевіряти візуальні зміни під час виконання тестів у реальному часі.
6. Спеціальний підхід до асинхронності: Фреймворк вміє працювати з асинхронними операціями у веб-додатку, гарантуючи правильну послідовність виконання тестів.
7. Можливості тестування на різних пристроях: Ви можете емулювати різні пристрої та перевіряти реакцію додатку на різних пристроях.

Області застосування Cypress:

1. Функціональне тестування: Cypress ідеально підходить для написання функціональних тестів для веб-додатків. Ви можете перевірити роботу всіх функцій та інтерфейсу додатку.
2. Тестування юзабіліті та взаємодії: Цей фреймворк чудово підходить для тестування елементів взаємодії, перевірки узгодженості інтерфейсу та інших аспектів веб-додатків, що впливають на користувацький досвід.
3. Регресійне тестування: Cypress допомагає виявляти можливі проблеми, зберігаючи надійність і стабільність функціоналу під час розширення веб-додатків.
4. Тестування веб-проектів різного типу: Від невеликих веб-сайтів до складних веб-додатків, Cypress може бути застосований у проектах будь-якого масштабу та складності.
5. Інтеграційне тестування: Використовуючи Cypress, ви можете також виконувати тестування взаємодії між різними компонентами або сервісами у вашому веб-додатку.

Cypress став популярним фреймворком для тестування веб-додатків завдяки своїм потужним можливостям, простоті використання та широкому спектру застосування у тестуванні веб-додатків.

Cypress також дає можливість проведення тестів на різних рівнях: End-to-End (E2E) та компонентні (або модульні) тести.

End-to-End (E2E) тести:

1. Повне відтворення взаємодії користувача: Cypress дозволяє написати тести, які точно відтворюють дії користувача у веб-додатку. Це включає навігацію, взаємодію з елементами і перевірку стану додатку.
2. Синхронізація з автоматичним очікуванням: Вбудоване автоматичне очікування дозволяє Cypress очікувати стану елементів у додатку перед виконанням наступних дій, спрощуючи написання тестів E2E.
3. Візуальне тестування: Можливість проводити візуальні тести під час виконання тестів у реальному часі, що дозволяє перевіряти візуальні зміни у додатку.
4. Збереження стану між тестами: Cypress зберігає стан між кроками тестування, що дозволяє підтримувати стабільність і послідовність виконання тестів.

Компонентні (модульні) тести:

1. Підхід до тестування окремих компонентів: Cypress може бути використаний для тестування окремих компонентів, перевіряючи їх функціонал ізольовано від інших частин додатку.
2. Маніпулювання з DOM-елементами: Cypress надає зручний спосіб маніпулювати з DOM-елементами у ваших компонентних тестах.
3. Робота зі структурою компонентів: Можливість перевіряти структуру компонентів, їхню взаємодію та правильність відображення даних.
4. Асинхронність та ізоляція коду: Cypress може допомогти у роботі з асинхронними операціями в компонентних тестах, а також забезпечити ізоляцію коду під час тестування.

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

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

Порівняльна таблиця цих рівнів також надана у документації.

Інсталяція Cypress та базова конфігурація

Cypress підтримує можливість інсталяції за допомогою пакетних менеджерів npm, yarn або pnpm, але рекомендованим підходом є встановлення Cypress за допомогою npm, тому що:

• Cypress керується версіями, як і будь-які інші залежності.
• Це спрощує роботу Cypress при імплементації Continuous integration.

Також тут зазначені системні потреби в залежності від операційної системи та необхідні версії софта оточення для встановлення.

Керуючись best practices, опишемо процес інсталяції.

По-перше необхідно мати проініціалізований npm проект, який можна створити за допомогою команди npm init, знаходячись в терміналі на рівні директорії проекту.

Після того, як проект було проініціалізовано, та на рівні проекту з’являється package.json файл з базовою конфігурацією проекта можна встановити останню актуальну версію Cypress за допомогою команди:

npm install cypress --save-dev

Після завершення встановлення пакетів у папці node_modules проекту будуть додані пакети фреймворку. Також у devDependencies об’єкті файла package.json буде відображена поточна версія встановленого фреймворку.

Для того, щоб сформувати базову конфігурацю проекту Cypress далі необхідно запустити команду:

npx cypress open

Або можна використати npm, додавши відповідний скрипт у package.json, наприклад:Помилка

Тоді запуск буде також відбуватись за виконанням команди:

npm run cypress:open

Після запуску команди буде відкрито UI інтерфейс фреймворку та запропоновано обрати тип тестування (в нашому випадку нас буде цікавити саме E2E Testing):

Далі після вибору E2E Testing буде запропонований огляд сгенерованих базових конфігураційних файлів проекту:

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

ВАЖЛИВО! Cypress буде використовувати усі доступні браузери, які встановлені на Вашій операційній системи (окрім Safari) за виключенням Electron, який поставляється разом з фреймворком у момент його інсталяції. Версії браузерів для нього будуть доступні також відповідно встановленим на машині.

Після вибору браузера буде відкрито UI тест раннер Cypress`a, який дасть можливість створити новий spec файл Вашого тесту, сгеренувати декілька показових файлів для демонстрації (що бажано обрати у випадку, якщо поки що немає уяви про коректну структуру тестових файлів) та передивитися налаштування spec pattern`a, що означає опис налаштування патерна пошуку тест ранером відповідно сформованих та розташованих спек файлів:

При перегляді спек патерну також є можливість його відредагувати (але якщо знов таки нема впевненості в тому, як буде виглядати структура тестового проекту, краще залишити його у тому самому вигляді):

Якщо буде обрано генерацію демонстраційних тестових файлів, можна буде побачити їх структуру у проекті. Варто також зазначити, що надалі їх можна просто видалити, щоб не забруднювати тестовий проект:

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

Далі буде показано структуру створеного тест файлу:

Далі відповідно можна одразу запустити створений тест, або просто закрити процес. На цьому базовий сетап фреймворку буде закінчено.

Cypress UI

Cypress UI – це графічний інтерфейс користувача (UI), що надається в рамках самого фреймворку Cypress для зручного створення, налагодження та виконання тестів для веб-додатків.

Запуск Cypress UI режиму можливо зробити як описано у попередньому пункті – або виконавши npx cypress open, або відповідний npm скрипт.

Основні компоненти та можливості Cypress UI:

1. Dashboard (Панель управління): Це початкова точка взаємодії з Cypress, де ви можете переглядати список проектів, запускати та керувати виконанням тестів.
2. Project Explorer (Дослідження проекту): Відображає структуру вашого проекту та його файли. Тут можна переглядати та редагувати тести та конфігураційні файли.
3. Test Runner (Запуск тестів): Головний інструмент для виконання тестів. Він відображає результати виконання кожного окремого тесту та їхню відповідну візуалізацію, такі як позначення успіху або невдачі, журнали, час виконання тощо.
4. Command Log (Журнал команд): Показує список команд, які виконувалися під час тестування, включаючи їх порядок виконання та результати.
5. Viewport (Вікно браузера): Відображає поточний стан веб-сторінки у тесті, включаючи інтеракцію з елементами.
6. Application State (Стан додатку): Відображає стан вашого веб-додатку під час виконання тестів, такий як зміни стану URL, відображення або приховання елементів, зміни даних тощо.

Можливості Cypress UI:

• Відлагодження тестів: З Cypress UI ви можете відлагоджувати тести, додаючи точки зупинки, використовуючи команду debug(), спостерігаючи стан DOM тощо.
• Повторне виконання тестів: Є можливість повторного запуску тестів, переглядати результати попередніх тестувань та аналізувати прогрес тестування.
• Настройка виконання тестів: Ви можете налаштувати параметри тестування, такі як обмеження часу виконання, запуск окремих тестів або груп тестів, виключення окремих тестів тощо.
• Автоматичне відстеження змін: Під час виконання тестів Cypress автоматично відслідковує будь-які зміни в вашому додатку, що дозволяє бачити, як ваш додаток реагує на дії тестів.
• Налаштування проекту: Дає можливість переглянути та відреагувати конфігурацію тестового проекту, підключитись до Cypress Cloud.

Для повноцінного використання Cypress UI необхідно мати аккаунт у Cypress Cloud та відповідно підключити його до проекту, але на даному етапі можна ефективно використовувати Cypress UI саме для написання та відладки тестів.

До прикладу є можнивість інтерактивного запуску тестів із отриманням відповідних результатів тестування, також Cypress UI по дефолту робить снепшоти на кожну дію, описану у тестовому скрипті, що дає можливість покроково передивлятись дії скрипта та мати логи на ці дії:

Прості тести з Cypress та базові конструкції

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

describe() використовується для групування тестів у логічні блоки.

Приклад:

describe('Назва блоку тестів', () => {
  it('Опис тесту 1', () => {
    // Ваш тестовий код
  });

  it('Опис тесту 2', () => {
    // Ваш тестовий код
  });
});

it() використовується для опису окремих тестових випадків.

У фреймворку Cypress, describe та context є схожими за призначенням, але вони використовуються для різних цілей і мають трохи відмінні семантичні значення.

describe:

describe використовується для створення блоків тестів та групування пов’язаних тестів в логічні секції. Він використовується для структуризації тестових сценаріїв та організації пов’язаних тестів у логічні блоки.

Приклад:

describe('Робота з користувачами', () => {
  it('Перевірка реєстрації', () => {
    // Ваш тест для перевірки реєстрації
  });

  it('Перевірка входу в систему', () => {
    // Ваш тест для перевірки входу в систему
  });
});

context:

context також використовується для групування тестів, але зазвичай використовується для зміни контексту або для опису різних сценаріїв в межах однієї області.

Приклад:

describe('Робота з поштою', () => {
  context('Пошта вхідного ящика', () => {
    it('Перевірка відправки листа', () => {
      // Ваш тест для перевірки відправки листа
    });

    it('Перевірка перегляду вхідних листів', () => {
      // Ваш тест для перегляду вхідних листів
    });
  });

  context('Пошта вихідного ящика', () => {
    it('Перевірка функції відправки листа', () => {
      // Ваш тест для перевірки функції відправки листа
    });
  });
});

Хоча обидва describe та context можуть використовуватися для групування тестів, різниця полягає у використанні та семантиці. context може бути використаний для створення логічних сценаріїв в межах одного блоку, підкреслюючи конкретний контекст для виконання тестів. В той же час, describe використовується для загальної організації тестів у логічні блоки, не обов’язково пов’язані з конкретним контекстом чи станом системи.

Пошук елементів на сторінці:

• cy.get() використовується для пошуку DOM-елементів за селектором.
• Приклад:

it('Перевірка наявності елементу', () => {
  cy.get('.class-selector').should('exist');
});

Взаємодія з елементами:

• cy.click() використовується для кліку на елемент.
• Приклад:

it('Перевірка кліку на кнопку', () => {
  cy.get('.btn').click();
});

cy.type() використовується для введення тексту в поле вводу.

• Приклад:

it('Перевірка введення тексту', () => {
  cy.get('.input-field').type('Текст для введення');
});

Перевірка стану елементів:

• should() використовується для перевірки різних умов стану елемента.
• Приклад:

it('Перевірка стану елементу', () => {
  cy.get('.element-selector').should('be.visible');
});

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

Хуки та анотації

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

Хуки в Cypress:

1. before() та beforeEach():

• before() виконується один раз перед виконанням всього блоку тестів у describe() (тобто перед виконанням усіх it() у блоку).
• beforeEach() виконується перед кожним тестом у блоку describe().

Приклад:

describe('Тестовий блок', () => {
  before(() => {
    // Код, який виконується перед виконанням усіх тестів у блоку
  });

  beforeEach(() => {
    // Код, який виконується перед кожним окремим тестом у блоку
  });

  it('Тест 1', () => {
    // Код першого тесту
  });

  it('Тест 2', () => {
    // Код другого тесту
  });
});

2.after() та afterEach():

• after() виконується один раз після виконання всього блоку тестів у describe().
• afterEach() виконується після кожного тесту у блоку describe().

Приклад:

describe('Тестовий блок', () => {
  afterEach(() => {
    // Код, який виконується після кожного окремого тесту у блоку
  });

  after(() => {
    // Код, який виконується після виконання усіх тестів у блоку
  });

  it('Тест 1', () => {
    // Код першого тесту
  });

  it('Тест 2', () => {
    // Код другого тесту
  });
});

Анотації в Cypress:

.only та .skip:

Приклад:

• .only використовується для вказівки лише конкретних тестів чи блоків тестів для виконання.
• .skip використовується для пропуску виконання певних тестів чи блоків тестів.

it.only('Тест, який буде виконаний', () => {
  // Код тесту, який буде виконаний
});

it.skip('Тест, який буде пропущений', () => {
  // Код тесту, який буде пропущений
});

.timeout():

.timeout() встановлює максимальний час очікування для виконання певного тесту або команди.

Приклад:

it('Тест з встановленням таймауту', () => {
  cy.get('.element-selector', { timeout: 10000 }).should('be.visible');
});

.retry():

.retry() використовується для повторної спроби виконання команди або тесту у випадку невдачі.

Приклад:

it('Тест з повторною спробою', () => {
  cy.get('.element-selector', { timeout: 10000 }).should('be.visible').retry(3);
});

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

Огляд конфігурації Cypress

При дефолтовому сетапі фреймворку конфігурація зберігається у файлі cypress.config.js:

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

Тобто при необхідності визначення нового значення будь-якого параметру конфігурації треба додати його як ключ та значення параметра функції defineConfig()

Основні параметри конфігурації, які можна визначити, включають такі:

1. baseUrl:

Визначення базового URL для всіх тестів. Це дозволяє скоротити URL-шляхи у ваших тестах.

{
  "baseUrl": "https://example.com"
}

2.defaultCommandTimeout:

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

{
  "defaultCommandTimeout": 5000
}

3.fixturesFolder та specPattern:

Вказує шлях до папок з фікстурами та патерн знаходження тестових скриптів відповідно.

{
  "fixturesFolder": "cypress/fixtures",
  "specPattern": "**/*.cy.{js,jsx,ts,tsx}"
}

4.viewportWidth та viewportHeight:

Встановлює ширину та висоту вікна браузера для тестів.

{
  "viewportWidth": 1280,
  "viewportHeight": 720
}

5.screenshotsFolder та videosFolder:

Визначає шлях для збереження скріншотів та відео з результатами тестів.

{
  "screenshotsFolder": "cypress/screenshots",
  "videosFolder": "cypress/videos"
}

6.modifyObstructiveCode:

Дозволяє модифікувати код сторінки, що може заважати Cypress при виконанні тестів.

{
  "modifyObstructiveCode": false
}

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

Огляд Cypress Cloud

Cypress Cloud – це хмарна платформа, розроблена для автоматизованого тестування веб-додатків з використанням фреймворку Cypress. Цей сервіс надає можливості для швидкого та масштабованого запуску, виконання та управління тестами, дозволяючи командам розробників ефективно тестувати їхні веб-додатки у хмарному середовищі.

Основні можливості та функції Cypress Cloud включають:

1. Постійність середовища та конфігурації:

• Спрощений доступ до пристроїв та конфігурацій.
• Масштабоване середовище для виконання тестів на різних платформах, операційних системах та браузерах.

2. Підтримка паралельного виконання:

• Можливість запуску тестів паралельно на кількох пристроях/браузерах одночасно.
• Швидка здатність виконувати тести на великій кількості конфігурацій одночасно.

3. Інтеграція з CI/CD системами:

• Легка інтеграція з популярними CI/CD системами (наприклад, Jenkins, CircleCI, GitLab CI тощо).
• Автоматичний запуск тестів під час кожного пушу коду або після кожного білду.

4. Зручний інтерфейс користувача:

• Інтуїтивно зрозумілий інтерфейс для управління тестами, перегляду результатів і звітів.
• Можливість перегляду журналів виконання тестів, збереження результатів.

5. Моніторинг та аналіз результатів:

• Збереження журналів запуску тестів для подальшого аналізу.
• Статистика виконання тестів, повідомлення про помилки.

6. Підтримка власних тестових проектів:

Можливість завантаження тестових проектів для запуску в хмарному середовищі.

7. Безпека та конфіденційність:

• Захист даних та конфіденційності ваших тестових наборів.
• Дотримання відповідних стандартів безпеки та приватності.

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

В даному переліку посилань можна подивитись особливості налаштування та використання аспектів Cypress Cloud:

• Початкове налаштування;
• Історія тестових запусків;
• Відтворення тестів;
• Перегляд гілок;
• Flaky management;
• Перегляд аналітики;
• Оркестрація;
• Інтеграції;
• Менеджмент аккаунтів.

Додаткові матеріали

Introduction to Cypress

Testing Types

Installing Cypress

Cypress App

Writing and Organizing Tests

Configuration File

Cypress Cloud