ТОП 13 Chrome-розширень для QA

Google Chrome — один із найпопулярніших браузерів у світі. Згідно з даними Statista за 2021 рік, 3,2 млрд людей використовують його як основний браузер. Chrome популярний, зокрема, серед розробників і тестувальників. 

А магазин розширень Google Chrome налічує понад 137,3 тис. розширень. IT-фахівці компанії, що спеціалізується на комплексних послугах з iOS, Android і веб-розробки Join.To.IT зібрали список із 13 розширень для Chrome, які будуть корисні для тестувальників. Вони спрощують повсякденні завдання та підвищують продуктивність.

1. Window Resizer

За допомогою цього розширення можна змінювати розмір вікна браузера, щоб імітувати різну роздільну здатність екрана. Це особливо корисно для розробників та QA спеціалістів, оскільки допомагає їм тестувати продукт в різних розмірах і роздільній здатності браузера. Ви можете встановити ширину чи висоту вікна, положення вікна, піктограму (телефон, планшет, ноутбук, робочий стіл), застосувати нові розміри до всього вікна або лише до вікна перегляду.

 

Як виглядає ресайз сторінки з допомогою розширення Window Resizer

 

2. Awesome Screenshot and Screen Recorder

Розширення для створення скріншотів і скрінкастів. Дозволяє «зняти» сторінку повністю, тільки видиму або виділену її частину, а також записати на відео вікно браузера. Готові файли можна змінювати у редакторі: додавати підписи, виділяти потрібний текст маркерами, обрізати необхідні елементи. Записані відео можна зберегти у форматі gif-зображення. Файли завантажуються до хмари Google — для цього знадобиться ваш обліковий запис.

У розширення — понад 3 млн користувачів у всьому світі. Крім Chrome-розширення, є й веб-додаток Awesome Screenshot, який дозволяє редагувати не лише зроблені знімки, а будь-які завантажені зображення.

 

Розширення Awesome Screenshot and Screen Recorder

 

3. Nimbus Screenshot & Screen Video Recorder

Існує додаток для нотаток — Nimbus Note, який не поступається гігантам на кшталт Evernote чи OneNote. До нього розробили розширення Nimbus Screenshot. Воно не потребує встановлення основного клієнта і може працювати окремо, без входу в обліковий запис Nimbus.

Після того, як ви зняли видиму частину, виділений фрагмент сторінки або її повністю, до отриманого зображення чи відео можна додати підписи, виділити на ньому текст або намалювати фігуру. 

У Nimbus Screenshot доступна Pro‑версія, яка дозволяє завантажувати готові скріншоти й відеозаписи в облікові записи Google Drive, Dropbox і Slack.

 

Приклад розширення Nimbus Screenshot & Screen Video Recorder

 

4. PerfectPixel

Під час тестування UI — зовнішнього вигляду веб-додатку — буває необхідним перевірити кожен піксель. Крім того, багато замовників, замовляючи верстку або сайт, вказують у технічному завданні, що верстка має бути pixel-perfect. Це значить, що вона повинна до найменших деталей відповідати тому, що намальовано на макеті дизайну сайту у Photoshop (PSD-макеті).

Розширення PerfectPixel дозволяє переконатися в тому, що всі пікселі розташовані на своєму місці. З його допомогою можна накласти напівпрозоре зображення поверх HTML-сторінки та зробити піксельний аналіз.

Розширення відрізняється зручним і user-friendly інтерфейсом, широкими функціональними можливостями, легкістю підключення й комфортними для роботи налаштуваннями, що дозволяють тестувати продукт швидше та ефективніше.

 

Приклад накладення зображення поверх сторінки

5. Lorem Ipsum Generator

У процесі розробки веб-сторінки її наповнюють спеціально згенерованим текстом Lorem ipsum. Це «латинська заглушка». Генератори Lorem Ipsum ефективно використовувати тестувальникам та веб-дизайнерам. Наприклад, QA-спеціалісти користуються розширенням для браузера Lorem Ipsum Generator, коли потрібно швидко заповнити поля для тестування форми.

