QA Co-pilot

🔖 Кнопка "Зробити добре": Створюємо власні інструменти в панелі закладокПривіт, екіпаж!Ми вже говорили про Chrome Snippets, але у них є мінус: треба натиснути F12, перейти в Sources, знайти скрипт, натиснути Run... Забагато кліків для частої дії.Хочете мати кнопку прямо під адресним рядком, яка робить магію одним кліком? Це називається Bookmarklet. Це шматок JS-коду, збережений замість URL.Що можна зробити одним кліком: 1️⃣Очистити всі Cookies та LocalStorage для цього сайту.2️⃣Підсвітити всі елементи без атрибута alt (для тестування доступності).3️⃣Мій улюблений кейс: Скопіювати технічну інфо для баг-репорту. Коли ви заводите баг, вам треба вказати: URL, розширення екрану, User Agent, час. Давайте зробимо кнопку, яка копіює це в буфер обміну автоматично.✨ Готовий промпт "Bookmarklet Creator":Виступи в ролі Frontend Developer.Напиши мені JavaScript-код для **Bookmarklet**.Код має бути обгорнутий у `javascript:(function(){ ... })()`, щоб я міг зберегти його як закладку.**Функціонал:**1. Збери дані про поточну сторінку: - URL (`window.location.href`) - Роздільна здатність екрану (`screen.width` x `screen.height`) - Розмір вікна (`window.innerWidth` x `window.innerHeight`) - User Agent (`navigator.userAgent`)2. Сформуй красивий текст для Jira (markdown або plain text).3. Скопіюй цей текст у буфер обміну (Clipboard API).4. Покажи `alert("Інфо скопійовано!")`. ✅ Результат від AI (готовий код):javascript:(function(){ const info = `*URL:* ${window.location.href}*Screen:* ${screen.width}x${screen.height}*Viewport:* ${window.innerWidth}x${window.innerHeight}*UA:* ${navigator.userAgent} `; navigator.clipboard.writeText(info.trim()).then(() => { alert('✅ Інфо для баг-репорту скопійовано!'); }).catch(err => { console.error('Failed to copy: ', err); alert('❌ Помилка копіювання (перевір права доступу)'); });})(); Як встановити: 1️⃣Натисніть Ctrl+D (додати закладку) на будь-якому сайті.2️⃣Назвіть її "🐞 Copy Bug Info".3️⃣Натисніть кнопку "Більше" (More) або "Змінити" (Edit).4️⃣У поле URL видаліть посилання і вставте код, який дав AI (починаючи з javascript:).5️⃣Збережіть. Як це працює? Тепер, коли ви знаходите баг: 1️⃣Тиснете на закладку "🐞 Copy Bug Info" на панелі.2️⃣Бачите повідомлення "Скопійовано!".3️⃣Йдете в Jira і тиснете Ctrl+V. Всі технічні дані вставляються ідеально. Висновок: Ви можете створити закладки для будь-чого: "Заповнити форму логіну", "Увімкнути червоні границі блоків", "Показати приховані поля". Ви самі будуєте свій інтерфейс браузера.А у вас є корисні букмарклети чи тільки посилання на YouTube? 👇

