Test в Ext JS: как тестировать корпоративные приложения без «склейки» инструментов

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

Большинство команд решают эту проблему, собирая стек из разрозненных инструментов: Jest или Mocha для unit-тестов, Cypress или Playwright для end-to-end, отдельная библиотека для визуального сравнения, отдельный сервис для хранения результатов. Каждый инструмент нужно настроить, интегрировать с CI и поддерживать.

Sencha Test — это принципиально другой подход. Это единственное специализированное решение для тестирования Ext JS Single Page Applications, которое закрывает весь цикл тестирования: от написания тестов до хранения результатов и визуального анализа.

🧪 Почему тестирование Ext JS требует особого подхода

Ext JS — это не обычный JavaScript-фреймворк. Его компоненты (Grid, Tree, Form, Pivot Grid) — это сложные объекты с собственной внутренней структурой, состоянием и API. Обычные инструменты тестирования, которые работают с HTML-элементами напрямую, не могут «увидеть» эти компоненты как единое целое.

Sencha Test решает эту проблему на уровне архитектуры. Он понимает Ext JS-компоненты «изнутри»: может обращаться к Store, Model, ViewModel, использовать Component Query для поиска элементов по их xtype, а не по хрупким CSS-селекторам.

Это означает, что тесты получаются более стабильными и менее хрупкими. Вы не привязываетесь к конкретным классам CSS или структуре DOM — вы работаете с логическими компонентами приложения.

🏗️ Четыре столпа Sencha Test

Экосистема тестирования Sencha состоит из четырёх компонентов, которые работают вместе как единое целое.

1. Test Studio (Sencha Studio)

Это графическая среда для написания и запуска тестов. Test Studio позволяет писать тесты на JavaScript с использованием фреймворка Jasmine прямо во встроенном редакторе, а также запускать их немедленно, не переключаясь между окнами.

Ключевые возможности Test Studio:

• Встроенный редактор Jasmine-тестов с подсветкой синтаксиса.

• Интеграция с системой контроля версий: тесты хранятся в SCM (Git, SVN) вместе с кодом приложения.

• Немедленный запуск тестов после написания — это итеративный процесс, который помогает писать более надёжный код.

• Панель результатов с детализацией по каждому тесту и возможностью быстро перейти к проблемному месту.

2. Test Runner

Test Runner — это центр выполнения тестов. С его помощью вы можете запускать выбранные unit- и end-to-end тесты на:

• Любом или всех браузерах локальной машины (Chrome, Firefox, Edge, Safari).

• Подключённых мобильных устройствах (реальные устройства или эмуляторы).

• Облачных браузерных фермах — через интеграцию с Sauce Labs и Selenium Grid.

Локальный Test Runner используется для создания и отладки тестов. Когда тесты готовы, те же конфигурации можно передать в CLI для запуска на CI-сервере — без дополнительной настройки.

3. Sencha Test CLI (командная строка)

Это инструмент автоматизации. После того как тесты написаны и добавлены в репозиторий, CLI позволяет запускать их из CI-системы:

• Интеграция с Jenkins и TeamCity — официальная поддержка.

• Любая CI-система, которая умеет вызывать команды из командной строки.

• Автоматический запуск при изменении кода приложения или тестов в репозитории.

CLI поддерживает настройку кастомного прокси-порта для in-browser тестов — важно для проектов, где приложение работает на определённом хосте и порту из-за CORS-ограничений.

4. Test Archiver

Test Archiver — это сервер для хранения результатов тестовых прогонов. Он позволяет:

• Отслеживать исторические тренды: как менялось количество прошедших и упавших тестов от релиза к релизу.

• Сравнивать результаты между прогонами: что именно сломалось после последнего изменения.

• Хранить базовые изображения для визуальных тестов.

Результаты в Sencha Test предоставляются не в виде простого HTML-отчёта, а в богатом матричном формате, где можно детально изучить каждый тест, каждый шаг и каждое сравнение.

🎥 Event Recorder: тесты без ручного кодирования

Одна из самых полезных возможностей Sencha Test — Event Recorder. Это инструмент, который записывает ваши действия в приложении и автоматически генерирует код теста.

