У цьому огляді я спробую розповісти про всі існуючі розширення для тестування, які можуть бути корисними для роботи початківців у сфері тестування програмного забезпечення. Я помітила, що інформація про розширення для тестування часто з'являється на спеціалізованих сайтах, і мені цікаво, чи будуть вони доречні для робочого процесу. Це будуть в основному розширення для Firefox, на жаль, ми змогли протестувати лише одне з них у Chrome через обставини. Тож, почнемо.
Розширення для тестування веб-сайтів у Firefox — це ті самі загальні розширення, які використовуються трохи в інший спосіб. Спеціалізованих розширень для процесу тестування не так багато.
Bug Magnet
Bug Magnet — це розширення для Firefox та Chrome для тестування сайтів. Ми використовуємо Chrome, щоб ознайомитися з розширенням. Вам доведеться трохи попрацювати, щоб отримати це розширення для Firefox, оскільки його немає в Firefox Marketplace.
Це дозволяє вам додавати до полів звичайні та граничні значення даних. Працює в полях для введення дати та текстових полях, які містять редаговані div. Якщо коротко, воно працюватиме з усім, куди можна ввести дані. В теорії.
Підтримує багатокадрові сторінки, якщо вони з одного домену. Легке завантаження сторінки та пасивний режим роботи не викликають сумнівів у продуктивності системи. І це відкритий код.
Ви можете лише додати місце розташування конфігурації до параметрів. Яка безмежна щедрість!
Вдалося додати вибрані значення до полів. Ви можете легко вставляти латиницю, кирилицю, арабську та інші лореми (навіть якщо це Unicode), імена, електронні адреси, URL-адреси та інше, що зазвичай вводиться вручну.
Все зрозуміло з лоремами. Імена — без питань. Окрім введення слів і фраз різної довжини латиницею (є не тільки ім'я та прізвище, але й інші слова та назви, які можуть бути записані у формах даних, також є серії імен з символами, що використовуються у французькій та інших мовах, літери з діакритиками, умлаутами, апострофами тощо), також є можливість встановлювати значення за замовчуванням у мовах, що відрізняються від англійської, що корисно, якщо вам потрібно знати, як контент подається іншою мовою та аналізувати код.
Ну що ж, ви можете писати імена за допомогою клавіатури. Врешті-решт, мистецтво копіювання та вставки з камбоджійських та індонезійських веб-сайтів доступне всім. У моїй практиці були випадки, коли я мала велику проблему з написанням ієрогліфів, також математичні символи були проблемою. З Bug Magnet ви зможете додавати фрагменти тексту різної довжини з пробілами або без пробілів від 128 байтів до 64 кілобайтів. Lorem ipsum dolor sit amet ніколи не буває достатньо. Тексти без пробілів, які пропонує додаток, — це просто набір чисел.
Міста. У стандартній конфігурації не так багато значень. Автоматичні запити Google на пошук та різні способи написання адреси з номером будинку перед або після назви вулиці також можна додати сюди.
Набір дійсних та недійсних електронних адрес у стандартній конфігурації — це справжнє задоволення. Якщо чесно, я не використав навіть половину всіх можливих варіантів, тому ставлю лайк за таку різноманітність, щедрість і фантазію.
URL-адреси. Є також дійсні та недійсні. Кирилиця відсутня. У своїй власній кастомній конфігурації я б додав URL-адреси тестових акаунтів соціальних мереж, адже потрібно перевірити їх правильне підключення.
Числа. За замовчуванням: значення різної довжини, з крапкою, комою, мінусом тощо.
Пробіли та табуляції. Було б корисно перевірити, чи видаляються пробіли та як різні типи форм реагують на зайві табуляції в тексті.
На додаток до всього вищезазначеного, ви можете вставити експлойти. У стандартній конфігурації їх всього кілька, але іноді потрібно перевірити, чи підтримує форма js-ін'єкції.
Можливо, стандартні налаштування розширень задовольнять потреби когось. Але в реальному житті завжди є місце для експериментів. Ось, будь ласка, стандартна конфігурація.
Наприклад, можна додати дійсні та недійсні телефонні номери (існуючих варіантів мені було недостатньо). Я не покрив весь список можливих варіантів, але цього буде достатньо, щоб навести приклад:
{"Phones":{"Valid":["+380673830000","+38 067-383-00-00","+38 067 383-00-00","+38 067 3830000","38067383000","0673830000","(067)3830000","+38(067)3830000","+38 067 383 00 00","+38 067 383 0000","+38 (067) 383 00 00","+38 (067) 383-00-00"],"Invalid":["0","sdfggs","-"," ","11111111111111121222221","-380673830000","+38o673830000","+38/067/383/00/00"]}}
Якщо у вас є велике бажання і достатньо часу, ви можете додати список логінів для входу на тестовий сайт або якимось чином налаштувати розширення браузера для QA так, щоб воно відповідало вашим вимогам або будь-яким вашим уявленням — все залежить від вашої фантазії.
Альтернатива. Якщо вам потрібен просто генератор лоремів, Dummy Lipsum буде достатнім. Після установки його можна викликати з контекстного меню, і ви зможете встановити необхідні параметри.
Веб-розробник
Не варто боятися назви цього розширення для Firefox, адже ми будемо використовувати його для тестування. Розширення для Chrome і Opera також доступні. Розробники обіцяли багато гнучких інструментів, які дозволяють ретельно перевіряти сторінку, отримувати інформацію про стилізацію кожного веб-елемента, вимикати та робити недоступним усе, що можливо на сторінці. Тепер давайте спробуємо розібратися!
Після установки ми можемо знайти все, що нам потрібно, у контекстному меню або в меню .
У меню ви можете вимкнути все, що вас турбує та перешкоджає вашому процесу тестування. Ви навіть можете вимкнути кеш. Також у вас є можливість встановити опцію для відображення кешованої інформації. Наприклад, кожного разу, коли ви відвідуєте сторінку, вам буде показано лише свіжу інформацію. Вам не потрібні Java або Java Script на вашій сторінці – просто вимкніть їх. Ми можемо загубитися в світі нетривіального тестування, досліджуючи різні випадки, коли користувач виявляє, що щось не працює або не відображається.
Є можливість додавати куки вручну, а також ви можете знайти індивідуальне видалення куків для різних типів. У меню ви можете зробити це, зрозумівши суть.
Вам потрібно протестувати CSS? Для цього є кілька інструментів. Хочете пограти з формами — ось ви і тут. Якщо потрібно показати паролі, а кнопки для цього не передбачено — плагін вам допоможе. Або якщо ви хочете заповнити всі поля різними даними — це можливо, адже така функція існує: . Адже ця функція розрізняє типи полів, але дані вам можуть не сподобатися.
На ряді веб-сайтів нам не вдалося протестувати автоматичне встановлення всіх прапорців, функція не спрацювала. Але ми змогли її протестувати:
Тоді, якщо QA-тестувальник хоче трохи пригод, є перетворення методу GET в POST і навпаки в розділі форм.
Іноді я занадто ледачий, щоб не лише натискати F12, а й прокручувати код сторінки. Було багато alt-атрибутів, згенерованих для картинок. О, що ж робити? Два кліки, друзі, всього два кліки. . Гей, це ж просто:
Щоб провести детальне тестування з забезпеченням якості, ми можемо увімкнути відображення довжини та ширини зображень, їх розміру та шляху до них. Крім того, ви можете легко перевірити, чи є на веб-сторінці погані зображення. У мене погані новини для інтернет-магазину «Розетка»:
Ви можете грати з зображеннями, як вам хочеться. Фони вас дратували? Ви можете легко їх приховати або вимкнути. Або якщо кількість зображень занадто велика — їх легко можна приховати, і HTML-код не буде зламано. До речі, є опція, яка робить зображення повнорозмірними. Ви також можете швидко перезавантажити всі зображення без перезавантаження веб-сторінки або замінити зображення їх атрибутами alt; інформація про зображення не є таємницею, тому вона відображається в дуже зрозумілому списку.
. За допомогою цього розділу ви можете переглядати інформацію про елементи веб-сторінки, речі, які не видно одразу, але які існують у коді. Тестувальник може одразу вказати, який елемент вважається проблемним. Звичайно, потрібно трохи розуміти код.
. Незважаючи на назву розділу, його функціонал буде корисним. За допомогою ви можете очистити кеш, історію, HTTP-ідентифікацію або все одразу. Хоча я зазвичай використовую старий добрий Shift+Ctrl+Delete для очищення кешу, у цьому випадку вам не потрібно це робити. відобразить приховані елементи на веб-сторінці. Це не працює щоразу, але якщо спрацює, ви побачите, наприклад, спливаюче вікно авторизації, яке зазвичай виникає при натисканні на відповідну кнопку.
Додавання лінійних напрямних буде корисним для тестування HTML-кодування, (хоча в розширенні FoxGuide вони більше, ніж просто демонстраційні). Є також аналог збільшувального скла (який буде повільним, як равлик, і Magnifier вже існує), і своя лінійка.
На жаль, лінійка має великий недолік — вона не залишається на екрані, коли ви переходите на іншу вкладку. Є її панель налаштувань і панель для відображення початкової та кінцевої точок, але самої лінійки немає, тому вам потрібно включати її з контекстного меню.
У цьому розділі також є свій HTML-редактор. Він дуже примітивний, і я б не користувався ним, якби в мене були якісь аналоги.
«Лінійна сторінка». Ось, тепер вся сторінка показується точно у вертикальному напрямку, йдучи глибоко вниз до футера. Інформація також може бути корисною, я думаю. Таблиці залишаються на своїх місцях одна під одною. Мені важко уявити, як я можу це використати. Хіба що, якщо мені потрібно перевірити той чи інший елемент, або їх купу на екрані. Більш досвідчені тестувальники, напевно, знайдуть тисячу і один спосіб, як використати цю функцію у своїй роботі. Я буду радий побачити ваші ідеї в коментарях.
дозволяє вам позначити всі посилання як переглянуті або непереглянуті.
(згідно з контекстом візуального акценту). За допомогою функцій цього розділу стає можливим зробити візуальний акцент на деяких елементах на веб-сторінці. Наприклад, ми повинні знати, як перейти до інших ресурсів з цієї сторінки — ; виділити блочні елементи — ; для застарілих елементів є спеціальне виділення — ; також ви можете виділити заголовки — . Можна виділити елементи в залежності від типу їхнього позиціонування: абсолютне, відносне, фіксоване.
. По-перше, за допомогою функцій з цього розділу ви можете візуально відобразити явний та фактичний розмір вікна як окрему панель або навіть як заголовок сторінки.
По-друге, ви можете змінювати розмір вікна вручну, але тепер існують простіші методи зміни.
Також ви можете зробити функцію зміни розміру гарячою клавішею.
А тепер король «Зміни розміру» — перегляд адаптивного макета на одній вкладці, включаючи всі розміри екрана, або .
Це буде корисно не тільки для тестувальників, а й для HTML-кодерів (щоб перевірити, чи не забули ви щось) і клієнтів. Ви можете переглядати сторінку в окремих блоках залежно від різних розмірів екрана, інші блоки не зникнуть. Але це може трохи сповільнитися (в мене, наприклад, був лаг, коли я повертався на вкладку з налаштуванням екрана, що було занадто довгим), але в будь-якому випадку ця функція економить трохи часу.
Є CSS валідатори, RSS-канали, HTML, URL-адреси тощо. Звичайно, веб-сервіси взяті з доброго старого http://www.w3.org/, кілька валідаторів з http://www.cynthiasays.com/ (але, якщо чесно, вони не працювали прямо з контекстного меню, тому легше потрапити туди безпосередньо). Валідатори також можуть бути прив'язані до гарячих клавіш, якщо тестування з валідаторами є повсякденною рутиною.
Розширення має власну консоль помилок, але є більш просунуті аналоги в інших розширеннях, як у випадку з HTML-редактором. Вона також відображається в окремому вікні. Я навіть не говорю про перегляд коду сторінки або коду окремих каркасів, які також дуже хороші.
Взагалі, Web Developer необхідно встановити для тестувальників. Можливо, воно перевантажене, але воно точно допоможе вам. Я часто забуваю тестувати і перевіряти щось, якісь дрібниці, і список функцій цього розширення може стати стартовою точкою для завершення списку тест-кейсів.
Інші корисні веб-сервіси для тестувальників QA.
Для лінійки, вбудованої в це розширення, звичайно, існують аналоги. Як окремі розширення. MeasureIt, наприклад.
Якщо вам потрібна звичайна лінійка, ви повинні її встановити, і ви не пошкодуєте про це.
Для блоку скриптів, якщо потрібно, ви можете використовувати NoScript. Він блокує JavaScript, Java, Flash та інший активний контент. Є також QuickJava, який підходить переважно для тих самих цілей. Можна активувати все окремо, вам лише потрібно додати потрібні кнопки на панель інструментів.
Як інструмент для валідації коду можна використовувати HTML Validator. Є кілька алгоритмів на вибір, результати валідації надаються з підказками та допомогою.
iMacros
Це розширення для повторюваних завдань. Ви можете завантажити його тут.
Як обіцяли розробники цього розширення
Що б ви не робили з Firefox, iMacros може це автоматизувати.
Так, звичайно, для більш детального тестування Selirium буде кращим, але iMacros готовий автоматизувати повсякденні завдання. Чи ні? Зараз ми побачимо, що може ця «автоматизація для бідних».
Отже, за допомогою цього розширення ми можемо записувати наші дії на сторінці, зберігати їх послідовність у файл, редагувати її та відтворювати. Час за часом. День за днем. Крім того, iMacros зберігає всі паролі з шифруванням 256 біт. Вам варто ознайомитися з Wiki.
Наприклад, iMacros використовується для входу в поштові скриньки, які розташовані на різних поштових сервісах. Але я не шукав легких шляхів і спробував щось інше: перегляд елементів головної сторінки, перехід до блогу та назад, авторизація, заповнення та редагування фотографії в галереї, перегляд галереї та додавання фотографії до кошика.
Виявилося, що це не зовсім так, як очікувалося. iMacros не зрозумів, як закривати спливаючі вікна та як прокручувати банери в браузері, що робити після натискання кнопки «backspace» на панелі інструментів браузера. Я не звинувачую його в останньому.
Я вирішив спростити задачу і прибрати перехід до блогу та кнопку «backspace».
Код виглядав ось так:
VERSION BUILD=8920312 RECORDER=FX TAB T=1 URL GOTO=https://***************** TAG POS=1 TYPE=DIV ATTR=TXT:Увійти<sp>Запам'ятати<sp>мене<sp>Забули<sp>пароль?<sp>Увійти* SET !ENCRYPTION NO TAG POS=1 TYPE=INPUT:PASSWORD FORM=ACTION:/login_check ATTR=ID:password CONTENT=***************** TAG POS=1 TYPE=INPUT:EMAIL FORM=ACTION:/login_check ATTR=ID:username CONTENT=***************** TAG POS=1 TYPE=BUTTON FORM=ACTION:/login_check ATTR=ID:_submit TAG POS=1 TYPE=INPUT:FILE ATTR=ID:fileupload CONTENT=D:\!Work\IMG_2659.JPG TAG POS=1 TYPE=A ATTR=TXT:Готово TAG POS=1 TYPE=SPAN ATTR=TXT:Вибрати... TAG POS=1 TYPE=A ATTR=TXT:Неопубліковано TAG POS=1 TYPE=BUTTON ATTR=TXT:Редагувати TAG POS=1 TYPE=A ATTR=TXT:30 TAG POS=1 TYPE=INS ATTR=CLASS:iCheck-helper&&TXT: TAG POS=1 TYPE=BUTTON ATTR=TXT:Зберегти<sp>зміни TAG POS=1 TYPE=BUTTON ATTR=TXT:Опублікувати TAG POS=1 TYPE=I ATTR=CLASS:icon<sp>icon-close<sp>js-close-notify&&TXT: TAG POS=1 TYPE=LI ATTR=TXT:Налаштування<sp>Інформація<sp>про<sp>акаунт<sp>Сповіщення<sp>Білінг<sp>h* TAG POS=2 TYPE=A ATTR=TXT:Інформація<sp>про<sp>акаунт TAG POS=1 TYPE=A ATTR=TXT:Відкрити<sp>в<sp>новому<sp>вікні</sp></sp></sp></sp></sp></sp></sp></sp></sp></sp></sp></sp></sp></sp></sp></sp></sp></sp>
Відтворення зупинилося на заповненні фото.
Це підходить для функціонального та регресійного тестування, тестування продуктивності, не лише для рутинного натискання на подібні форми, використовуючи різні дані для полів. Звісно, я знайду кілька завдань для цього розширення.
FireShot
Розширення для Fox-in-fire, яке дозволяє робити знімки екрану. Якщо у вас є причини вважати Monosnap, Joxy та Paint недостойними вашої уваги, спробуйте FireShot. Врешті-решт, це набагато простіше, ніж встановлювати багатомегабайтне програмне забезпечення.
Знімок усієї сторінки Shift+Ctrl+Alt+Z — це дуже корисна річ. Вам потрібно зробити позначки в кількох місцях на сторінці, але вони розташовані по всій висоті? Не хвилюйтеся, вам потрібно зробити лише один знімок. Звісно, є й альтернативні способи для цього, але тут у нас є редактор і всі необхідні інструменти.
Те, що мене турбує, це те, що коли ви використовуєте редактор на екрані, неможливо працювати з браузером, він стає неактивним. «Спочатку закрийте редактор, а потім — продовжуйте працювати», здавалося, сказали нам творці.
Ще одна перевага — це можливість публікації зроблених вами знімків на популярних сервісах та веб-сайтах, навіть у соціальних мережах. Також ви можете додавати посилання на власні хаби. Є також опція, яка дозволяє надсилати зображення в інші застосунки.
Знімки екрану можна зберігати в стандартних форматах, і є можливість конвертувати файли в pdf формат. Але для багатосторінкового PDF вам доведеться купити про-версію.
Витягування областей знімка та анотація працюють бездоганно. Ви можете розмити певні ділянки екрана з приватними даними, якщо вони будуть доступні широкій аудиторії.
Якщо цього недостатньо, є також можливість підсвічування виділеної області та інверсії її кольорів тощо.
Встановивши це розширення, ви отримуєте не лише інструмент для створення скріншотів для Fire Fox, але й функціональний графічний редактор. Але, боюся, ви витратите більше часу на оформлення ваших скріншотів, ніж на роботу. Що потрібно тестувальнику? Зробити скріншот, вказати, де знаходиться помилка, і додати його до звіту на багтреці.
Я ще не знаю, чи буду використовувати FireShot. У нього є потенціал, і час від часу додаються нові функції, але я звик до Monosnap, який має можливість записувати відео з місця, де знаходиться помилка, і завантажувати його на YouTube (в будь-якому випадку, це дуже корисна програма). Ви повинні спробувати ForeShot, він досить хороший.
І деякі аналоги.
Ви можете спробувати Screengrab, якщо вам не потрібно багато функцій. Якщо вам потрібно зберегти веб-сторінку як зображення, це розширення впорається з цим завданням. Воно може зробити скріншот не лише частини сторінки, що видно на екрані, але й зробити скріншот усієї сторінки або лише фрагмента. Або Take Screenshots, Screen Grab with Online Upload, яке завантажує скріншоти на ImageBam.
Відкрити з
Врешті-решт, я хочу коротко розповісти про Open With. Це розширення дозволяє відкрити поточну сторінку в іншому браузері, який встановлений на вашому ПК.
Це дуже зручно, вам не потрібно щоразу копіювати URL. Є також аналог, але тільки для тих, хто любить Opera.
Сподіваюся, цей огляд розширень для тестування буде корисним для вас і вашої роботи. Я не зробив огляд розширень для тестування Chrome, лише тому, що особисто віддаю перевагу використовувати розширення для тестування сайтів у Firefox.
