451 lines
15 KiB
Markdown
451 lines
15 KiB
Markdown
# 🧪 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:**
|
||
|
||
**Должно быть:**
|
||
```css
|
||
display: flex; /* ✅ НЕ block */
|
||
flex-wrap: wrap; /* ✅ */
|
||
```
|
||
|
||
6. **Найдите элемент `.col-lg-6`**
|
||
7. **Проверьте Computed styles:**
|
||
|
||
**Должно быть (на 1920px экране):**
|
||
```css
|
||
flex: 0 0 50%; /* ✅ 50% ширины */
|
||
max-width: 50%; /* ✅ */
|
||
```
|
||
|
||
### Метод 4: Консольная проверка
|
||
|
||
Откройте Console (F12) и выполните:
|
||
|
||
```javascript
|
||
// Проверка что .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` загружен:
|
||
```javascript
|
||
Array.from(document.styleSheets).map(s => s.href)
|
||
// Должен быть css/desktop-fix.css в списке
|
||
```
|
||
|
||
2. Проверьте порядок загрузки CSS:
|
||
```html
|
||
<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:
|
||
```javascript
|
||
getComputedStyle(document.querySelector('h1')).color
|
||
// Должно быть: rgb(255, 255, 255) - белый
|
||
```
|
||
|
||
### Проблема: Блоки перекрываются
|
||
|
||
**Симптомы:**
|
||
- Navbar скрывается под контентом
|
||
- Sticky sidebar блокирует контент
|
||
- Cards наезжают друг на друга
|
||
|
||
**Решение:**
|
||
1. Проверьте z-index в DevTools
|
||
2. Проверьте margin-top первой секции:
|
||
```javascript
|
||
getComputedStyle(document.querySelector('section:first-of-type')).marginTop
|
||
// Должно быть: 80px или больше
|
||
```
|
||
|
||
### Проблема: Glassmorphism не работает
|
||
|
||
**Симптомы:**
|
||
- Карточки полностью непрозрачные или полностью прозрачные
|
||
- Нет blur эффекта
|
||
|
||
**Решение:**
|
||
1. Проверьте browser support для backdrop-filter:
|
||
```javascript
|
||
CSS.supports('backdrop-filter', 'blur(20px)')
|
||
// Должно вернуть: true
|
||
```
|
||
|
||
2. В Safari проверьте `-webkit-backdrop-filter`:
|
||
```css
|
||
/* В 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!** 🚀
|
||
|
||
---
|
||
|
||
## 📚 Связанные документы
|
||
|
||
- [DESKTOP-FIX.md](DESKTOP-FIX.md) - Подробности Desktop Grid Fix
|
||
- [VISUAL-FIXES.md](VISUAL-FIXES.md) - Визуальные исправления
|
||
- [FIXES-SUMMARY.md](FIXES-SUMMARY.md) - Сводка всех исправлений
|
||
- [README.md](README.md) - Главная документация
|