Фреймворки тестирования считаются необходимыми для крупных и малых компаний. Они позволяют организовать работу надёжных программных продуктов и оставаться конкурентоспособными в отрасли. Хотя начать работу с ними может быть непросто. Ознакомьтесь с нашим руководством по Cypress и вы узнаете, как запускать не только ручные, но и автоматизированные тесты Cypress в системе управления тестированием (TMS) и на раннем этапе получать мгновенную информацию о нестабильных тестах, дефектах, тестовом покрытии и т.д. Если Cypress обещает обеспечить эффективное, последовательное и надежное тестирование, почему бы не воспользоваться этим преимуществом?

Подпишитесь на наш ТЕЛЕГРАМ КАНАЛ ПО АВТОМАТИЗАЦИИ ТЕСТИРОВАНИЯ

Что такое Cypress?

Cypress.io был разработан в 2015 году как фреймворк на базе JavaScript, позволяющий выполнять тестирование фронтенда непосредственно в браузере.

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

• юнит-тесты
• интеграционные тесты
• End-to-End (сквозные) тесты

Дополнительно, команда cy.task() в Cypress помогает тестировать поведение back-end, запуская код Node. Помимо этого, Cypress предоставляет панель управления CI\CD, которая визуализирует происходящие процессы.

Автоматизированное тестирование с помощью Cypress

Автоматизированное тестирование Cypress инициирует процесс выполнения на сервере NodeJS, который взаимодействует с Test Runner для запуска приложения и тестового кода в одном цикле событий. Поскольку автоматизация и код приложения используют одну и ту же платформу, специалисты QA и команда разработчиков сохраняют полный контроль над тестируемым приложением. Ниже вы можете ознакомиться с принципом работы инструмента тестирования Cypress:

Как написать первый тест на Cypress?

Прежде, чем мы начнём писать тесты, давайте установим Cypress. Введите в командной строке следующее:

npm install cypress --save-dev

Теперь, когда Cypress установлен, мы можем запустить его с помощью команды:

npx cypress open

Как только Cypress будет установлен, вы можете создать проект в IDE и приступить к написанию тестов Cypress. Все тесты можно найти в каталоге cypress/integration/. Давайте создадим пример:

1. Создайте новый файл и назовите его example.spec.js.
2. Добавьте в файл следующую информацию:

describe('Simple tests', () => {
  it('Visit Testomat.io website', () => {
    cy.visit('https://testomat.io/');
  });
});

Команда cy.visit() позволяет запустить браузер с URL-адресом, указанным в качестве аргумента.

1. С помощью Cypress Test Runner необходимо запустить файл example.spec.js.
2. После этого браузер должен открыться и перейти на сайт Testomat.io.

Как видите, это довольно просто!

Почему многие QA-команды выбирают Cypress?

Существует множество причин, почему Cypress.io является хорошим вариантом для команд разработчиков, особенно для JavaScript-инженеров, которые могут не только писать код, но и создавать тест-кейсы. С помощью Cypress.io инженеры программного обеспечения могут быстрее создавать современные приложения, избегая стрессовых ситуаций, связанных с управлением тестами. Уникальная архитектура Cypress помогает командам создавать более надежные и стабильные тесты как для QA-инженеров, так и для разработчиков.

Преимущества автоматизации тестирования с помощью Cypress

Здесь мы рассмотрим, в чём выгода фреймворка Cypress.io для команд разработки и QA:

• Cypress предоставляет отличную документацию и не требует дополнительной настройки для установки зависимостей и библиотек.
• Скриншоты и видеозапись. При выполнении автоматизированных тестов Cypress делает снимки экрана, чтобы специалисты QA или разработчики могли увидеть, что произошло на конкретном этапе, наведя курсор на определённые команды Cypress в журнале команд, и исправить дефекты.
• Функции Spies, Stubs и Clocks позволяют специалистам QA или командам разработчиков контролировать поведение ответов сервера, функций или таймеров и проверять их.
• Поддержка кросс-браузерного тестирования. Благодаря недавним обновлениям Cypress обеспечивает поддержку браузеров Firefox и Edge, благодаря чему команды могут выполнять тесты в этих браузерах.
• Cypress выполняет тесты в режиме реального времени и предоставляет визуальную обратную связь для внесения улучшений командами QA и разработчиков.
• Cypress поддерживает тестирование в стиле BDD и TDD.

