🖥 Блок 03 — Frontend-тестирование Ozon

Кроссбраузерность · DevTools · DOM · Локаторы · Page Object · WebDriver · Charles · Allure · Моки · Пуши

🌐 1. Кроссбраузерное тестирование

Кроссбраузерное тестирование — проверка, что сайт/приложение одинаково работает в разных браузерах и на разных устройствах.

Почему это нужно

Разные браузеры используют разные движки рендеринга → страница может выглядеть по-разному
Разная поддержка CSS/JS-фич → что работает в Chrome, может не работать в Safari
Мобильные браузеры → другой viewport, touch-события, нет hover

Движки браузеров

Движок	Браузеры	Особенности
Blink	Chrome, Edge, Opera, Brave	Хромиум-семья, большинство рынка
WebKit	Safari	Часто проблемы с датами, CSS-анимациями
Gecko	Firefox	Редкие CSS-отличия, своя DevTools

Что проверять

Аспект	Примеры
Вёрстка	Элементы не съезжают, шрифты отображаются, адаптивность
Функциональность	Кнопки кликаются, формы отправляются, модалки открываются
Производительность	Страница грузится быстро, нет тормозов при скролле
Responsive	На мобильном, планшете, десктопе — всё корректно

Инструменты

BrowserStack / Sauce Labs — облачные реальные устройства и браузеры
DevTools Device Mode — эмуляция устройств прямо в Chrome
Playwright / Selenium — автотесты в нескольких браузерах

На собе: "Кроссбраузерное тестирование нужно, потому что разные браузеры используют разные движки рендеринга. Основные проблемы: Safari с CSS/датами, Firefox с редкими фичами, мобильные — touch вместо hover."

🔧 2. Chrome DevTools

DevTools (F12) — встроенный набор инструментов разработчика в браузере. Для QA — основной инструмент поиска багов.

Основные панели

Панель	Что делает	Когда использовать QA
Elements	DOM-дерево + стили CSS	Проверить вёрстку, найти элемент, посмотреть стили
Console	JS-ошибки и логи	Увидеть ошибки при действии на странице
Network	Все HTTP-запросы	Проверить какие API-запросы уходят, что возвращается, статусы
Application	Storage, Cookie, LocalStorage	Проверить токены, куки, сохранённые данные
Performance	Профилирование скорости	Найти тормозящие места
Lighthouse	Аудит: SEO, доступность, скорость	Общая оценка качества страницы

Network — самая важная для QA

Видно каждый запрос: URL, метод, статус, время, размер
Кликаешь на запрос → видишь заголовки + тело (request и response)
Фильтры: XHR (API-запросы), JS, CSS, Img
Красные = ошибки (4xx, 5xx), серые = из кэша

Console — ищем JS-ошибки

Красные — ошибки (Error) → обычно баг
Жёлтые — предупреждения (Warning) → может быть ок, может быть проблема
Серые — информационные логи

На собе: "Network — основная панель для QA. Там видно все запросы, их статусы, тела request/response. Console — для поиска JS-ошибок. Elements — для проверки DOM и стилей."

🌲 3. DOM

DOM (Document Object Model) — это дерево элементов HTML-страницы. Браузер создаёт DOM из HTML, и через него JS может менять страницу.

<html>
  <body>
    <div class="container">
      <h1>Заголовок</h1>
      <button id="btn">Кликни</button>
    </div>
  </body>
</html>

→ DOM-дерево:

html
└── body
    └── div.container
        ├── h1 → "Заголовок"
        └── button#btn → "Кликни"

Для QA важно

В DevTools → Elements — это и есть DOM
Автотесты ищут элементы в DOM (через локаторы)
Если элемента нет в DOM — автотест его не найдёт
Shadow DOM — скрытая часть DOM внутри веб-компонента (иногда элементы прячутся там)

На собе: "DOM — дерево объектов HTML-страницы. Браузер строит его из HTML. Автотесты ищут элементы именно в DOM. Если элемент не в DOM — его нельзя найти через локаторы."

🎯 4. Локаторы

Локатор — способ найти элемент на странице для автотеста. Указывает: «найди мне кнопку с таким id/классом/текстом».

Типы локаторов (от лучших к худшим)

Приоритет	Локатор	Пример	Надёжность
🥇	data-testid	[data-testid="login-btn"]	⭐⭐⭐ Лучшая практика
🥈	ID	#login-btn	⭐⭐⭐ Если уникальный
🥉	CSS	button.primary	⭐⭐ Умеренная
🥉	XPath	//button[contains(text(),'Login')]	⭐⭐ Мощный, но хрупкий
❌	По тексту	"Click me"	⭐ Ломается при переводе

