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

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

Почему стоит выбрать Cypress

Возможности тестирования

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

Последовательное кроссбраузерное тестирование

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

Сообщество и документация

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

Настройка среды тестирования

Установка и настройка

Первым шагом в создании тестовой среды с Cypress является его установка на устройство. Прежде чем приступить к этому, убедитесь, что ваше устройство соответствует требованиям из документации. После этого можно приступить к созданию отдельной папки, в которой будет располагаться ваш проект. Далее откройте редактор кода, который вы предпочитаете (я рекомендую VS Code, поэтому будем использовать его для справки), и откройте папку в редакторе. Следующим шагом будет открытие терминала в VS Code и установка Cypress в саму папку проекта с помощью npm install Cypress --save-dev command, после чего, как только установка завершится, слева появится несколько сгенерированных файлов. По умолчанию ваши тесты будут записаны в spec.cy.js файле, но вы всегда можете изменить это и настроить его в соответствии со своими предпочтениями. Пока это все, что вам нужно, и вы можете приступать к настройке конфигурации для своего проекта.

Конфигурация проекта

На этом этапе необходимо задать оптимальные характеристики среды тестирования для вашего проекта. Их можно найти здесь. У вас есть возможность установить конкретный браузер для тестирования с определенными параметрами, такими как высота и ширина, также можно внести базовый URL, который будет использоваться в дальнейшем, чтобы избежать повторения одного и того же шага в ваших тестах. Конечно, некоторые из этих шагов не являются обязательными, поэтому, исключая те, без которых тестирование невозможно, вы можете задать любые предварительные условия, которые вам больше нравятся. Не забывайте, что в доступной документации вы найдете и множество других рекомендаций. Загляните в нее здесь, чтобы узнать больше.

Интеграция с вашим приложением

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

Создание тестовых файлов

Итак, вы определились со спецификацией проекта и теперь должны решить, где писать тесты. Естественно, первым шагом будет создание тестового файла, обычно в папке e2e. Также, если ваш тестовый файл имеет более длинное имя, вы можете прописать его через тире, например,  'edit-my-profile-page.cy.js. Всегда помните, что расширение для файлов вашего тестового набора — это не просто .js а .cy.js.

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

Написание тестов

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

Вот простой обзор того, как это может выглядеть:

