🛠 Полезные фишки Chrome DevTools — часть 1

🟡 Скриншоты при загрузке страницы

Зачем:
Отлавливать баги при построении страницы: мигающие элементы, спиннеры, прогресс-бары, проблемы с initial render и CLS.

Как включить:

F12 → Network → ⚙️ → Capture screenshots → Ctrl+R

Результат:
Лента скриншотов с таймкодами — видно, когда и в каком порядке появляются элементы.

🟡 Поиск неиспользуемого кода

Зачем:
Найти лишний CSS/JS, который замедляет загрузку и может маскировать баги.

Как найти:

F12 → Ctrl+Shift+P → Show Coverage → Start instrumenting coverage

Результат:
Таблица с процентом использованного и неиспользованного кода.
Красным отмечен код, не выполнявшийся в текущем сценарии.

Где помогает:
— лишние стили и шрифты
— подключённые, но неиспользуемые библиотеки
— избыточный CSS после редизайнов

⚠️ Coverage показывает не «плохой код», а код, который не был задействован при проверке.

🟡 Сохранение изменений локально

Зачем:
Вносить правки в HTML/CSS/JS так, чтобы они сохранялись после перезагрузки страницы.

Как настроить:

F12 → Sources → Overrides → Select folder for overrides → выбрать папку

Как сохранить файл:

Network → нужный файл → клик правой кнопкой → Save for overrides

Пример сценария:

Sources → найти файл → внести правку → Ctrl+S → обновить страницу

Изменения применяются автоматически.

⚠️ Ограничения:
— не сохраняет правки напрямую из вкладки Elements
— работает только с файлами из Sources
— CSS редактируется через Styles, если файл зафиксирован в Overrides

❗️ Полезные горячие клавиши

F12 — открыть DevTools
Ctrl+Shift+C — инспектор элементов
Ctrl+Shift+P — Command Menu
Ctrl+Shift+M — Device Toolbar
Ctrl+R — перезагрузка страницы
Ctrl+S — сохранить изменения
Ctrl+F — поиск

🐸 Библиотека тестировщика

#тест_драйв

❓ Что такое порт

Порт — это номер, который показывает, какому приложению на устройстве предназначен сетевой запрос.

Если по-простому:

IP-адрес — это дом, порт — конкретная дверь в этом доме.

📦 Один сервер → один IP → тысячи портов

Каждый порт может быть занят своим сервисом:
• 80 / 443 — веб-сайты
• 22 — SSH
• 3306 — MySQL

Когда браузер открывает сайт, он стучится не просто в сервер, а в конкретный порт, где слушает нужное приложение.

⚠️ Почему это важно для qa:

— Сервис может быть доступен, но не на том порту

— Баги «не открывается», «таймаут», «connection refused» часто связаны именно с портами

— Разные окружения = разные порты

🐸 Библиотека тестировщика

#теория_на_пальцах

📌 Базовый чек-лист тестирования (core)

Этот список используют каждый день — вне зависимости от проекта, стека и роли. Если его нет в голове, всё остальное не имеет значения.

🔤 Что проверять всегда:

• Happy path и негативные сценарии
Функция должна работать не только «как задумано», но и ломаться контролируемо.

• Границы значений
0 / 1 / max / пусто / null — именно здесь чаще всего живут баги.

• Валидация ввода
Тип данных, длина, формат. Никакой веры фронту — только факты.

• Ошибки сервера и сообщения пользователю
500-е, таймауты, сетевые ошибки. Пользователь должен понимать, что произошло.

• Повторные действия
Double click, refresh, кнопка Back. Приложения ломаются не от кликов, а от повторов.

• Сохранение состояния
Перезагрузка страницы, смена вкладки, возврат назад. Состояние не должно «исчезать».

🐸 Библиотека тестировщика

#артефакт #intern

📁 Кнопка «Удалить аккаунт», которая ломала сервер

Пользователь написал в поддержку:

"Пытаюсь удалить аккаунт, но вылетает ошибка. Уже 10 раз пробовал — не работает."

Оказалось — запрос доходил до сервера, но падал с 500 ошибкой.

🔍 Суть проблемы:

UI отправлял запрос на удаление, но бэкенд не мог его обработать. Frontend показывал общую ошибку «Что-то пошло не так», а в логах — 500 Internal Server Error.

Что происходило на сервере:
— запрос приходил корректно
— начиналось удаление связанных данных
— падало на внешнем ключе (foreign key constraint)
— откат транзакции → ничего не удалялось

Почему падало:
— не учли каскадное удаление из связанных таблиц
— не обработали зависимости (комментарии, лайки, подписки)
— забыли про данные в очередях и кэше
— не протестировали на аккаунтах с реальной активностью