CSS vs XPath

	CSS Selector	XPath
Синтаксис	Простой, как в CSS	Сложнее, XML-путь
По тексту	❌ Не умеет	✅ Умеет (contains)
Вверх по дереву	❌ Не умеет (только вниз)	✅ Умеет (parent::)
Скорость	Быстрее	Медленнее
Пример	div.card > button.primary	//div[@class='card']/button

На собе: "Лучший локатор — data-testid, потому что он не зависит от вёрстки и текста. XPath мощнее CSS (ищет по тексту, ходит вверх по дереву), но медленнее и хрупче. CSS — проще и быстрее."

📐 5. Page Object Model (POM)

Page Object — паттерн проектирования автотестов. Каждая страница приложения = отдельный класс, который описывает элементы и действия.

Зачем нужен

Меняется кнопка на странице → меняешь в одном месте (в Page Object)
Без POM: если кнопка используется в 20 тестах → правишь 20 мест
С POM: правишь 1 место → все 20 тестов обновляются

Пример

# login_page.py (Page Object)
class LoginPage:
  def __init__(self, driver):
    self.email_input = driver.find("#email")
    self.pass_input = driver.find("#password")
    self.login_btn = driver.find("#login-btn")

  def login(self, email, password):
    self.email_input.send_keys(email)
    self.pass_input.send_keys(password)
    self.login_btn.click()

# test_login.py (Тест)
def test_login():
  page = LoginPage(driver)
  page.login("test@mail.com", "123456")
  assert "Dashboard" in driver.title

Принципы POM

Элементы — описаны в одном месте (локаторы)
Действия — методы (login, addToCart, search)
Тесты — вызывают методы, не работают с элементами напрямую
Если изменилась вёрстка → меняешь только Page Object

На собе: "Page Object — паттерн, где каждая страница = класс. Локаторы и действия описаны один раз. Если меняется UI — правишь одно место, а не все тесты."

🏎 6. WebDriver / Selenium / Playwright

WebDriver — протокол управления браузером. Позволяет программно: открыть страницу, кликнуть, ввести текст, сделать скриншот.

Selenium vs Playwright

	Selenium	Playwright
Возраст	Старый, проверенный	Современный (Microsoft)
Скорость	Медленнее	Быстрее
Ожидания	Явные/неявные waits (сложно)	Auto-waiting (сам ждёт)
Мультибраузерность	Chrome, Firefox, Safari, Edge	Chromium, Firefox, WebKit
Мобильное	Appium (отдельно)	Эмуляция устройств
API	W3C WebDriver	CDP + собственный протокол

Что умеет WebDriver

Открыть URL: driver.get("https://example.com")
Найти элемент: driver.find_element(By.ID, "btn")
Кликнуть: element.click()
Ввести текст: element.send_keys("hello")
Получить текст: element.text
Скриншот: driver.save_screenshot("shot.png")

Ожидания (Waits) — критически важно!

Тип	Что делает	Использовать?
Implicit Wait	Глобальный таймаут на все find_element	⚠️ Осторожно — может маскировать проблемы
Explicit Wait	Ждать конкретное условие (элемент кликабелен, видим)	✅ Лучшая практика
sleep(5)	Ждать 5 секунд всегда	❌ Плохо — то слишком долго, то мало

На собе: "WebDriver — протокол управления браузером. Playwright современнее Selenium: auto-waiting, быстрее. Explicit Wait — лучшая практика для ожиданий, sleep — зло."

🔍 7. Charles Proxy

Charles — прокси-сервер, который стоит между клиентом и сервером и перехватывает весь трафик. Network в DevTools, но для любого приложения (включая мобильные).

Что умеет

Функция	Что делает	Зачем QA
Сниффинг	Показывает все запросы и ответы	Видеть что реально уходит на сервер и что возвращается
Rewrite	Подмена ответов (mock!)	Сервер вернул 200 → меняешь на 500, смотришь реакцию UI
Throttling	Замедление сети (3G, Edge)	Тестировать при плохом интернете: таймауты, спиннеры, потери данных
Breakpoints	Остановка запроса для ручного редактирования	На лету изменить тело запроса/ответа
Map Local	Подмена ответа локальным файлом	Вместо реального ответа — твой JSON-файл
HTTPS	Расшифровка HTTPS (нужен сертификат)	Видеть зашифрованный трафик

На собе: "Charles — прокси для перехвата и анализа трафика. Для мобильного QA — замена DevTools. Умеет: сниффинг, подмена ответов (mock), throttling (эмуляция плохой сети)."