describe('Most basic Google tests', () => {
    it('Successfully opens Google url', () => {
        cy.visit('https://www.google.com')
        cy.url().should(‘eq’, ‘https://www.google.com’)
    })
})

Вы начинаете с использования describe() для определения всего тестового набора. Следует уточнить, что набор тестов содержит столько тестов, сколько вы хотите. Однако настоятельно рекомендуется, чтобы все они относились к одному модулю приложения и находились в разных папках – например, папка “Авторизация” (Authentication) должна содержать только файл authentication.cy.js, папка “Панель управления” (Navigation bar) – только navigation-bar.cy.js и аналогично для других модулей. Если вы работаете над более объемным сайтом, на котором потенциально могут присутствовать возможности авторизации от третьих лиц, например, через Facebook или Google, то можно разместить несколько файлов в папке authentication.cy.js — один файл для входа с учетными данными, назовем его standard-login.cy.js, файл для входа через аккаунт в Google под названием google-login.cy.js и файл для входа через Facebook под названием facebook-login.cy.js, и т.п. Разберем тест, который должен проверить, что URL-адрес Google открывается успешно.

describe(Most basic Google tests, () => { ... })

Мы даем нашему набору соответствующее имя (которое часто совпадает с именем тестового файла):

it('Successfully opens google.com', () => { ... })

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

cy.visit('https://www.google.com')

Команда cy.visit() дает Cypress указание посетить определенный URL. Прежде чем написать свою первую команду, нелишним будет обратиться к документации. Постоянные проверки сэкономят время, предотвратят несоответствия в коде и повысят эффективность работы.

cy.url().should('eq', 'https://www.google.com')

Это последняя, но очень важная часть теста, о которой начинающий QA, скорее всего, забудет. В части с утверждением (assertion) мы даем команду Cypress определить URL, который он посетил, и проверить, совпадает ли он с заданным нами в тесте. Если они не совпадают, то Cypress по каким-то причинам не смог успешно посетить нужный URL, либо же было осуществлено перенаправление, в следствие чего утверждение оказалось ложным, а весь тест неуспешным.

Выполнение и отладка

После написания нашего теста мы можем вернуться в терминал и заметить, что npx cypress открыт для запуска Cypress. В появившемся окне необходимо нажать кнопку E2E Testing, как показано ниже:

После этого откроется окно выбора браузера:

Выбрав браузер, следует нажать кнопку “Начать сквозное тестирование” (Start E2E testing); мы рассматриваем данную операцию на примере Chrome. В результате откроется новое окно, содержащее страницу спецификаций. Здесь следует выбрать пункт “Создать новую спецификацию” (Create new spec):

И тогда вы увидите окно ввода пути для новой спецификации:

Непосредственно щелкните по кнопке Создать спецификацию (Create spec) и откроется окно запуска спецификации:

Итак, запустите спецификацию (Okay, run the spec). В результате будет сгенерирован первый тест в Cypress, и вы сможете наблюдать, как программа его выполняет.

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

Теперь можно вернуться в редактор кода к spec.cy.js файлу, содержащему один автоматически сгенерированный тест, который находится в папке e2e в Cypress (cypress/e2e/spec.cy.js).

Дальше мы можем изменить имя файла и отредактировать тест, например, изменить название тестового набора, название самого теста, а также сайта с example.cypress.io на www.google.com и т.д., чтобы мы могли провести наше первое исследовательское тестирование и посмотреть, как работает Cypress.

Надлежащие практики работы в Cypress

Указывайте объекты, с которыми вы взаимодействуете

При конструировании селекторов максимально эффективно используйте элементы страницы (шапки и футеры страницы, модальные окна входа в систему, поля результатов поиска и т.д.). Это поможет вам сделать логически правильный тест, который легко читать и поддерживать. Допустим, вы пишете тест, в котором необходимо открыть модальное окно входа в систему через кнопку в шапке сайта. Правильным подходом в этом случае будет включение шапки сайта в селектор. Это можно сделать по её ID, а если его нет — по имени и классу тега. Есть вероятность, что вы не будете единственным QA в своей компании, поэтому другой тестировщик должен иметь возможность посмотреть на ваш тест и прочитать его. В нашем примере вы открываете сайт, переходите в шапку, а там нажимаете на кнопку, которая открывает модальное окно входа в систему — просто и понятно.

Если у вас нет достаточных знаний, рекомендуем глубже изучить HTML и CSS. Это расширит ваше общее представление о том, как они устроены, и позволит эффективно использовать элементы страницы для создания локаторов.

Пишите компактные тесты

Относитесь к написанию тестов, как к упаковке чемодана — вы хотите положить в него только самое необходимое, а не все, что есть в доме. Правильный тест не должен включать шаги, которые не приносят особой пользы. Не нужно указывать Cypress на открытие модального окна, которое не нужно открывать. Компактный тест означает отсутствие лишнего кода с шагами, которые по итогу не должны выполняться. Неплохо также сделать код красивее, поскольку при написании тестов он, естественно, становится беспорядочным. Для того чтобы привести код в порядок можно использовать специальные инструменты, например, Prettier – Code formatter.

Создавайте универсальные тесты

Написание универсальных тестов подразумевает несколько вещей — в данном случае речь идет о Cypress, который основан на JS. Поэтому практически все функции и возможности JS могут быть применены для написания тестов (такие как циклы, функции, переменные и т.д.), несмотря на то, что сам Cypress имеет свой синтаксис. Что касается того, как максимально использовать эффективность инструмента, то здесь можно применить различные пользовательские команды. Допустим, у вас есть десять тестов, содержащих одинаковые первые два-три шага. Вы можете объединить соответствующие шаги в один тест. Например:

Cypress.Commands.add('login', () => {
 cy.get('#username-input-field').type('My username')
 cy.get('#password-input-field').type('My password')
 cy.get('#login-button').click()
})

После этого эту команду, которую мы назвали ‘login’, мы можем применить следующим образом:

describe('Authentication', () => {
  it('Successful login into the system', () => {
      cy.visit('https://www.mywebsite.com')
      cy.login()
      cy.url().should(‘contain’, ‘/profile’)
  })
})

Это избавляет нас от необходимости писать одни и те же шаги для множества тестов, а при внесении изменений в код достаточно переписать его только в одном месте. Все команды должны храниться в файле commands.js, после чего их можно импортировать в файл теста с помощью команды:

import '../../support/commands

Кроме того, чтобы избежать использования магических чисел, включайте в тесты константы. Если они будут применяться только в одном тестовом наборе, можно записать их в тестовые файлы, с которыми вы работаете. Вот пример того, как может выглядеть константа, если она хранится и используется в одном тестовом файле:

const inputField = '#input-field’

Однако если ваши константы будут использоваться в трех разных тестовых наборах (что означает, соответственно, три разных файла), то следует подумать о создании отдельного файла с именем constants.js и хранить их там с помощью ключевого слова export:

export const PASSWORD_INPUT_FIELD = '#password-input-field’'

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

import { PASSWORD_INPUT_FIELD } from '../../support/constants'

Заключение

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

Перевод статьи «Cypress insider: How to set your Testing Environment and run your First Test».