Итог: пользователь не мог удалить аккаунт + данные оставались в системе + нарушение GDPR.

👀 Почему так бывает:

— тестировали на "чистых" тестовых аккаунтах
— не проверили связи в БД перед реализацией
— не добавили обработку cascade delete
— пропустили проверку логов при тестировании

❓ Проверяете логи и ошибки на бэкенде:

👍 — Да, смотрю логи и статусы ответов
❤️ — Только если UI показал ошибку
😁 — Доверяю, что бэкенд работает
🔥 — Буду тестировать на «тяжёлых» аккаунтах с данными

🐸 Библиотека тестировщика

#разбор_полетов

❓ Что такое IP-адрес

IP-адрес — это числовой адрес устройства в сети, по которому его можно однозначно найти.

Формат IPv4 выглядит так:

192.168.0.101

Каждое число — от 0 до 255.
Это не случайно, а результат разбиения адреса на части.

🔍 Как читать IP-адрес

На примере 192.168.0.101:
• 192 — крупная подсеть (класс сети)
• 168 — подсеть внутри неё
• 0 — конкретная локальная подсеть
• 101 — номер устройства в этой подсети

Проще:

🔤 первые числа — где сеть, последние — кто именно в этой сети.

⚠️ Почему это важно для QA

— Один и тот же сервис в разных окружениях → разные IP
— Часто путают IP сервера и IP клиента
— Firewall, whitelist, API-доступы почти всегда завязаны на IP
— «У меня работает» ≠ «доступно по нужному IP»

Типичный кейс:

сервис запущен, порт открыт, но запрос идёт не в ту подсеть

📌 Запомнить просто

``` • IP — куда идёт запрос
• Порт — кому именно
• DNS — как имя превращается в IP```

Без понимания IP — отладка превращается в угадайку.

📍 Навигация: [Вакансии]

🐸 Библиотека тестировщика

#теория_на_пальцах

🛠 Полезные фишки Chrome DevTools — часть 2

Часть 1

🟠 Эмуляция медленного интернета

Зачем: тестировать поведение сайта при слабом соединении

Как включить:

Network → No Throttling → выбрать Fast 3G / Slow 3G / Offline

Кастомный профиль:

```Add → Add custom profile → заполнить Download, Upload, Latency → Add```

Где помогает: проверить загрузку на слабом интернете, тестировать таймауты, оффлайн-режим

🟠 Копирование запросов

Зачем: воспроизвести запрос в cURL, Postman или Console

Как скопировать:

F12 → Network → выбрать запрос → ПКМ → Copy → выбрать формат (cURL, Fetch и тд)

Что можно:
✓ Запустить через cURL
✓ Импортировать в Postman
✓ Подправить во вкладке Console как fetch
✓ Отправить разработчику для воспроизведения бага

🟠 Блокировка запросов

Зачем: проверить, что произойдет, если контент не загрузится (картинка, анимация)

Как заблокировать:

```F12 → Ctrl+Shift+P → Show Request Blocking
Network → выбрать элемент → Headers → скопировать URL
Network Request Blocking → Add Pattern → вставить запрос → Add
✓ Enable network request blocking → перезагрузить страницу```

Где помогает: проверить альтернативный текст для картинок, обработку ошибок загрузки, fallback-контент

🟠 Полезные хоткеи

Ctrl+F — поиск в Network
Ctrl+L — очистить Network

📍 Навигация: [Вакансии]

🐸 Библиотека тестировщика

#тест_драйв

✨ Кейс: поиск не находит товар по артикулу

Система «работает». Тесты пройдены. Но пользователь пишет: «Товар есть, а поиск его не видит».

Что происходит на самом деле ❓

Один ввод — и вся логика рассыпается:

🟡 Пользователь копирует артикул
🟡 В начале или конце появляются пробелы
🟡 Поиск сравнивает строки напрямую
🟡 Совпадения нет → результат пустой

ABC123 ≠ ABC123

Happy-path:
— ручной ввод
— без пробелов
— результат найден

Реальность:
— копипаст
— мобильная клавиатура
— Excel / почта / PDF

💡 Поиск ломается не из-за сложной логики. Он ломается из-за одного лишнего символа. Если строка пришла от пользователя — она уже подозрительная.

🎁 Новогодняя акция: 3 курса по цене 1
🤝 Помощь с выбором курса

🐸 Библиотека тестировщика

#разбор_полетов

🗂 Шпаргалка по API

Компактный справочник по всему, что нужно знать при тестировании API:

✅ HTTP-методы и коды ответов
✅ Заголовки и структура запросов
✅ Инструменты тестирования (Postman, SoapUI, REST Assured, Karate)
✅ Безопасность API (OAuth, JWT, CORS)
✅ Мониторинг и производительность