Крім того, такий «наповнювач» заощаджує час веб-дизайнерам (їм не потрібно чекати, коли з’явиться готовий контент) і дає можливість замовнику зосередитися на оцінці графічного виконання продукту. Крім того, замовник не завжди може відразу надати дизайнеру вже підготовлені рекламні слогани, тексти з описом складу продукту або набір статей для сайту в процесі розробки. У такому випадку у роботі допомагає генератор Lorem ipsum. 

З допомогою розширення можна також налаштувати розміри тексту для «заглушки». Готовий плейсхолдер потрібно лише скопіювати зі сторінки онлайн-генератора і вставити на сайт.

 

 

Генератор Lorem Ipsum для Google Chrome

 

6. FakeFiller 

Розширення для Chrome, яке допомагає заповнювати вхідні дані на сторінці фіктивною інформацією. Його активно використовують розробники й тестувальники, які працюють із формами, оскільки воно усуває потребу вручну вводити значення в поля. Усі дані заповнюються рандомно згенерованими іменами, електронними адресами, номерами телефонів тощо. Що вміє плагін:

• За одну кнопку заповнюються відразу всі поля — хоч 7, хоч 25, хоч 110.
• Щоразу розширення заповнює поля різними значеннями. Отже, можна легко створити 10 різних користувачів, карток товару тощо.
• Підтримує властивість maxlength.
• Рандомно заповнює дропдауни, чек-бокси й радіо-баттони.
• Ігнорує CAPTCHA, сховані, відключені або лише для читання поля.

Важливо: у розширення є недолік — він не завжди коректно заповнює поля, це залежить від коду HTML (тип поля, правила). Отже, можуть виникати помилки, які потрібно виправляти вручну.

 

Приклад заповнення полей розширенням FakeFiller

7. LightShot

Зручне та просте у використанні розширення Google Chrome для скріншотів. Lightshot дозволяє робити знімки екрана різними способами. Вміє «знімати» фрагменти сторінок, а не вкладку повністю. Для цього потрібно натиснути кнопку на панелі інструментів, виділити потрібну область, позначити текст, намалювати фігуру або додати напис. А потім зберегти скріншот на диск, хмару Prntscr.com чи видрукувати. 

Скріншот можна миттєво відредагувати в user-friendly редакторі. Особливо приємна функція Lightshot — пошук за зображенням у Google. Це корисно, якщо на якесь зображення не можна клацнути правою кнопкою миші й пошукати стандартним методом у Chrome.

8. WhatFont

WhatFont дозволяє легко та швидко знаходити необхідні  шрифти на сторінці. Для використання потрібно встановити розширення, навести курсор на потрібне слово й інструмент покаже, який шрифт використовується на сторінці з усіма деталями: назва, сімейство, стиль, розмір, колір тощо. Розширення також визначає служби, які використовуються для обслуговування веб-шрифтів. Підтримує Typekit і Google Font API.

 

Як працює розширення WhatFont

 

9. Exploratory Testing Chrome Extension

Робити нотатки під час тестування може бути  складно, особливо якщо потрібно перемикатися між кількома вікнами. Буває, потрібно зробити скріншот, пов’язати його з пояснювальним текстом. У таких випадках можна використовувати Exploratory Testing Chrome Extension. У ECTE можна додати всю інформацію про баги безпосередньо у вікні браузера.

У ECTE простий інтерфейс — він дозволяє легко додати нотатки та поділити їх на баги, ідеї тощо. Після тестування можна скласти детальний звіт у браузері або вивантажити його в CSV-файл.

 

Ключові можливості розширення:

• Повідомлення про помилки, ідеї, примітки та запитання.
• Створення скріншотів під час сеансу.
• Перегляд результатів сеансу у звіті.
• Збереження та імпорт сеансу.
• Експорт сесії у JSON, CSV або HTML.

 

Exploratory Testing Chrome Extension

 

10. WAVE Evaluation Tool

