Как ускорить разработку фронтенда сайта? Устранить “медленные” части на этапе разработки «код -> тест», где важнее всего быстрая обратная связь. Именно поэтому в каждом современном фреймворке есть режим «горячей замены модулей» для ускорения процесса компоновки; благодаря ему изменения в приложении мгновенно отображаются в браузере.
Я хочу продемонстрировать это для сквозных тестов в Cypress. Как только редактор кода сохраняет измененный файл, мы можем повторно запустить тесты, чтобы сообщить разработчику, работает ли его новый код. Cypress умеет следить за файлом спецификации и любым импортированным файлом, входящим в состав спецификации. Он повторно запускает тесты при сохранении файла спецификации, как показано ниже:
В видео я добавил следующее утверждение в файл спецификации:
cypress/e2e/add-todo.cy.js
// confirm there are two items
cy.get('li.todo').should('have.length', 2)
Как только файл сохраняется, Cypress повторно запускает тест. Тест проходит, потому что наш бэкэнд сохраняет эти два элемента и приложение загружает их при перезагрузке страницы. Отлично.
Вы можете заметить в видео, что я не ввожу строку кода assertion cy.get…. Вместо этого GitHub Copilot угадывает эту строку, основываясь на окружающем коде и комментариях выше.
С другой стороны, если я изменю код фронтенда, мне придется вручную перезапускать тесты. Например, я мог изменить HTML-разметку в index.html, но мне нужно будет нажать кнопку Run All Tests (R), чтобы проверить, не нарушило ли мое изменение существующие тесты.
Замена имени класса «todo» на «item» действительно нарушает тесты, но такие ошибки легко допустить, если постоянно и быстро не перезапускать соответствующие тесты. Наши тесты немного затормозились, так как вызовы API бэкенда в данном случае задержаны на одну секунду. Давайте убедимся, что мы запускаем E2E-тесты при изменениях кода фронтенда (а не только при изменениях файла спецификации), и запустим эти тесты даже быстрее, чем нам это позволяет бэкенд.
Смотрим файлы фронтенда
Первым шагом, который я сделаю, будет установка плагина cypress-watch-and-reload. Мы можем настроить этот плагин на просмотр дополнительных локальных файлов, перечислив их в файле конфигурации Cypress (поддерживаются подстановочные символы glob).
cypress.config.js
const { defineConfig } = require('cypress')
module.exports = defineConfig({
defaultBrowser: 'electron',
e2e: {
// baseUrl, etc
baseUrl: 'http://127.0.0.1:3000',
fixturesFolder: false,
env: {
// list the files and file patterns to watch
// https://github.com/bahmutov/cypress-watch-and-reload
'cypress-watch-and-reload': {
watch: ['index.html', 'app.js'],
},
},
setupNodeEvents(on, config) {
require('cypress-watch-and-reload/plugins')(on, config)
// IMPORTANT: return the config object
// because it might be modified by the plugin function
return config
},
},
})
Нам также нужно включить код внешнего интерфейса плагина в файл поддержки E2E:
cypress/support/e2e.js // https://github.com/bahmutov/cypress-watch-and-reload import 'cypress-watch-and-reload/support'
Давайте попробуем еще раз изменить index.html, чтобы проверить, поймали ли тесты проблему:
Плагин перезапускает тесты, как только я нажимаю «Command+S» и файл сохраняется. Держите Cypress открытым на одном экране и продолжайте кодировать на другом, сохраняя файл, чтобы проверить правильность изменений. Обратная связь работает быстро, но мы можем сделать ее еще быстрее.
Мгновенный отклик бэкенда
Мы изменяем код фронтенда. Бэкенд должен остаться прежним, однако наши тесты работают медленно из-за ожидания сброса данных API в начале теста, затем начальной загрузки данных, плюс добавление каждого элемента занимает 1 секунду. Наш полный тест занимает 6 секунд, потому что API бэкенда работает медленно. К счастью, я написал плагин cypress-magic-backend, который может нам помочь.
Прочитайте статью Magic Backed For E2E Testing для ознакомления с возможностями плагина. В этой статье мы будем использовать записанные тестовые сетевые вызовы, уже сохраненные для этой спецификации в виде локальных JSON-файлов. Я «заблокирую» режим воспроизведения с помощью кнопки 🎞️, и каждый перезапуск теста будет просто использовать замоканные ответов API бэкенда для очень быстрой обратной связи.
В видео ниже я пытаюсь заменить имя класса «todo» на просто «item». Я быстро вижу, что это нарушит тест, поскольку он ищет элементы .todo. Тогда я изменяю список классов, чтобы в нем были имена классов todo и item. Плагин перезапускает тесты, а сами тесты используют режим «Replay» бэкенда, в котором все API-запросы мокируются. Финальный тест проходит в 10 раз быстрее, чем раньше; он завершается за 600 мс вместо 6 секунд!
При работе над внешним кодом сочетание просмотра кода приложения и быстрого повторного выполнения тестов в отрыве от бэкенда, на мой взгляд, является непревзойденным.