Синхронизация тестов Cypress с ручным тестированием

Ручное тестирование становится достаточно затратным по времени и трудоемким для Agile команды QA, чтобы тестировать каждую новую функцию вручную. Разработка тестов Cypress расширяет масштабы деятельности Agile SDLC и предоставляет отличные возможности тестирования. Синхронизация Cypress с системой управления тестированием позволяет командам быть в курсе того, что произошло со всеми их тестами за пределами панели управления Cypress.

Давайте посмотрим, как все работает ?.

Более того, синхронизация управления тестированием Cypress гарантирует экономию времени при выполнении тестовых сценариев и почти 100%-ное покрытие тестов. Именно поэтому синхронизация автоматизированных и ручных тестов в одном месте имеет решающее значение для обеспечения гибкости. Кроме того, благодаря системе управления тестированием и ее метрикам можно отслеживать процесс тестирования, определять процент покрытия автоматизированными тестами и показывать результаты в режиме реального времени.

Начало работы с Cypress на примере

Большинство фреймворков тестирования, таких как Playwright, Cucumber, Protractor, TestCafe и т.д., позволяют интегрировать Cypress с системой управления тестированием, чтобы лучше управлять и контролировать выполнение тестов Cypress. В итоге, объединение этих систем представляется оптимальным вариантом практически для всех команд, использующих эти инструменты тестирования для выполнения тестов Cypress.

Для успешного начала работы наша команда подготовила ряд демо-проектов, которые вы можете бесплатно скачать по ссылке. Но прежде чем использовать пример фреймворка Cypress для тестирования, необходимо ознакомиться с учебным пособием по Cypress.

Шаги, которые необходимо выполнить для запуска примера в системе управления тестированием testomat.io:

Предварительные условия для использования Cypress Testing Framework

Обязательным условием является наличие предустановленной среды выполнения JavaScript Node.js. Если этого не сделано, необходимо загрузить и установить Node.js для конкретной ОС. Выполнив в терминале следующую команду, можно убедиться в правильности установки:

node --version

Также необходимо учитывать, что Cypress поддерживает Node.js 10 и выше.

Проверьте версию npm, выполнив команду в командной строке:

npm --version

1. Создание нового тестового проекта

При входе в TMS вы обнаружите два варианта создания проекта:

• Классический проект Cypress: описания тестов представляются в формате markdown
• BDD-проект Cypress: тесты представляются в формате Gherkin

Сделав выбор, вы можете записать название проекта и легко создать новый проект для запуска тестов Cypress в один клик – просто нажав кнопку Create.

2. Импорт автоматизированных тестов Cypress в TMS

После ввода названия проекта можно импортировать тесты из исходного кода, выбрав в выпадающем меню пункт Import automated tests.

После этого необходимо выбрать наиболее подходящую комбинацию языков программирования для вашего проекта Cypress.

Cypress Framework работает в следующей комбинации:

• Cypress.io+Javascript
• Cypress.io+TypeScript
• Cypress.io+BDD(Gherkin)

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

