UniqueSoft/Phantom
2
0
Fork 0
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
Phantom/website/TESTING-GUIDE.md

15 KiB
Raw Permalink Blame History

🧪 TESTING GUIDE - Руководство по тестированию

📋 Быстрая проверка после Desktop Grid Fix

✅ Что должно работать

1. Desktop (1366px, 1920px) - Основное

  • Hero Section - 2 колонки в ряд (текст слева, картинка справа)
  • Features/USP - 3 карточки в ряд
  • Stats - 3-4 статистики в ряд
  • Comparison Table - таблица во всю ширину
  • Footer - 3-4 колонки в ряд

2. Tablet (768px - 991px)

  • Hero Section - может быть 1-2 колонки
  • Features - 2 карточки в ряд или 1 столбиком
  • Footer - 2 колонки

3. Mobile (<768px)

  • Всё в одну колонку (столбик)
  • Меню сворачивается в бургер
  • Кнопки на всю ширину

🖥️ Тестирование Desktop Grid

Метод 1: Изменение размера окна браузера

  1. Откройте index.html в браузере
  2. Нажмите F11 (полноэкранный режим)
  3. Проверьте:
    • Есть ли несколько колонок в ряд?
    • Карточки рядом друг с другом или столбиком?

Ожидаемое поведение:

1920px экран:
┌────────┬────────┬────────┐
│ Карта 1│ Карта 2│ Карта 3│
└────────┴────────┴────────┘
✅ ТРИ КОЛОНКИ В РЯД

НЕправильное (если баг не исправлен):

1920px экран:
┌────────────────┐
│    Карта 1     │
├────────────────┤
│    Карта 2     │
├────────────────┤
│    Карта 3     │
└────────────────┘
❌ СТОЛБИК (как на мобилке)

Метод 2: Chrome DevTools Responsive Mode

  1. Откройте index.html
  2. Нажмите F12 (DevTools)
  3. Нажмите Ctrl+Shift+M (Toggle Device Toolbar)
  4. Выберите разрешения:
Разрешение Ожидаемое поведение
1920x1080 3-4 колонки в ряд
1366x768 2-3 колонки в ряд
1024x768 2 колонки в ряд
768x1024 1-2 колонки (планшет)
375x667 1 колонка (мобилка)

Метод 3: Проверка в DevTools Inspector

  1. Откройте index.html
  2. Нажмите F12
  3. Выберите Elements tab
  4. Найдите элемент .row
  5. Проверьте Computed styles:

Должно быть:

display: flex;           /* ✅ НЕ block */
flex-wrap: wrap;         /* ✅ */
  1. Найдите элемент .col-lg-6
  2. Проверьте Computed styles:

Должно быть (на 1920px экране):

flex: 0 0 50%;           /* ✅ 50% ширины */
max-width: 50%;          /* ✅ */

Метод 4: Консольная проверка

Откройте Console (F12) и выполните:

// Проверка что .row это flex
getComputedStyle(document.querySelector('.row')).display
// Должно вернуть: "flex"

// Проверка ширины колонки
getComputedStyle(document.querySelector('.col-lg-6')).flex
// Должно вернуть: "0 0 50%" или подобное

// Проверка что desktop-fix.css загружен
Array.from(document.styleSheets).find(s => s.href?.includes('desktop-fix'))
// Должно вернуть: CSSStyleSheet объект (НЕ undefined)

🔍 Детальное тестирование страниц

1. index.html - Главная страница

Hero Section

  • На 1920px: Текст слева (50%), изображение/контент справа (50%)
  • На 768px: Текст и изображение друг под другом
  • Margin-top: Hero не перекрывается navbar (должен быть отступ 80px)

USP / Features Section

  • На 1920px: 3 карточки в ряд (33% каждая)
  • На 1366px: 3 карточки в ряд или 2+1
  • На 768px: 2 карточки в ряд или 1 столбиком
  • Hover: Карточки поднимаются и светятся

Architecture Diagram

  • На 1920px: Все слои видны, диаграмма читаема
  • На 768px: Слои адаптируются

Comparison Table

  • На 1920px: Таблица во всю ширину контейнера
  • На 768px: Горизонтальная прокрутка или адаптация