🤖 Google Sheets + Telegram: Як відправляти баги розробникам автоматичноПривіт, екіпаж!Бачу, вам сподобалась тема скриптів у таблицях. Давайте підвищимо градус крутості. 🔥Класична рутина: 1️⃣Проходиш тест-кейс у таблиці.2️⃣Знаходиш баг.3️⃣Відкриваєш Telegram/Slack.4️⃣Пишеш: "Там тест №45 впав, гляньте".5️⃣Повертаєшся в таблицю. Нащо перемикатися? Давайте зробимо так: ви обираєте в клітинці статус FAILED, і Таблиця САМА пише в Telegram розробнику.Це називається Webhooks, і це простіше, ніж здається.Що нам треба: 1️⃣Створити бота в Telegram через @BotFather (це займе 10 секунд, отримаєте токен).2️⃣Дізнатися ID чату, куди слати повідомлення (можна через бот @userinfobot).3️⃣Попросити AI написати магію. ✨ Готовий промпт "Auto-Reporter":Виступи в ролі Google Apps Script Developer.Напиши скрипт для Google Sheets, який відправляє повідомлення в Telegram.**Логіка:**1. Скрипт має спрацьовувати автоматично при редагуванні комірки (`onEdit`).2. Якщо в колонці **C** (Статус) з'являється значення **"FAILED"**: - Бери назву тесту з колонки **A** (того ж рядка). - Бери посилання/дані з колонки **B**. - Відправляй повідомлення в мій Telegram Bot.**Дані:**Token: "ВАШ_ТОКЕН"Chat ID: "ВАШ_CHAT_ID"Повідомлення має бути з емодзі, наприклад: "🚨 Баг знайдено! Тест: [Назва]. Дані: [Лінк]". ✅ Результат від AI (код для Extensions -> Apps Script):function onEdit(e) { var sheet = e.source.getActiveSheet(); var range = e.range; // Якщо змінили колонку 3 (C) і написали "FAILED" if (range.getColumn() == 3 && e.value == "FAILED") { var row = range.getRow(); var testName = sheet.getRange(row, 1).getValue(); // Колонка A var testLink = sheet.getRange(row, 2).getValue(); // Колонка B sendTelegram(testName, testLink); }}function sendTelegram(test, link) { var token = "ВСТАВТЕ_ТУТ_ТОКЕН_ВІД_BOTFATHER"; var chatId = "ВСТАВТЕ_ТУТ_ВАШ_ID"; var message = "🚨 *Баг детекед!*\n\n📌 *Тест:* " + test + "\n🔗 *Де:* " + link; var url = "https://api.telegram.org/bot" + token + "/sendMessage"; var payload = { "chat_id": chatId, "text": message, "parse_mode": "Markdown" }; var options = { "method": "post", "payload": payload }; UrlFetchApp.fetch(url, options);} Як це виглядає в житті? Ви просто працюєте з таблицею: "Pass, Pass, Pass, FAILED". І у вашого ліда в кишені вібрує телефон: "🚨 Баг детектед! Тест: Логін через Facebook".Висновок: Ви економите час на комунікації і виглядаєте як техно-маг. Google Sheets може керувати зовнішнім світом, якщо дати йому правильний код.Хто спробує налаштувати собі "тривожну кнопку"? 👇

📊 Google Sheets на стероїдах: Як перевірити 100 посилань прямо в таблиціПривіт, екіпаж!Ситуація: вам дали таблицю, в якій 500 посилань на сторінки товарів. Завдання: "Перевір, які з них робочі (200 OK), а які биті (404 Not Found)".❌ Варіант "Джуніор": Клікати на кожне посилання вручну. (Прощавай, вихідні). ❌ Варіант "Мідл": Експортувати в CSV, загнати в JMeter/Postman Runner. (Довго налаштовувати). ✅ Варіант "Smart QA": Створити власну функцію в Google Sheets, яка зробить це сама.Google Таблиці підтримують скрипти (Apps Script). Ви можете створити формулу =CHECK_STATUS(A1), яка піде в інтернет і поверне код відповіді.Писати скрипт вручну? Навіщо?✨ Готовий промпт "Sheet Scripter":Виступи в ролі Google Apps Script Developer.Мені потрібен скрипт для Google Sheets.Створи кастомну функцію `GET_STATUS(url)`.**Логіка:**1. Функція приймає URL.2. Робить HTTP-запит (GET) за цією адресою.3. Повертає HTTP Status Code (наприклад, 200, 404, 500).4. Якщо виникає помилка (наприклад, DNS error) — повертає текст "Error".5. Додай обробку кешу, щоб скрипт не спамив запитами при кожному чиху. ✅ Результат від AI (код):function GET_STATUS(url) { try { var response = UrlFetchApp.fetch(url, {muteHttpExceptions: true}); return response.getResponseCode(); } catch (error) { return "Error: " + error.toString(); }} Як це використати? 1️⃣У Google Таблиці натисніть Extensions (Розширення) -> Apps Script.2️⃣Видаліть все, що там є, і вставте код від AI.3️⃣Натисніть "Зберегти" (іконка дискети).4️⃣Поверніться в таблицю.5️⃣У комірці B1 напишіть: =GET_STATUS(A1) (де в A1 ваше посилання).6️⃣Протягніть формулу вниз на всі 500 рядків. Магія: Таблиця сама почне думати і за хвилину проставить коди: 200, 404, 500. Ви одразу бачите биті посилання. Фільтруєте по "404" — і баг-репорт готовий.Висновок: Google Sheets — це не просто клітинки. Це повноцінна IDE, якщо знати, як попросити AI написати під неї код.А ви використовуєте скрипти в таблицях чи тільки формули SUM? 👇