TESTOMATIO='API' npx check-tests@latest Cypress.io "**/*{.,_}{test,spec}.js" --dir cypress/integration/* 

Организуйте свои тесты Cypress наилучшим образом

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

Advanced Markdown Editor поможет вам наилучшим образом структурировать тест-кейс или тестовый набор, включая следующие:

• добавление тегов
• изменение порядка
• перемещение в другую папку тестов или создание новой папки

• использование опций bulk edit
• фильтрация по характеристикам (состояние/тег/приоритет/присвоено) для быстрого поиска

• сортировка тестов по типу Ручные тесты, Автоматизированные, Несинхронизированные или Отключенные.

• Advanced BDD Editor позволяет быстро описывать BDD-сценарии на языке Gherkin с помощью автозаполнения и автоформатирования базы данных центральных шагов. Система автоматической валидации оповестит о синтаксических ошибках языка Gherkin и предложит их исправить.

• Project Timeline проекта или Pulse – все изменения, кем и когда выполнены определенные действия, можно обнаружить с их помощью. Кроме того, вы можете выполнить откат и восстановить предыдущую версию.

“Как я могу создать отчет в Cypress?”

Чтобы получить подробный отчет и отслеживать результаты тестирования в режиме реального времени, необходимо установить репортер Cypress testomat.io, настроить конфигурационный файл и запустить тест-кейсы.

3. Установка репортера

Скопируйте и вставьте эту команду в терминал для установки репортера:

npm i --save-dev @testomatio/reporter

4. Настройка файла .Conf:

После этого добавьте управление тестированием в файл cypress.config.js. Для этого скопируйте конфигурацию, предложенную TMS в вашем фреймворке тестирования.

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // testomat.io reporter plugin:
      require('@testomatio/reporter/lib/adapter/cypress-plugin')(on, config);
    },
  },
})

5. Выполнение сценариев тестирования Cypress.io

Теперь вы готовы к выполнению тестов Cypress.io с помощью системы управления тестированием. Выполняйте скрипты Cypress.io и получайте результаты, синхронизированные в системе управления тестированием.

Выполните следующую команду из папки проекта:

TESTOMATIO_URL=https://beta.testomat.io TESTOMATIO='API' npx cypress run

После завершения автоматизированного тестового запуска вы получите отчет о тестировании, которым можно будет поделиться с вашим клиентом или другими заинтересованными сторонами.

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

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

Запуск набора тестирования Cypress на CI\CD

Чтобы воспользоваться преимуществами автоматизации тестирования для ваших команд разработчиков и специалистов QA, мы обеспечиваем полную интеграцию с популярными инструментами CI\CD, такими как GitHub, GitLab, Jenkins, Bamboo и CircleCI, для создания надежного конвейера CI\CD, повышения качества кода и надежности программного обеспечения.

Мы надеемся, что представленное выше руководство по Cypress поможет вам правильно начать работу с продвинутым фреймворком тестирования.

Сравнительная таблица Cypress VS Selenium VS CodeceptJS

Признать важность представленного руководства по Cypress – это одно, а выбрать лучший фреймворк для ваших нужд тестирования – совсем другое. Учитывая это, мы решили сравнить некоторые инструменты тестирования по нескольким важным факторам, чтобы помочь вам принять решение.

Cypress	Selenium	CodeceptJS
Инструмент с открытым исходным кодом	Инструмент с открытым исходным кодом	Инструмент с открытым исходным кодом
Используется разработчиками и тестировщиками	Используется тестировщиками	Используется разработчиками и тестировщиками
Поддерживает TypeScript/JavaScript	Поддерживаются Java, Python, Scala, Ruby, C#, Perl, Groovy, PHP	Поддерживает JavaScript
Поддерживаемые браузеры – Chrome/Electron/Firefox	Поддерживаемые браузеры – Chrome/Firefox/Edge/Internet Explorer/Safari/Opera	Поддерживаемые браузеры – Chrome/Firefox/Edge/Electron/Safari/
End-to-end тесты Интеграционные тесты Юнит-тесты Функциональное тестирование	Тестирование производительности, интеграционное тестирование, End-to-end тестирование, регрессионное тестирование	End-to-end тесты Интеграционные тесты Юнит-тесты
Совместимость с Windows/Linux/macOS	Совместимость с Windows/Linux/macOS	Совместимость с Windows/Linux/macOS

Компаниям, не сумевшим комплексно организовать процесс тестирования, будет сложно быстро выпускать высококачественные программные продукты. Внедрение системы автоматизации тестирования – это инвестиция в будущее компании. Она не только обеспечивает наглядность вашей деятельности по тестированию, но и помогает повысить производительность и обеспечить отличное тестовое покрытие.

Перевод статьи «The Ultimate Cypress Tutorial: How to Organize your Advanced Testing Framework».