Stats Section

  • На 1920px: 3-4 статистики в ряд
  • На 768px: 2 статистики в ряд
  • На 375px: 1 статистика на строку

Footer

  • На 1920px: 3-4 колонки в ряд
  • На 768px: 2 колонки
  • На 375px: 1 колонка

2. docs.html - Документация

Sidebar + Content Layout

  • На 1920px: Sidebar слева (25%), контент справа (75%)
  • На 768px: Sidebar сверху, контент снизу
  • Sticky sidebar: Работает на desktop, отключается на tablet/mobile

Documentation Cards

  • На 1920px: 2-3 карточки в ряд
  • На 768px: 1-2 карточки

3. download.html - Скачать

Installation Methods

  • На 1920px: Docker, NPM, Binary в ряд (3 колонки)
  • На 768px: По 1-2 метода в строку

Platform Cards

  • На 1920px: Linux, macOS, Windows в ряд (3 карточки)
  • На 768px: 1-2 карточки в строку

4. architecture.html - Архитектура

5 Layers of Protection

  • На 1920px: 2-3 слоя в ряд
  • На 768px: 1 слой на строку

Code Examples

  • На всех разрешениях: Блоки кода читаемы
  • Copy button: Работает на всех устройствах

5. community.html - Сообщество

Community Channels

  • На 1920px: 3 канала в ряд (GitHub, Discord, Forum)
  • На 768px: 2 канала в ряд
  • На 375px: 1 канал на строку

Contribution Cards

  • На 1920px: 4 карточки в ряд
  • На 768px: 2 карточки в ряд

6. about.html - О проекте

Mission, Vision, Values

  • На 1920px: 3 блока в ряд
  • На 768px: 1-2 блока в ряд

Timeline

  • На всех разрешениях: Timeline читаем и корректно отображается

Team Cards

  • На 1920px: 4 члена команды в ряд
  • На 768px: 2 в ряд
  • На 375px: 1 на строку

🌐 Тестирование кроссбраузерности

Браузеры для тестирования

Браузер Версия Ожидаемое поведение
Chrome 90+ ✅ Полная поддержка
Firefox 88+ ✅ Полная поддержка
Safari 14+ ✅ Полная поддержка (с vendor prefixes)
Edge 90+ ✅ Полная поддержка
IE 11 11 ⚠️ Базовая поддержка (без glass эффектов)

Что проверять в каждом браузере:

1. Chrome (Reference Browser)

  • Grid работает на всех разрешениях
  • Glassmorphism эффекты видны
  • Transitions плавные
  • Theme toggle работает

2. Firefox

  • Grid работает
  • Backdrop-filter работает (glassmorphism)
  • Все vendor prefixes применяются

3. Safari

  • Grid работает
  • -webkit-backdrop-filter применяется
  • Flexbox работает корректно
  • Нет проблем с z-index

4. Edge

  • Grid работает
  • Все современные CSS функции поддерживаются
  • Transitions работают

5. IE 11 (опционально)

  • Базовый layout работает
  • Grid может не работать идеально (ожидается)
  • Glassmorphism не работает (ожидается)
  • Контент остается читаемым

🎨 Визуальное тестирование

Text Contrast (из visual-fixes.css)

  • Headings: #ffffff (bright white) на всех фонах
  • Body text: #e6e6ff (светло-лиловый) читаем
  • Muted text: #b0b0d0 (НЕ слишком бледный)
  • Links: #00f0ff (яркий cyan) всегда видны
  • Code: #00f0ff на темном фоне

Glassmorphism Effect

  • Glass cards: полупрозрачны но читаемы (opacity 0.85)
  • Glass nav: полупрозрачный но виден (opacity 0.9)
  • Borders: видны (rgba 0.1)
  • Shadows: создают глубину

Z-Index Hierarchy

  • Navbar: всегда сверху (z-index 1030)
  • Modals: выше navbar (z-index 1050)
  • Sticky sidebar: не перекрывает navbar
  • Cards: не перекрывают друг друга
  • Hero section: не перекрывается navbar (margin-top 80px)