👯‍♂️ Stage vs Prod: Як знайти реальні відмінності в JSON, ігноруючи "шум"Привіт, екіпаж!Часта задача на регресії: переконатися, що нова версія API повертає те саме, що й стара (за винятком нових фіч). Ви берете два JSON-и по 500 рядків, кидаєте в Text Compare... і все червоне. 😱Чому? Бо змінилися id, createdAt, updatedAt, traceId. Це "динамічний шум". Вам же треба знати, чи не зникло поле price і чи не змінився тип даних у status.Очищати файли вручну? Ні. Попросіть AI зробити Smart Diff.Практичний кейс: Порівнюємо відповідь сервера v1 (Prod) і v2 (Stage).✨ Готовий промпт "JSON Detective":Виступи в ролі QA Lead.У мене є два JSON-об'єкти (Старий і Новий).**Завдання:**Порівняй їх структуру та дані, АЛЕ:1. **Ігноруй** поля, які змінюються динамічно (унікальні ID, timestamp, dates, tokens).2. Фокусуйся на змінах у **бізнес-логіці**: - Чи зникли якісь поля? - Чи змінилися типи даних (наприклад, string став int)? - Чи змінилися значення констант (наприклад, status: "active" стало "ENABLED")?Виведи тільки список значущих відмінностей.**JSON 1 (Old):** ...**JSON 2 (New):** ... ✅ Що видасть AI: Замість тисячі червоних рядків він напише коротко:⚠️ Знайдено критичні зміни: 1️⃣Поле user.fullName зникло в новій версії. Замість нього з'явилися firstName та lastName.2️⃣Поле price змінило тип: було String ("100.00"), стало Number (100.00). Це може зламати старий фронтенд!3️⃣Поле isAvailable змінилося з true на false, хоча товар той самий. Висновок: Ви за хвилину знаходите баги зворотної сумісності (Backward Compatibility), які могли б покласти мобільний додаток, і не витрачаєте час на перегляд таймстемпів.А чим ви порівнюєте великі JSON-и? Очима чи тулами? 👇