Как это работает:

1. Вы запускаете Event Recorder и начинаете работать с приложением как обычный пользователь: кликаете по кнопкам, заполняете поля, выбираете значения в комбобоксах.

2. Event Recorder захватывает каждое событие и преобразует его в Jasmine-код.

3. Для идентификации компонентов используется комбинация Component Query и DOM-запросов — это обеспечивает стабильность тестов даже при изменении CSS.

4. Вы можете выбрать Composite Query, XPATH или ID как альтернативные стратегии поиска.

Что это даёт: Вместо того чтобы вручную писать код для каждого шага, вы просто выполняете нужные действия, а Sencha Test генерирует готовый тест. Это радикально сокращает время создания тестов и снижает вероятность ошибок в коде.

В версии 2.2.1 Event Recorder был улучшен: теперь он корректно захватывает все шаги для текстовых фильтров в колонках Grid — одной из самых сложных для тестирования операций.

🔍 Inspector: поиск компонентов и создание локаторов

Inspector — это инструмент для поиска компонентов в работающем приложении и создания надёжных локаторов для тестов.

Что умеет Inspector:

• Находить компоненты на странице и показывать их свойства, xtype, иерархию.

• Генерировать API-код для взаимодействия с найденным компонентом.

• Создавать Page Objects — централизованное хранилище всех локаторов приложения. Это позволяет поддерживать тесты в чистоте: если локатор изменился, вы правите его в одном месте, а не в сотне тестов.

• Выбирать лучший локатор из списка доступных вариантов (по Component Query, по DOM, по атрибутам).

📊 Визуальное сравнение экранов

Sencha Test включает автоматическое визуальное сравнение (Visual Screen Comparison). Это критически важная функция для корпоративных приложений, где даже небольшое смещение элемента может сломать пользовательский опыт.

Как это работает:

1. При первом запуске теста сохраняется базовое изображение экрана или его части.

2. При последующих запусках Sencha Test сравнивает текущий рендеринг с базовым.

3. Если обнаружены различия, тест помечается как упавший, и вы можете просмотреть diff — что именно изменилось.

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

🔗 Интеграция с CI/CD и системами управления дефектами

Sencha Test встраивается в существующий процесс разработки:

• CI-системы: официальная интеграция с Jenkins и TeamCity, а также возможность использования через CLI в любой другой системе.

• Системы контроля версий: тесты хранятся в Git, SVN или другой SCM вместе с кодом приложения.

• Управление дефектами: интеграция с JIRA — упавшие тесты можно напрямую публиковать как баги в JIRA, а также просматривать статус существующих дефектов прямо в Test Studio.

• Покрытие кода (Code Coverage): поддержка Istanbul для анализа покрытия на уровне Statements, Branches, Functions и Lines.

📦 Тестирование пакетов, а не только приложений

Sencha Test работает не только с приложениями, но и с пакетами. Sencha Cmd 6.1 и выше предоставляет дополнительную поддержку для упрощения тестирования на уровне пакетов. Это особенно важно для команд, которые разрабатывают переиспользуемые библиотеки компонентов.

🆕 Что нового в последних версиях

Sencha Test 2.2.1 принёс более 75 улучшений и исправлений. Среди ключевых:

• Новые API-методы: doubleClick, rightClick для взаимодействия с компонентами и HTML-элементами, getRecord для получения объекта записи из DataView.

• Улучшенный Event Recorder для захвата действий с текстовыми фильтрами колонок.

• Обновлённые API браузерных ферм: теперь показываются только валидные комбинации браузеров и ОС.

• Встроенный ChromeDriver для Selenium Server.

💎 Заключение

Блок Test в экосистеме Ext JS — это не просто «ещё один инструмент для тестирования». Это полноценная среда контроля качества, которая:

Если вы разрабатываете корпоративное приложение на Ext JS, Sencha Test избавляет от необходимости собирать стек тестирования из десятка разрозненных инструментов. Всё, что нужно для контроля качества, уже встроено и работает согласованно.

---

Если у вас есть опыт тестирования Ext JS-приложений или вопросы по Sencha Test, поделитесь в комментариях.