📦 8. Mock (заглушки)

Mock — подмена реального ответа/объекта на заранее заданный. Позволяет тестировать без зависимости от бэкенда.

Зачем моки

Бэкенд ещё не готов → фронт уже разрабатывается → мокаем ответы
Тестировать ошибку 500 → не надо ломать прод, просто мокаем
Изолировать тест: фронт-тест не зависит от бэкенда
Воспроизводимый результат: один и тот же ответ каждый раз

Где используются

Инструмент	Как	Пример
Charles	Rewrite / Map Local — подмена ответа	Меняем 200 → 500
Postman	Mock Server — отдельный сервер с заглушками	Создаёшь mock server для коллекции
Код (автотесты)	Библиотеки: mock, nock, pytest-mock	mock.when("/api/users").thenReturn({...})

На собе: "Mock — заглушка, подменяющая реальный ответ сервера. Нужен когда бэкенд не готов, или чтобы протестировать обработку ошибок без ломания прода. Charles — один из инструментов для мокирования."

📊 9. Allure (репортинг)

Allure — инструмент для визуальных отчётов по автотестам. Показывает результаты прогона в красивом веб-интерфейсе.

Что показывает

Фича	Описание
✅❌ Результаты	Какие тесты прошли, какие упали
📸 Скриншоты	Автоматический скриншот при падении
📝 Шаги	Step-by-step: что делал каждый тест
📊 Тренды	Графики: как меняется стабильность тестов со временем
🏷 Категории	Группировка: product bugs, auto bugs, infrastructure

Allure vs Qase

	Allure	Qase
Назначение	Отчёты по автотестам	Управление тест-кейсами (TMS)
Ручные тесты	❌ Только авто	✅ Ручные + авто
Скриншоты при падении	✅ Автоматически	⚠️ Надо прикреплять вручную
Где используется	CI/CD пайплайн → отчёт после прогона	Ведение тестовой документации

На собе: "Allure — инструмент для отчётности автотестов. Показывает результаты прогона, скриншоты при падении, шаги теста, тренды. В стеке Ozon: allure-go + allure testops."

📱 10. Push-уведомления

Push — уведомление, которое приходит на устройство от сервера через системный сервис.

Как работает

Backend → FCM (Android) / APNs (iOS) → Устройство → Уведомление

Что тестировать

Проверка	Что смотрим
Доставка	Приходит ли пуш вообще
Контент	Правильный текст, иконка, звук
Тап на пуш	Открывается ли нужный экран (deeplink)
Состояние приложения	Открыто / в фоне / закрыто — разное поведение
Оффлайн	При появлении сети пуш должен прийти
Отписка	Если юзер выключил пуши — не приходят

На собе: "Схема: сервер → FCM/APNs → устройство. Проверяем: приходит ли, правильный контент, поведение при тапе (deeplink), разное состояние приложения (открыто/фон/закрыто), оффлайн."

💬 Вопросы для самопроверки

❓ Для чего нужно кроссбраузерное тестирование? Разные браузеры используют разные движки рендеринга (Blink, WebKit, Gecko). Страница может выглядеть и работать по-разному. Основные проблемы: Safari — CSS и даты, Firefox — редкие фичи, мобильные — touch вместо hover.

❓ Какие панели DevTools самые полезные для QA? Network — видеть все запросы, статусы, тела. Console — JS-ошибки. Elements — проверить DOM и стили. Application — cookie, localStorage.

❓ Что такое DOM? Document Object Model — дерево объектов HTML-страницы. Браузер строит его из HTML. Автотесты ищут элементы в DOM.

❓ Какие локаторы лучше и почему? Лучший — data-testid (не зависит от вёрстки и текста). Затем ID, CSS, XPath.

❓ Что такое Page Object Model? Паттерн: каждая страница = класс с локаторами и методами. Если меняется UI — правишь одно место.

❓ Что такое Charles Proxy? Прокси для перехвата трафика. Для мобилок — замена DevTools. Умеет: сниффинг, подмена ответов (mock), throttling (плохая сеть).

❓ Что такое Mock? Заглушка — подмена реального ответа сервера на заранее заданный. Нужен когда бэкенд не готов, или чтобы тестировать ошибки без ломания прода.

❓ Что такое Allure? Инструмент для отчётности автотестов. Показывает результаты прогона, скриншоты при падении, шаги теста, тренды.

❓ Как тестировать push-уведомления? Сервер → FCM/APNs → устройство. Проверяем: доставка, контент, тап (deeplink), состояние приложения (открыто/фон/закрыто), оффлайн.