🔑 Хакерський набір: Як читати JWT-токени без сторонніх сайтівПривіт, екіпаж!Ви робите запит в Postman, а у відповідь — 401 Unauthorized. Чому? 1️⃣Токен прострочився 5 хвилин тому?2️⃣Вам дали токен з правами Read-Only, а ви намагаєтесь зробити POST?3️⃣В токені зашитий не той User ID? Токен (JWT) — це не абракадабра. Це просто Base64-кодований JSON. Його можна прочитати. Більшість йде на сайт jwt.io, вставляє туди токен і дивиться. СТОП! 🛑 Вставляти робочі токени (особливо з продакшну) на чужі сайти — це грубе порушення безпеки.Давайте зробимо свій безпечний декодер прямо в консолі браузера за допомогою AI.Практичний кейс: Вам треба миттєво дізнатися, коли закінчується життя токена (поле exp) і яка там роль.✨ Готовий промпт "JWT Decoder":Виступи в ролі Security Engineer.Напиши мені JavaScript-функцію для консолі браузера, яка парсить **JWT токен**.**Вимоги:**1. Функція приймає рядок токена.2. Вона декодує другу частину токена (Payload).3. Виводить вміст у зручному вигляді (console.table або JSON).4. **Важливо:** Якщо в токені є поля `exp` (expiration) або `iat` (issued at), перетвори їх з Unix Timestamp у читабельну дату (Human readable format).Код має працювати без зовнішніх бібліотек. ✅ Результат від AI (зберігаємо в Snippets):function parseJWT(token) { try { const base64Url = token.split('.')[1]; const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/'); const jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function(c) { return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); }).join('')); const data = JSON.parse(jsonPayload); // Конвертуємо дати ['exp', 'iat', 'nbf'].forEach(field => { if (data[field]) { data[field + '_readable'] = new Date(data[field] * 1000).toLocaleString(); } }); console.table(data); } catch (e) { console.error("Невалідний токен!", e); }} Як це використати? 1️⃣Збережіть цей код у сніпети (ми вчили це вчора 😉) або просто вставте в консоль.2️⃣Напишіть: parseJWT("ващ_довгий_токен_eyJ...").3️⃣Дивіться в табличку! 🔹role: "admin" (Ок, права є). 🔹exp_readable: "15.12.2025, 10:00:00" (Ага! Він протух годину тому). Висновок: Ви діагностуєте проблеми авторизації за секунди, не передаючи дані третім сторонам. Це професійний підхід до безпеки.А ви користуєтесь онлайн-декодерами чи довіряєте тільки собі? 👇

🍪 God Mode у браузері: Як пропустити туторіал і "накрутити" бонуси за 1 секундуПривіт, екіпаж!Знайома ситуація? Ви тестуєте гру або додаток. Щоб перевірити екран "Level 10", вам треба пройти попередні 9 рівнів. 😤 Або щоб побачити поп-ап "З поверненням!", треба заходити на сайт три дні поспіль.QA-початківці витрачають на це години. QA-профі знають: майже весь стан сучасних сайтів (Angular, React, Vue) зберігається у LocalStorage або Cookies.Якщо ви знаєте, що туди записати — ви можете телепортуватися на будь-який етап флоу. Але структура JSON там буває складною. Не партеся. Нехай AI напише вам "ін'єкцію".Практичний кейс: Сайт показує навчальний туторіал (Onboarding) для нових юзерів. Ви хочете його пропустити і зразу протестувати роботу з меню. Ви подивилися в Application -> LocalStorage і побачили, що там є ключ userSettings.✨ Готовий промпт "State Hacker":Виступи в ролі Frontend Developer.Я хочу маніпулювати **LocalStorage** в браузері для тестування.Сайт зберігає налаштування в ключі `app_settings`.**Завдання:**Напиши мені JS-код для консолі, який:1. Отримує поточний об'єкт з `app_settings` (якщо він є).2. Змінює (або додає) в ньому параметри: - `tutorialCompleted`: `true` (щоб пропустити навчання) - `visitCount`: `10` (щоб вважатися досвідченим юзером) - `theme`: `"dark"`3. Зберігає оновлений об'єкт назад у LocalStorage.4. Перезавантажує сторінку (`location.reload()`), щоб зміни вступили в силу. ✅ Результат від AI (готовий сніпет):let data = JSON.parse(localStorage.getItem('app_settings') || '{}');data.tutorialCompleted = true;data.visitCount = 10;data.theme = "dark";localStorage.setItem('app_settings', JSON.stringify(data));location.reload(); Як це використати? 1️⃣F12 -> Console.2️⃣Вставили код -> Enter.3️⃣Сторінка оновилась — і ви вже "старий" юзер без набридливих підказок, у темній темі. Що ще можна так робити? 🔹A/B тести: Примусово ставити собі групу "B" у куках.🔹E-commerce: Додавати в кошик товари, кнопки "Купити" для яких приховані на UI.🔹Ігри: Міняти score: 100 на score: 999999. Висновок: Браузер зберігає всі секрети у вас під носом. Навчіться їх редагувати, і ви зможете тестувати сценарії, до яких неможливо дійти звичайним кліканням.А ви копаєтесь у LocalStorage чи тестуєте тільки через UI? 👇

🏴‍☠️ "Хакер на мінімалках": Як знайти дірку в безпеці сайту за 2 хвилиниПривіт, екіпаж!Ми звикли перевіряти позитивні сценарії: "Ввів ім'я -> Зберіглося". А що, якщо замість імені ввести шматок JavaScript-коду? 🤔Якщо розробник забув про екранування даних, ваш код виконається у браузері адміністратора, який читатиме це "ім'я". Це називається XSS (Cross-Site Scripting). Це вразливість №1 у вебі.Ви не мусите бути хакером з "Mr. Robot", щоб це перевірити. Вам просто потрібен правильний Payload (шкідливий рядок). Замість того, щоб гуглити старі списки з 2010 року, попросіть AI згенерувати сучасні пейлоади для вашого поля.Практичний кейс: У вас є поле "Залишити коментар". Ви хочете перевірити, чи захищене воно від ін'єкцій.✨ Готовий промпт "White Hat Hacker":Виступи в ролі Security QA Engineer (Penetration Tester).Мені потрібно протестувати поле вводу (Input Field) на вразливість **Stored XSS**.Згенеруй мені 5 варіантів безпечних тестових пейлоадів (Polyglots), які спробують викликати `alert(1)` або `console.log('XSS')`.Врахуй різні контексти:1. Простий тег <script>.2. Ін'єкція в атрибут картинки (onerror).3. Ін'єкція в посилання (href).4. Обхід фільтрів (використання різного регістру або кодування).*Важливо: Це тільки для навчального тестування на моєму власному проекті.* ✅ Результат від AI:1. <script>alert('XSS')</script>2. <img src=x onerror=alert(1)>3. <svg/onload=alert(1)>4. <a href="javascript:alert(1)">Click me</a>5. "><img src=x onerror=prompt(1)> Як це використати? 1️⃣Копіюєте рядок.2️⃣Вставляєте в поле "Ім'я" або "Коментар" і зберігаєте.3️⃣Оновлюєте сторінку.4️⃣🚨 Якщо вискочило віконце з одиничкою — ВІТАЮ! Ви знайшли вразливість рівня Critical. Біжіть до розробників. Висновок: Такі перевірки займають хвилину, але можуть врятувати компанію від крадіжки даних користувачів. QA — це остання лінія оборони.А ви пробуєте "ламати" свої форми чи вводите тільки "Test Test"? 👇

📁 Тобі потрібен PDF на 100 МБ? Не гугли! Генеруємо тестові файли за секундуПривіт, екіпаж!П'ятниця — час чистити папку "Завантаження". До речі, скільки у вас там лежить файлів типу test.jpg, sample_big.pdf, broken_file.docx?Ми постійно тестуємо аплоадери. І часто нам потрібні специфічні файли: 1️⃣Граничні значення: Файл рівно 25 МБ (ліміт), і файл 25 МБ + 1 байт.2️⃣Биті файли: Щоб перевірити, чи не впаде сервер, якщо завантажити "сміття". Замість того, щоб шукати ці файли по всьому інтернету, створіть їх самі за допомогою пари рядків коду від AI.Практичний кейс №1: Файл точного розміру Вам треба перевірити ліміт завантаження (наприклад, макс 10 МБ). Треба створити файл розміром 10.5 МБ.✨ Промпт:Виступи в ролі Python Developer.Напиши скрипт, який створює "пустий" (dummy) файл з розширенням `.txt`.Вимоги:1. Розмір файлу має бути рівно **10.5 Megabytes**.2. Назва файлу: `test_oversize.txt`. ✅ Результат (Python):with open("test_oversize.txt", "wb") as f: f.seek(10 * 1024 * 1024 + 512 * 1024 - 1) # 10.5 MB f.write(b"\0") (Запускаєте — і у вас миттєво з'являється файл потрібного розміру!)Практичний кейс №2: "Бите" зображення Треба перевірити, як сервер обробляє invalid files. Якщо просто перейменувати .txt у .jpg, розумний сервер це зрозуміє. Нам треба файл, який має заголовок картинки, але "сміття" всередині.✨ Промпт:Напиши скрипт на Python, який створює файл `corrupted_image.jpg`.1. Початок файлу (Header) має бути як у справжнього JPG (щоб обдурити просту валідацію).2. Решта вмісту — випадкові байти (random noise).3. Розмір — 1 МБ. Висновок: Ви маєте повний контроль. Хочете CSV на мільйон рядків? PDF з вірусом? Картинку з метаданими 2026 року? AI згенерує генератор для всього цього.А у вас є "заповітна папочка" з тестовими файлами, чи ви кожен раз шукаєте нові? 👇

🕸 GraphQL без сліз: Як писати складні запити, не знаючи синтаксисуВи звикли до REST API: хочеш юзера — йдеш на /users/1, хочеш його замовлення — йдеш на /users/1/orders. Все просто.Але приходить розробник і каже: "Ми переїхали на GraphQL. Тепер у нас тільки один URL, а дані проси через Query". 🤯 Ви відкриваєте Postman, бачите пусте поле Body і не знаєте, що туди писати. { user { id } }? Чи query { getUser }?GraphQL дозволяє забрати всі потрібні дані одним запитом (і юзера, і його кота, і історію покупок). Але написати цей "багатоповерховий" запит без помилок — важко.Тут в гру вступає AI.Практичний кейс: Вам треба отримати ім'я користувача, його імейл та список із останніх 5 замовлень (тільки ID та суму) для юзера з ID 123.✨ Готовий промпт "GraphQL Builder":Виступи в ролі Backend Developer.Мені потрібно написати **GraphQL Query**.**Моя мета:**Отримати дані для користувача з `id: "123"`.Поля, які мені потрібні:1. З об'єкта User: `firstName`, `email`.2. З вкладеного об'єкта Orders (мені потрібні тільки останні 5 штук): `id`, `totalAmount`, `status`.Напиши правильний синтаксис запиту. ✅ Результат від AI:query { user(id: "123") { firstName email orders(limit: 5) { id totalAmount status } }} Що з цим робити? 1️⃣В Postman вибираєте тип GraphQL.2️⃣Вставляєте цей код у поле Query.3️⃣Тиснете Send.4️⃣Отримуєте ідеальний JSON саме з тими даними, які просили. Жодних зайвих полів! Бонус: Якщо запит не працює, скопіюйте помилку (Field 'orders' doesn't exist on type 'User') в AI, і він скаже: "А, точно, у вашій схемі це поле називається userOrders, спробуй так...".Висновок: GraphQL — це потужно, бо ви самі вирішуєте, що поверне сервер. З AI ви стаєте архітектором своїх даних за секунди.А у вас на проєкті REST чи GraphQL? 👇

