Source
QA Co-pilot | Fake it till you make it": Тестуємо фронтенд без бекендуПривіт, екіпаж...
47 Views/Reach
2025-12-30 09:59
Message №142
🎭 "Fake it till you make it": Тестуємо фронтенд без бекендуПривіт, екіпаж!Знайома історія? Фронтендер каже: "Я зверстав сторінку Профілю, але дані не вантажаться, бо бекендери ще пиляють ендпоінт /api/profile". QA: "Ну ок, чекаю". 😴Не треба чекати! Ви можете перевірити верстку, лоадери та обробку даних вже зараз. Нам потрібно просто підсунути браузеру Mock (фейкову відповідь) замість реального запиту.Можна ставити Charles або Fiddler, але це довго. Простіше попросити AI написати скрипт, який "перехопить" функцію fetch у браузері і віддасть ваші дані.Практичний кейс: Сайт робить запит на /api/user-stats. Сервера немає. Ми хочемо, щоб сайт отримав: { "level": 80, "xp": 9999, "rank": "Legend" } і показав це на екрані.✨ Готовий промпт "Network Interceptor":Виступи в ролі JavaScript Developer.Напиши мені скрипт для консолі браузера, який мокає (перехоплює) `window.fetch`.**Логіка:**1. Збережи оригінальний `fetch`.2. Якщо URL запиту містить `/api/user-stats` — не роби реальний запит до сервера.3. Замість цього поверни штучну відповідь (Response object) зі статусом 200 і таким JSON: `{ "level": 80, "xp": 9999, "rank": "Legend" }`4. Всі інші запити пропускай як зазвичай (return originalFetch).5. Виведи в консоль повідомлення: "⚡️ Запит перехоплено!".
✅ Результат від AI (Monkey Patching):const originalFetch = window.fetch;window.fetch = async (...args) => { const [url] = args; // Якщо бачимо потрібний URL if (url.toString().includes('/api/user-stats')) { console.log(`⚡️ Перехоплено запит до: ${url}`); // Повертаємо фейк return new Response(JSON.stringify({ level: 80, xp: 9999, rank: "Legend" }), { status: 200, headers: { 'Content-Type': 'application/json' } }); } // Всі інші запити йдуть на реальний сервер return originalFetch(...args);};console.log("✅ Mock Server активовано прямо в браузері!");
Як це використати?
1️⃣Відкриваєте сторінку.2️⃣Вставляєте код у консоль -> Enter.3️⃣Оновлюєте частину інтерфейсу (натискаєте кнопку "Оновити профіль").4️⃣Магія: Браузер думає, що отримав дані від сервера, і малює вам "80 level".
Що це дає? Ви можете протестувати, як виглядає інтерфейс із дуже довгими іменами, з нульовим балансом або з помилкою 500 (просто змініть status: 200 на 500 у коді). Ви не залежите від бекенду.А ви чекаєте на API чи мокаєте дані самі? 👇