Cypress предоставляет уникальный подход к тестированию веб-приложений, объединяя возможности запуска тестов и визуального контроля в одном инструменте — Test Runner. Понимание структуры и функций Test Runner является ключевым для эффективной работы с Cypress.
1. Панель тестов (Specs List) Список тестов
отображает все доступные файлы с тестами, обычно с расширением
.spec.js или .cy.js. Каждый файл представляет
собой отдельный набор тестов. Выбор конкретного spec-файла инициирует
его загрузку и запуск в браузере.
2. Панель выполнения тестов (Test Execution Panel)
Эта область отображает структуру выбранного spec-файла в виде иерархии
describe и it блоков. Каждая группа тестов
(describe) может содержать несколько отдельных тестов
(it). Результаты выполнения тестов отображаются цветовой
индикацией:
Клик по конкретному тесту позволяет увидеть пошаговое выполнение команд Cypress, включая цепочку запросов и действий на странице.
3. Лог команд (Command Log) Лог команд — это
центральный элемент для дебага. Каждое действие Cypress
(cy.visit, cy.get, cy.click и
т.д.) отображается в виде последовательности шагов. Раскрывая отдельную
команду, можно увидеть:
Это позволяет точно отслеживать поведение теста и выявлять причины возможных ошибок.
4. Панель предварительного просмотра (Preview / Browser View) Cypress открывает выбранный браузер и отображает страницу приложения в реальном времени. Все действия теста выполняются непосредственно на этом окне, что позволяет наблюдать за интерактивными изменениями DOM, событиями и навигацией.
5. Снимки состояния (Snapshots) Каждое действие Cypress сопровождается снимком состояния страницы на момент выполнения команды. В интерфейсе Test Runner можно сравнивать состояние DOM до и после действия, что облегчает анализ визуальных и функциональных изменений.
6. Панель ошибок и предупреждений (Error Panel) При возникновении ошибки Test Runner выделяет команду красным цветом и предоставляет детальное описание:
Запуск и повторный запуск тестов Cypress позволяет запускать тесты как вручную, так и автоматически при изменении файлов. Функция «watch mode» обеспечивает мгновенный повторный запуск тестов после редактирования кода, что ускоряет цикл разработки.
Фильтрация и фокусировка тестов Использование
методов it.only и describe.only позволяет
запускать отдельные тесты или группы тестов без необходимости запускать
весь spec-файл. Это ускоряет отладку и локализует проблемные
участки.
Интерактивный дебаг Test Runner поддерживает прямое
использование инструментов разработчика браузера для инспекции DOM и
анализа состояния приложения. Можно ставить точки останова
(debugger), смотреть значения переменных и контролировать
выполнение асинхронных команд Cypress.
Интеграция с CI/CD Хотя Test Runner чаще используется для локальной разработки, его интерфейс генерирует логи, которые могут быть экспортированы для CI/CD пайплайнов. Это обеспечивает прозрачность выполнения тестов на сервере и позволяет автоматизировать проверки без визуального интерфейса.
describe и it, фильтрация по статусу
выполнения.Test Runner объединяет в себе визуальный контроль, подробные логи и мощные средства отладки, делая Cypress одним из самых удобных инструментов для фронтенд-тестирования. Интерфейс предоставляет полный контроль над выполнением тестов, снижает время поиска ошибок и позволяет детально анализировать поведение приложения на каждом шаге.