pelican-ui

Больше информации и проекте и связанных репозиториях можно найти здесь: pelican-documentation.

Что нужно перед стартом

• Docker (требуется для Dev-контейнера)

Если вы разрабатываете внутри Dev-контейнера

• VSCode
• Расширение Dev Containers

Если вы разрабатываете с использованием старого доброго Node.js (без Dev-контейнеров)

• Node.js (использовалась версия 20.18.0, но более старые версии также должны работать. В идеале устанавливать их с помощью nvm, чтобы можно было легко переключаться между версиями Node.js при необходимости)
• VSCode (опционально, можно использовать любую IDE, но в VSCode настроено форматирование при сохранении изменений по правилам линтинга проекта)

Локальный запуск

Добавьте файл .env на основе .env.example и установите CSP_ENABLED=false для отключения CSP, иначе встраиваемые в режиме разработки Next inline-scripts будут запрещаться и ваш сайт локально не запустится.

Установите необходимые зависимости:

npm ci

Запуск проекта в режиме разработчика:

npm run dev

Чтобы увидеть страницу, откройте в браузере http://localhost:3000.

Запуск повторного создания типов TypeScript по документации strapi swagger

npm run generate-api-types

Запуск скриншотных тестов Playwright (только в Dev-контейнере)

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

npm run dev:static

После успешного запуска дев-сервера (его можно открыть по адресу http://localhost:3000), оставив первый терминал активным в отдельной вкладке терминала, вы можете запустить тесты в headless-режиме (без пользовательского интерфейса браузера), выполнив следующий скрипт:

npm run playwright:run

Если вы хотите работать исключительно внутри Dev-контейнера, вам нужно подключиться к VNC-серверу Dev-контейнера (удаленный рабочий стол) здесь http://localhost:6080/. Пароль: vscode. Выполнив следующую команду, вы должны увидеть интерфейс Playwright:

npm run playwright:open

Обновление базовых скриншотов визуальных тестов

Когда вам нужно обновить уже неактуальные скриншоты, вы можете сделать это с помощью следующей команды:

npm run update-snapshots

Будут заменены только те скриншоты, в которых были расхождения. После визуальной проверки можно закоммитить новые базовые скриншоты.

Просмотр отчета о тестах локально в Dev-контейнере

После выполнения npm run playwright:run вы можете увидеть отчет о запуске тестов. Например, были ли повторные попытки при запуске одного или более тестов. Если тест упал, отчет будет сгенерирован автоматически. Если тест прошел успешно, то отчет можно сгенерировать с помощью команды:

npx playwright show-report

Чтобы просмотреть сгенерированный отчет, нужно запустить следующую команду и смотреть через VNC:

npx playwright open localhost:9323

Запуск E2E тестов Playwright

Перед запуском E2E тестов, вам необходимо запустить UI в режиме работы с API, для этого выполните следующую команду:

npm run dev

Также необходимо запустить CMS

После запуска UI и CMS, можно запускать E2E тесты, для запуска в headless режиме выполните следующую команду:

npm run playwright:run:e2e

Для запуска Е2Е тестов в UI режиме выполните следующую команду:

npm run playwright:open:e2e

Нагрузочное тестирование

Виды нагрузочных скриптов и их обоснование

На данный момент у нас существует 3 скрипта, которые проверяют производительность прода сайта Челябинского Зоопарка:

1. ./load-tests/loadtestDocumentsPage.yml
2. ./load-tests/loadtestHomePage.yml
3. ./load-tests/loadtestNewsPage.yml

Каждый из них выполняется в течение 60с, нагружая 5-ью запросами эти страницы каждую секунду. В итоге имеем 300 запросов за минуту на каждую страницу. 900 запросов за 3 минуты полетят на сайт, таким образом мы предлагаем компромиссный вариант, что в течение короткого промежутка времени проверится производительность сайта, так как данные скрипты будут нагружать сайт каждый час.

Таким образом, имеется возможность проверить поведение системы в часы простоя (ночью) и в пиковые часы нагрузки (днем)

При условии, что согласно данным из Яндекс метрики - среднее кол-во просмотров сайта в сутки - 1500, а среднее кол-во уникальных посетителей в сутки - 522 человека, мы достаточно приближены к реальной нагрузке, но уже в пределах лишь 3 минут.

Это позволяет найти компромисс между имитацией реальной оценкой нагрузки на сайт и риском перегрузить сайт, испортив впечатления пользователям, находящимся на сайте в момент нагрузки.

Валидация результатов

Учитывая текущие ресурсы системы, остановились на том, что:

• максимальное время ожидания ответа на запрос на пороге критичного для нас значения - 10с (исключительные выбросы из статистики всех 300 запросов).
• среднее время ожидания на пороге критичного для нас значения - 1.6с.
• количество ошибок во время запросов - 0.

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

1. ./playwright-tests/e2e/load-validation/validateDocumentsPageLoadTest.spec.ts
2. ./playwright-tests/e2e/load-validation/validateHomePageLoadTest.spec.ts
3. ./playwright-tests/e2e/load-validation/validateNewsPageLoadTest.spec.ts

Если на какой-то из страниц максимальное время ожидания ответа на запрос > 10 секунд - тест падает и мы будем в курсе того, что сайт не справляется с текущей нагрузкой в момент времени падения теста.

Если среднее время ожидания ответа на запрос > 1.6 секунды - тест падает и мы будем в курсе того, что сайт не справляется с текущей нагрузкой в момент времени падения теста.

Если количество ошибок во время нагрузки > 0 - тест падает и мы будем в курсе того, что сайт не справляется с нагрузкой в момент падения теста.

Выключение оптимизации для изображений

Для отключения оптимизации изображений необходимо внести правки в next.config.mjs, а именно добавить параметр unoptimized в настройки images:

images: {
  unoptimized: true,
}

Обновление версии Playwright

Версия Playwright должна быть зафиксирована для корректной работы в Dev-контейнере.

Например, вам нужно обновить версию Playwright с 1.48.2 до 1.49.0.

• Проверьте, доступен ли тег новой версии, которая вам нужна, здесь
• Если в новой версии есть выделенный noble докер-образ, обновите его тег в файле devcontainer.json следующим образом:

было:

"image": "mcr.microsoft.com/playwright:v1.48.2-noble",

стало:

"image": "mcr.microsoft.com/playwright:v1.49.0-noble",

• Удалите предыдущую версию пакетов Playwright, выполнив следующие команды:

npm uninstall @playwright/test

• Установите новую точную и зафиксированную версию пакетов Playwright в dev- зависимости, выполнив следующие команды (здесь пример для версии 1.49.0, замените ее на нужную):

npm install -D @playwright/test@1.49.0 --save-exact

Решение возможных проблем:

• Если на windows при выполнении pull у вас будет ошибка, что название какого-то файла слишком длинное выполните следующую команду в powershell подробнее тут:

& git config "--global" core.longpaths true