Spacing

  • Sections: uniform padding 80px top/bottom
  • First section: 120px top padding (navbar clearance)
  • Cards: 30px margin-bottom (не касаются друг друга)
  • Card padding: 2rem на desktop, 1.5rem на tablet, 1rem на mobile

🐛 Отладка проблем

Проблема: Grid не работает на desktop

Симптомы:

  • Всё в столбик на 1920px экране
  • .col-lg-6 занимает 100% ширины

Решение:

  1. Проверьте что desktop-fix.css загружен:

    Array.from(document.styleSheets).map(s => s.href)
// Должен быть css/desktop-fix.css в списке

  2. Проверьте порядок загрузки CSS:

    <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/desktop-fix.css">  <!-- Должен быть ЗДЕСЬ -->
<link rel="stylesheet" href="css/responsive.css">

  3. Проверьте что нет кэша браузера:

    • Ctrl+Shift+R (hard reload)
    • Или очистите кэш в настройках

Проблема: Текст не читается

Симптомы:

  • Текст сливается с фоном
  • Muted text почти не виден

Решение:

  1. Проверьте что visual-fixes.css загружен
  2. Проверьте computed color в DevTools: 
    getComputedStyle(document.querySelector('h1')).color
// Должно быть: rgb(255, 255, 255) - белый

Проблема: Блоки перекрываются

Симптомы:

  • Navbar скрывается под контентом
  • Sticky sidebar блокирует контент
  • Cards наезжают друг на друга

Решение:

  1. Проверьте z-index в DevTools
  2. Проверьте margin-top первой секции: 
    getComputedStyle(document.querySelector('section:first-of-type')).marginTop
// Должно быть: 80px или больше

Проблема: Glassmorphism не работает

Симптомы:

  • Карточки полностью непрозрачные или полностью прозрачные
  • Нет blur эффекта

Решение:

  1. Проверьте browser support для backdrop-filter:

    CSS.supports('backdrop-filter', 'blur(20px)')
// Должно вернуть: true

  2. В Safari проверьте -webkit-backdrop-filter:

    /* В DevTools Styles panel */
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);

✅ Финальный Checklist

Базовые проверки

  • Все 6 страниц открываются без ошибок
  • Нет console errors в DevTools
  • Все CSS файлы загружаются (Network tab)
  • Все JavaScript файлы работают

Desktop Grid (1920px)

  • Hero в 2 колонки
  • Features в 3 колонки
  • Stats в 3-4 колонки
  • Footer в 3-4 колонки

Responsive (768px)

  • Menu сворачивается в burger
  • Колонки адаптируются (1-2 в ряд)
  • Карточки не слишком узкие

Mobile (375px)

  • Всё в 1 колонку
  • Текст читаем
  • Кнопки нажимаются
  • Нет горизонтального скролла

Visual Quality

  • Текст читаем везде
  • Нет перекрытий блоков
  • Glassmorphism работает
  • Animations плавные

Cross-Browser

  • Chrome ✅
  • Firefox ✅
  • Safari ✅
  • Edge ✅

Theme Toggle

  • Dark theme по умолчанию
  • Light theme переключается
  • Theme сохраняется в localStorage
  • Работает на всех страницах

📊 Performance Testing

Lighthouse Audit (Chrome DevTools)

  1. Откройте index.html
  2. F12 → Lighthouse tab
  3. Запустите audit для Desktop
  4. Проверьте scores:

Ожидаемые результаты:

  • Performance: 90-100
  • Accessibility: 90-100
  • Best Practices: 90-100
  • SEO: 90-100

Page Load Time

  • First Contentful Paint: < 1.5s
  • Largest Contentful Paint: < 2.5s
  • Time to Interactive: < 3.5s
  • Total Page Size: < 1 MB

🎉 Если всё работает

Поздравляем! 🎊

Ваш Phantom Protocol website работает корректно:

  • ✅ Desktop grid исправлен
  • ✅ Кроссбраузерность работает
  • ✅ Визуальные проблемы решены
  • ✅ Responsive design работает

Готов к deployment! 🚀

📚 Связанные документы

Reference in New Issue View Git Blame Copy Permalink