Онлайн-сервіси грають ключову роль у спілкуванні бренду з аудиторією. Але програми або сайти зав’язані на візуальному, тоді як людям із поганим зором непросто прочитати пост або розглянути всі кнопки на чекауті. Згідно зі звітом ВООЗ за 2021 рік, від далекозорості чи короткозорості страждають щонайменше 2,2 млрд людей у світі, або ж понад 20% населення. Порушення зору також можуть бути пов’язані з дальтонізмом чи тим, як мозок обробляє зображення (наприклад, з дислексією). 

А 5% населення Землі страждає від проблем зі слухом. Отже, такі користувачі не сприймуть звуковий контент, якщо ви не інтегруєте текст у відео.

WAVE Evaluation Tool — корисний інструмент оцінки доступності, який тестує сайт на відповідність принципам WCAG (для людей з інвалідністю). Ось кілька прикладів цих принципів:

• Забезпечте альтернативи для звукового та візуального контенту.
• Не покладайтеся на один колір.
• Забезпечте використання рідної мови користувача.
• Забезпечте зрозумілі механізми навігації.

Додаючи піктограми та індикатори на веб-сторінку, розширення полегшує оцінку та повідомляє про проблеми доступності. Аналіз виконується у браузері Chrome, що дозволяє безпечно оцінювати внутрішні, локальні, захищені паролем та інші конфіденційні веб-сторінки. Щоб запустити звіт WAVE, натисніть на піктограму WAVE праворуч від адресного рядка браузера або оберіть "WAVE this page" з контекстного меню.

 

Приклад використання WAVE Evaluation Tool

 

11. Yet Another REST Client

YARC (Yet Another REST Client) — це проста у використанні консоль REST Chrome, яка дозволяє тестувати різні API. За допомогою розширення ви можете легко зберегти свої файли, а потім імпортувати чи експортувати їх на нові пристрої. Вони автоматично синхронізуються з обліковим записом Google користувача. Розширення зберігає історію попередніх запитів, щоб ви могли використовувати їх для швидкого порівняння чи повторного запуску.

 

Розширення Yet Another REST Client

 

12. D3coder

Корисне розширення Chrome для тестування безпеки. Може кодувати й декодувати текст (ase64, хешування CRC32, rot13), вибраний за допомогою контекстного меню з браузера. Скопіюйте текст у буфер обміну та виберіть «Перетворити» у меню. Після перетворення d3coder скопіює отриманий текст буфер обміну. Розширення дозволяє перетворювати текст на різні формати: наприклад, base64, CRC32, rot13, CRC32 та UNIX-час.

 

Приклад використання Chrome-розширення D3coder

 

13. EditThisCookie 

Робота з кукі може бути заплутаною — часто буває, cookie-файли на сайті є, коли без них можна обійтися, та їх немає, коли вони справді потрібні на сторінці. Керувати кукі через консоль браузера не дуже зручно. Натомість можна використовувати розширення EditThisCookie, яке показує набір файлів cookie, які можна змінити, додати, видалити або заблокувати.

 

Ключові особливості розширення Chrome:

• Редагування файлів cookie.
• Видалення файлів cookie.
• Додавання нових файлів cookie.
• Створення файлів cookie.
• Пошук файлів cookie.
• Захист файлів cookie (тільки читання).
• Блокування файлів cookie (фільтр).
• Експорт файлів cookie у формат JSON, Netscape (ідеально для wget та curl), Perl::LPW.
• Імпорт файлів cookie у форматі JSON.
• Обмеження максимального терміну дії будь-яких файлів cookie.
• Покращення продуктивності, видалення застарілих файлів cookie.
• Імпорт cookies.txt.

EditThisCookie — найкраща в ніші утиліта, тому в інтернеті з’явилася велика кількість розширень зі схожим функціоналом.

 

Як виглядає плагін EditThisCookie

Wrap-up: підсумок

Жодне з цих розширень не замінить ручного тестування, але кожне допоможе спростити роботу QA. Усі вони значно заощадять час на виконання рутинних завдань та дозволять сфокусуватись під час тестування на важливих речах.

Щотижня розробники Chrome випускають нові розширення. Знаєте корисні розширення Chrome, яких немає у переліку? Поділіться ними в соцмережах, теґнувши @jointoit.