Держите под рукой — пригодится на каждом проекте! 😍

📍 Навигация: [Вакансии]

🎁 Новогодняя акция: 3 курса по цене 1
🤝 Помощь с выбором курса

🐸 Библиотека тестировщика

#артефакт

💳 Топ-вакансий недели для тестировщиков

Инженер по нагрузочному тестированию (от 130 000 до 180 000 ₽)

QA-тестировщик (до 120 000 ₽, Дубна)

QA Fullstack (C#) Middle+ (270 000 ₽)

Senior тестировщик в SRE-платформу (до 460 000 ₽)

➡️ Больше офферов в канале: @testerrjob

🐸 Библиотека тестировщика

🔥 Философский вопрос дня

Один QA инженер охраняет стадо овец (прод) от волков (багов).

Достаточно ли одного QA на проект ❓

Голосуйте реакциями:

🤩 — Да, если хороший
🌚 — Нужна команда QA
❤️ — Автотесты важнее людей

🐸Библиотека тестировщика

#стендап_qa

📝 Как составить резюме, которое работает

Правильное резюме — ключ к собеседованиям в IT.

➕ В видео:

— Частые ошибки в резюме тестировщиков
— Пошаговое оформление резюме
— Как описать опыт и достижения
— Что делать, если опыта нет
— Сопроводительное письмо

В описании видео есть ссылка на готовый шаблон 📎📎

📍 Навигация: [Вакансии]

🎁 Новогодняя акция: 3 курса по цене 1
🤝 Помощь с выбором курса

🐸 Библиотека тестировщика

#карьерный_трек

🧃 Скрытые фичи Chrome, о которых мало кто знает

Даже без DevTools браузер умеет больше, чем кажется. Страница chrome://chrome-urls открывает все внутренние разделы Chrome.

• chrome://flags — экспериментальные настройки
 • chrome://gpu — информация об аппаратном ускорении
 • chrome://net-export — диагностика сетевых проблем

Хороший способ заглянуть под капот браузера и быстрее находить причины нестабильных багов.

📍 Навигация: [Вакансии]

🎁 Новогодняя акция: 3 курса по цене 1
🤝 Помощь с выбором курса

🐸 Библиотека тестировщика

#тест_драйв

🤔 Когда использовать тест-кейсы, а когда чек-листы

⏺ Тест-кейсы использую там, где важны контроль и воспроизводимость:

• крупные и сложные системы
• критичный бизнес-функционал (платежи, безопасность)
• регрессия и стабильные требования
• команды с ротацией и автоматизацией

⏺ Чек-листы выбираю, когда важны скорость и гибкость:

• быстрые релизы и частые изменения
• исследовательское тестирование
• UI и мобильные приложения
• MVP и продуктовая разработка

💡 Хорошая практика — комбинировать: тест-кейсы для ядра и регрессии, чек-листы для новых фич и интерфейсов.

📍 Навигация: [Вакансии]

🎁 Новогодняя акция: 3 курса по цене 1
🤝 Помощь с выбором курса

🐸 Библиотека тестировщика

#разбор_полетов

❓ Как запрос проходит от браузера до сервера

Когда пользователь нажимает кнопку или открывает страницу, запрос не летит сразу в backend. По дороге он проходит несколько слоёв — и каждый может повлиять на результат.

1️⃣ Браузер

Формирует HTTP-запрос:

— URL
— метод (GET / POST)
— заголовки
— cookies, токены, тело запроса

📌 Уже здесь возможны проблемы: неправильные заголовки, кеш браузера, CORS.

2️⃣ CDN (если есть)

Запрос попадает в ближайший edge-сервер.

Что происходит:

— если контент закеширован → ответ сразу
— если нет → запрос идёт дальше

3️⃣ Reverse-Proxy

Первый «вход» в инфраструктуру приложения.

Может делать:

• SSL-терминацию
• проверку авторизации
• rate-limit
• модификацию заголовков
• проксирование дальше

4️⃣ Балансировщик нагрузки

Если backend не один — запрос нужно кому-то отдать.

Что делает:

— выбирает инстанс приложения
— следит за доступностью
— может использовать sticky sessions

5️⃣ Backend (наконец-то)

Приложение:

— обрабатывает запрос
— работает с БД
— формирует ответ

Ответ идёт обратно тем же путём, и на каждом этапе может быть изменён или закеширован.

📍 Навигация: [Вакансии]

🎁 Новогодняя акция: 3 курса по цене 1
🤝 Помощь с выбором курса

🐸 Библиотека тестировщика

#теория_на_пальцах