Создайте Свой Первый Тест Cypress

Всем привет! Меня зовут Роман Мостафин.

Я тестировщик автоматизации в Clover и обычно пишу автоматические тесты, используя pytest + selenium. Недавно наша команда фронтенд-разработчиков начала использовать Cypress для написания UI-тестов в проекте «Умный Локомотив» для автоматизации регрессионного тестирования.

Я вызвался помочь им и вдохновился этой технологией.

В этой статье я расскажу о Cypress и о том, как создать с его помощью свой первый тест. Cypress — относительно новый фреймворк для написания тестов на Javascript. Он развертывает свой браузер и внедряет тесты в код страниц.

Кипарис имеет следующие преимущества:

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

В результате мы имеем универсальный и удобный фреймворк для написания различных типов тестов.



Теория

Для написания теста вам понадобятся шесть основных функций.

Давайте рассмотрим их и некоторые аргументы к ним, которые нужны для примера.



1. cy.visit()

Этот метод используется для перехода на страницу приложения.

Принимает в качестве аргумента строку с адресом страницы приложения:

  
  
  
  
  
   

cy.visit(‘ http://test.app.com ’);



2. cy.get()

Этот метод используется для получения элемента из DOM веб-страницы.

Принимает следующие аргументы: локатор элемента — адрес, по которому можно найти элемент; таймаут — время, в течение которого кипарис будет искать элемент на странице (по умолчанию 4 секунды).



cy.get(‘div[class=”topbar”]’, {timeout: 3000})



3. .

type()

Метод .

type используется для заполнения текстовых форм и различных полей.

Имеет следующие аргументы: Текст, который будет введен, представляет собой текст в строковом представлении.

Также текст может содержать команды клавиатуры, выделенные фигурными скобками; timeout — задержка перед выполнением команды типа.



cy.get(‘input’).

type(‘Hello world’, {timeout: 3000})



4. cy.wait()

Этот метод используется для временной остановки выполнения команд. Также может использоваться для ожидания завершения HTTP-запросов.

У него есть аргумент таймаута — фактическое время ожидания.



cy.wait(3000)



5. cy.fixture()

Этот метод используется для получения данных для теста.

Принимает имя файла JSON в качестве входных данных.



6. cy.should()

Метод проверки выражения.

Принимает в качестве входных данных следующие аргументы: команда сравнения – условие, по которому будет проверяться элемент; ожидаемый результат — ожидаемый результат проверки.



Упражняться

Возьмем форму авторизации Яндекса и в качестве примера проверим авторизацию с несуществующим логином и авторизацию с несуществующим паролем.

Для этого нужно сделать предварительные приготовления: 1. Создайте новую папку проекта.

2. Перейдите в папку проекта и выполните команду для установки Cypress:

npm install cypress --save-dev

3. Запустите Sypress командой:

npx cypress open

4. После запуска убедитесь, что в каталоге проекта появилась следующая иерархия:

Создайте свой первый тест Cypress

Теперь вам нужно создать приспособление.

Оно нам нужно для того, чтобы отделить тестовые данные от самого теста.

1. Создайте файл «cypressTest.json» в папке «fixtures» со следующим содержимым:

Создайте свой первый тест Cypress

2. Далее в папке «интеграция» создайте файл «habr_cypress_test.spec.js»:

Создайте свой первый тест Cypress

3. Описываем весь тестовый пример с помощью функцииdescribe:

Создайте свой первый тест Cypress

4. Внутри функции описания мы создадим наши тесты.

Напишем название первого.

тест:

Создайте свой первый тест Cypress

5. Следующий шаг — написать обращение к данным из фикстуры:

Создайте свой первый тест Cypress

И, наконец, создаём сам тест, используя знания о функциях Cypress.

Создайте свой первый тест Cypress

По аналогии создаем второй тест.

Создайте свой первый тест Cypress

Заходим в приложение Sypress, находим наш тест и кликаем по его названию.



Создайте свой первый тест Cypress

Далее откроется страница браузера, работающего под Cypress, и начнет выполняться тест: слева в отдельной колонке можно увидеть подробные этапы процесса.

Вам нужно подождать, пока тест запустится.



Создайте свой первый тест Cypress

Поздравляем, вы написали свои первые тесты на Cypress! P.S. Хотелось бы поблагодарить нашу фронтенд-команду, и в частности Аделя Хаматова, за помощь в изучении Cypress на проекте.

Теги: #тестирование #Тестирование веб-сервисов #автоматизация тестирования #автоматизация qa #cypress #qa cypress

Вместе с данным постом часто просматривают: