Home

Автор: Тоби Стид (Toby Steed)
Оригинал статьи
Перевод: Ольга Алифанова

Cypress – очень впечатляющий тест-инструмент. Последние лет 13 я работал на C# и Selenium, но недавно, стараясь идти в ногу со временем, я рассмотрел более популярные JavaScript-инструменты.

Я вначале отбросил Cypress, потому что предпочитаю работать с библиотеками, а не фреймворками. Мне нравится, когда я свободен в построении своего собственного фреймворка вокруг выбранных мною для решения проблемы библиотек. Cypress – готовый фреймворк "из коробки", и со временем я понял, как он хорош. Он очень мощен прямо с момента установки, и в нем можно быстро и легко написать хорошие, устойчивые тесты – кривая обучения у него довольно пологая.

Если вы ранее не пользовались Cypress, то эта серия статей поможет вам легко установить Cypress и начать писать тесты. Мы даже разовьем этот опыт, воспользуясь Page Object, создадим свои собственные вспомогательные классы, и напишем кастомные команды для расширения возможностей фреймворка. В первой части цикла мы установим новый проект Cypress, настроим его и напишем наш первый тест.

Прежде чем начать, вам нужно установить Visual Studio Code и Node.Js (на момент выхода этой статьи актуальная версия – 1.18.0, но если что-то изменилось, просто воспользуйтесь самой последней версией).

Допустим, что все это уже установлено. Поехали!

• Создайте новую директорию для проекта, и, открыв VSCode, используйте эту команду в терминале (Ctrl+Shift+’), чтобы изменить активную директорию на проектную:

cd your/project/path

• Это необязательный шаг, но всегда неплохо инициализировать проектную директорию с базовыми необходимыми файлами, работая с npm-пакетами:

npm init

• Терминал задаст вам ряд вопросов, но не стесняйтесь просто давить на Энтер – если вам лень отвечать, применятся значения по умолчанию. Когда вы это сделаете, в проектной папке появится файл package.json, содержащий все детали ваших ответов на вопросы, все кастомные скрипты (мы займемся ими чуть позже) и список пакетов – он будет пустым. Давайте это исправим.
• Время скачивать Cypress. Он поставляется как пакет, и при помощи npm мы установим его в наш проект. Нет ничего проще – нужна одна простенькая команда. Вот она:

npm install cypress –dev

• Она довольно самоочевидна, если не считать последней части. Флаг –dev говорит Cypress устанавливаться с dev-зависимостью – это значит, что он требуется только для разработки. Установка без этого флага командует проекту установить пакет для запуска. После ввода вышеуказанной команды наслаждайтесь бегущим по терминалу тексту или налейте себе что-нибудь – это займет несколько минут.
• Как только процесс завершен, вы, наверное, начнете таращиться в проектную папку, гадая, а где же Cypress. Помимо новой папки node_modules, которую можно пока игнорировать, не появится ничего нового. Это легко исправить командой инициализации Cypress:

npx cypress open

• npx – не опечатка, эта команда объединена с npm и позволяет куда быстрее запускать Cypress. Введя ее, вы получите строку текста в терминале, сообщающую, что вы запускаете Cypress для этого проекта впервые. Затем она пропадет, настроит много чего еще, и когда все это закончится, Cypress стартует! У нас появится новый модный дашборд, но что еще важнее – в проекте появится новая папка и файлы, которые можно начинать использовать. К дашборду мы еще вернемся – давайте посмотрим в код и разберемся, что же у нас теперь есть.
• Сначала вы увидите папку Cypress, с которой мы будем работать в ряде следующих статей. Внутри она разделена так:

cypress/fixtures

cypress/integration

cypress/plugins

cypress/support

И в корневой папке будет файл конфигурации:

foldername/cypress.json

• В папке Integration будут жить ваши тесты. Внутри нее можно создавать новые папки, чтобы структурировать тесты так, как вам надо, но все тесты всегда должны находиться только внутри этой папки. Cypress автоматически подхватит все .js-файлы из этой папки и добавит их на дашборд. Если вы запускаетесь через Cypress CLI, то тесты автоматически подхватятся, если вы прогоняете все тесты и не пользуетесь кастомными командами.
• Папка Fixtures будет содержать все нужные вам данные в JSON-формате. Это могут быть ответы на запрос или другие специальные данные, но они должны храниться в формате JSON.
• В папке Plugins по умолчанию находится единственный файл – index.js, и для 90% тест-задач его вам хватит за глаза. В этот индекс-файл будут добавляться все плагины, которые нужны вам на глобальном уровне.
• И, наконец, папка Support. Она похожа на папку Plugins, в ней тоже лежит индекс-файл, нужный для объявления глобальных модулей, которые вы не хотите импортировать для каждого файла. Также там находится файл команд, в котором можно создавать кастомные команды для Cypress. Они пригодятся для расширения Cypress или описания нужных вам методов.
• Мы подробнее разберемся с этим в ходе цикла статей, но пока не волнуйтесь о них. Сейчас вам нужна только папка Integration – там мы будем создавать первый тест! Добавьте новый файл в эту папку, назовите его как хотите, но для целей этой статьи назовем его FirstTest.spec.js. Важно, чтобы в имени файла было слово spec, иначе Cypress не поймет, что это валидный тестовый файл, и не увидит в нем тесты.
• Теперь, когда у нас есть тест-файл, напишем базовый тест. Как выглядит Cypress-тест, и что все это значит?

describe('My First Tests', () => {
  it('Visiting Google displays the correct title', () => {
    cy.visit('https://google.co.uk')
    cy.title().should('contain', 'Google');
  })
})

Уверен, вы согласитесь, что это очень сложный тест. Но все равно поздравляю – вы написали ваш первый тест в Cypress! Что же он делает?

Если вы не знакомы с тестированием JavaScript, то ключевые слова "describe" и "it" будут для вас новостью. Если вы ими пользовались, то вы распознаете их как часть Mocha, тест-фреймворка, позволяющего писать и структурировать легко читаемые тесты. "Describe" и "it" – это поименование тестов в стиле спецификации, позволяющее использовать обычный английский, а не имена методов, как вы бы делали в Nunit на C#.

Describe – это имя вашей спеки или тест-набора. Если улучшить это название, можно сделать его describe(‘Google Home Page’).

"It" – это имя теста внутри тест-набора, и тут снова используется обычный язык для описания теста. Мы в общем-то неплохо справились с названием в примере выше.

Внутри самого теста можно заметить, что шаги начинаются с ключевого слова "cy". Как и в Selenium, вы будете часто применять ключевое слово "driver" – в Cypress это "cy".

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

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

Если нажать на ваш тест-файл, откроется новое окно – это Cypress-браузер, запускающий ваш тест. Он закончится, не успев начаться, и вы увидите приятный зеленый цвет, потому что тест сработал верно. Поздравляю!

Это очень краткое введение в Cypress, и мы разобрались только с нудной задачей настройки и объяснения основ вроде структуры папок. В следующий раз мы перейдем напрямую к Page Objects в Cypress и будем улучшать наши тесты, наращивая им мышцы и меняя базовую конфигурацию Cypress.

Обсудить в форуме