Cypress – приклад створення першого end-to-end тесту

Cypress – це JavaScript фреймворк для автоматизації тестування, за допомогою котрого можна писати наступні види тестів:

• end-to-end
• інтеграційні
• unit тести
• тести компонентів

Перед початком роботи з Cypress необхідно мати встановлені Node.js та NPM:

Встановлення Node.js та NPM на Windows

Встановлення Cypress

Переходжу в директорію майбутнього проекту тестів cypress_examples та попередньо виконую команду:

npm init

npm init – використовується для створення файлу package.json, в якому зберігаються метадані та залежності для проекту. Це дозволяє легко керувати своїм проектом і ділитися ним з іншими.

Під час виконання ініціалізації, було поставлено питання стосовно налаштувань, на які я здебільшого обрав значення за замовчуванням, натискаючи Enter:

Встановлюю Cypress командою:

npm install cypress --save-dev

Це встановить Cypress локально, як дев залежність у проект:

Після виконання команди, в директорію cypress_examples було автоматично додано папку node_modules та файл package-lock.json:

• node_modules – зберігає модулі, необхідні для проекту
• package-lock.json – описує дерево залежностей, щоб інші учасники команди під час розгортання проекту, гарантовано встановили однакові залежності

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

Підготовка проекту

Запускаю проект Cypress командою:

npx cypress open

npx – це інструмент командного рядка для запуску пакетів встановлених npm. Встановлюється автоматично разом з npm.

Після чого відкривається Launchpad, котрий допоможе створити початкову конфігурацію для тестів:

На першому кроці потрібно обрати тип тестів, які збираємось писати (в моєму прикладі обираю E2E тест).

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

На наступному кроці Launchpad запропонує список сумісних браузерів для тестування, знайдених у вашій системі. Обираю Chrome:

Після виконання команди npx cypress open та всіх пройдених кроків, в директорії проекту з тестами було автоматично додано файл cypress.config.js, а також папку cypress, яка містить всередині ще дві папки – fixtures та support:

• cypress.config.js – файл, що містить налаштування специфічні саме для Cypress
• cypress/fixtures – призначена для файлів фікстур, що зберігають статичні дані в JSON форматі, які можна використовувати в тестах
• cypress/support – в цій папці повинні зберігатись файли з кастомними командами або глобальними змінними, котрі можуть бути повторно використано в декількох тестах. Також сюди можна додати команди, котрі будуть виконуватись попередньо, перед кожною специфікацією (тестовим файлом)

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

Генерація шаблону для першого end-to-end тесту

По завершенню попередніх налаштувань з командою npx cypress open, та натискання кнопки Start E2E Testing in Chrome повинен автоматично запуститись браузер Chrome, з відкритою веб-сторінкою, що містить панель керування тестовим проектом:

Для додавання першого тесту, в розділі Specs скористаюсь кнопкою Create new spec (в Cypress під spec мається на увазі тестовий файл):

Як можна помітити, за замовчування тестові файли (specifications) повинні повинні лежати в папці cypress/e2e та мати розширення .cy.js. Після натискання Create spec Cypress автоматично згенерує простий тест, котрий не робить нічого особливого, лише відкриває сторінку за вказаним посиланням:

Для написання першого справжнього тесту, відкриваю директорію з проектом в Visual Studio Code, та переходжу до редагування щойно створеного файлу spec.cy.js:

Написання першого end-to-end тесту Cypress

Опис тесту:

• відкрити сторінку todo блокнота за посиланням https://todomvc.com/examples/react/#/
• додати одну нотатку з текстом simple todo
• перевірити, що в списку нотаток було додано запис з відповідним текстом

Код тесту:

describe('Todomvc test', () => {
  it('Add one todo', () => {
    cy.visit('https://todomvc.com/examples/react/#/')
    cy.get('.new-todo').type('simple todo{enter}')
    cy.get('.view label').should('have.text', 'simple todo')
  })
})

• describe та it – складають базову структуру тестів написаних на Cypress, вони запозичені з іншого JavaScript фреймворку для автоматизації тестування Mocha
• describe – використовується для групування тест кейсів та приймає два аргументи, перший – ім’я (опис) тестової групи, а другий – callback функція. В одному файлі може бути декілька describe. Також один describe може бути оголошений всередині іншого
• it – використовується для індивідуального тесту та приймає два аргументи: рядок, який пояснює що повинен робити тест, та callback функцію яка містить фактичне тіло тесту
• ланцюжки команд Cypress завжди починаються з cy.<comand>…
• cy.visit – відкриває сторінку в браузері, в якості аргументу приймає URL
• cy.get – повертає один, або декілька елементів з DOM, в якості аргументу приймає локатор елемента
• type – ввід значення в текстове поле. Також слід додати, що до рядку тексту я додав опцію {enter} – це потрібно для натискання клавіши Enter, після вводу тексту в поле (саме так в додатку TodoMVC додаються нові нотатки)
• shold – створює твердження (assertion). В моєму випадку перевірка наявності тексту, в щойно доданому todo

Зберігаю свій тест в редакторі Visual Studio Code:

Запуск тесту та перегляд результатів

Для запуску тесту повертаюсь панель керування тестами Cypress, переходжу в розділ Specs, та клікаю по своїй spec (вона на поточний момент залишається єдиною, в моєму тестовому проекті):

Результат виконання тесту:

• в лівій стороні Test Runner відображається перелік тестів. В середині кожного тесту перелік виконаних команд зі статусом
• в завершенні тесту Add one todo можна побачити assert з описом та статусом
• в правій стороні Test Runner, відображається сторінка веб-додатку що тестується, станом на момент завершення тесту
• за допомогою наведення миші на окремі команди, є можливість переміщатися по історії виконання тесту, та переглядати взаємодію тесту зі сторінкою, на момент виконання команди (права сторона Test Runner)