🔗 "Copy XPath" — це зло. Генеруємо "безсмертні" локатори з AIПривіт, екіпаж!Ви вирішили написати свій перший автотест (або просто шукаєте елемент у консолі). Ви тиснете Copy selector у Chrome і отримуєте: #app > div:nth-child(2) > main > div.container > form > buttonЦе працює... до першого оновлення сайту. Як тільки розробник загорне кнопку в ще один div — ваш локатор зламається, а тест впаде.Професіонали пишуть локатори, прив'язані до суті елемента, а не до його місця. Але вигадувати складні XPath/CSS буває ліньки.Нехай це робить ваш Co-pilot.Практичний кейс: У нас є кнопка "Купити", яка захована глибоко в DOM-дереві.✨ Готовий промпт "Selector Architect":Виступи в ролі Automation QA Engineer.Ось HTML-код кнопки:`<button class="btn btn-primary btn-lg" id="x-123-random" onclick="...">Buy Now</button>`**Завдання:**Напиши мені 3 варіанти **надійних (robust)** локаторів для цього елемента (CSS або XPath), які НЕ зламаються, якщо зміниться верстка навколо або динамічний ID.Поясни, чому твої варіанти кращі за автозгенеровані. ✅ Що видасть AI: Варіант 1️⃣ (За текстом - XPath): //button[contains(text(), 'Buy Now')] Чому краще: Працює, де б кнопка не знаходилась, доки на ній написано "Buy Now".Варіант 2️⃣ (За атрибутами - CSS): button[class*='btn-primary'] Чому краще: Ігнорує динамічний ID (x-123-random), фокусується на стилі.Варіант 3️⃣ (Комбінований - XPath): //button[normalize-space()='Buy Now' and not(@disabled)] Чому краще: Знаходить тільки активну кнопку. Висновок: Замість того, щоб копіювати "сміття" з браузера, ви отримуєте елегантний код. Ваші тести стають стабільними, а ви витрачаєте менше часу на їх підтримку (maintenance).А ви пишете локатори самі чи довіряєте Chrome DevTools? 👇