Браузерные помощники тестировщика (QA Fest 2016)

  • View
    168

  • Download
    30

  • Category

    Software

Preview:

Click to see full reader

Citation preview

Киев 2016

Первый в Украине фестиваль тестирования

Браузерные помощники

тестировщикаАлександр Неделяев

Киев 2016

О себе

Браузерные помощники тестировщика

nedeliaev@gmail.com

nedeliaev

Alexander Nedeliaev

mailto:nedeliaev@gmail.com

Киев 2016

О чем речь

Браузерное расширение – небольшая программа, которая в некотором роде расширяет фунциональные возможности браузера.

https://wikipedia.org/wiki/browser_extension

Браузерные помощники тестировщика

https://wikipedia.org/wiki/browser_extension

Киев 2016

Основы

Браузерные помощники тестировщика

Киев 2016

Основы

Браузерные помощники тестировщика

Developer Tools (F12 | Ctrl+Shift+I)

• Анализ элементов страницы• Анализ времени загрузки страницы• Эмуляция мобильных устройств• Эмуляция состояния сети• Принудительное состояние элемента• ... и многое другое

Firebug (Firefox| Chrome)Firepath (Firefox)

https://addons.mozilla.org/en-GB/firefox/addon/firebug/
https://chrome.google.com/webstore/detail/firebug-lite-for-google-c/bmagokdooijbeehmkpknfglimnifench
https://addons.mozilla.org/en-GB/firefox/addon/firepath/

Киев 2016

Примеры

Браузерные помощники тестировщика

Вкладка Chrome ‘Elements’

Киев 2016

Примеры

Браузерные помощники тестировщика

Chrome эмуляция мобильных устройств и состояния сети

Киев 2016

Примеры

Браузерные помощники тестировщика

Firefox – время загрузки страницы

Киев 2016

Примеры

Браузерные помощники тестировщика

Firefox – доступные инструменты разработчика

Киев 2016

Начинаем расширять

Браузерные помощники тестировщика

Киев 2016

Начинаем расширять

Браузерные помощники тестировщика

Web Developer (Chrome | Firefox)

• Отключение javascript, очистка кэша• Работа с cookies • Просмотр, редактирование и отключение стилей• Анализ изображений, ссылок, форм и других элементов• Проверка на соответствие стандартам• Просмотр страницы в разных разрешениях• Утилиты: линейка, лупа

https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
https://addons.mozilla.org/en/firefox/addon/web-developer/

Киев 2016

Примеры

Браузерные помощники тестировщика

Web Developer – вкладки ‘Информаиця’ и ‘Формы’

Киев 2016

Доступность

Браузерные помощники тестировщика

Киев 2016

Доступность

Браузерные помощники тестировщика

WAVE (Chrome)• Анализ соответствия страндартам• Анализ верстки• Анализ изображений и ссылок• Анализ контраста

NoCoffee – Vision Simulator (Chrome)• Как видят сайт люди с нарушениями зрения

Accessibility Developer Tools (Chrome)ColorZilla (Chrome | Firefox)

https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh
https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl
https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb
https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp
https://addons.mozilla.org/en/firefox/addon/colorzilla/

Киев 2016

Примеры

Браузерные помощники тестировщика

WAVE

Киев 2016

Примеры

Браузерные помощники тестировщика

NoCoffee

Киев 2016

Производительность

Браузерные помощники тестировщика

Киев 2016

Производительность

Браузерные помощники тестировщика

Performance Analyzer (Chrome | Firefox)

• Анализ времени загрузки страницы• Распределение запросов по типу и доменам• Timing Waterfall

Page Load Time (Chrome)YSlow (Chrome | Firefox)

https://chrome.google.com/webstore/detail/performance-analyser/djgfmlohefpomchfabngccpbaflcahjf
https://addons.mozilla.org/en-GB/firefox/addon/performance-analyser/
https://chrome.google.com/webstore/detail/page-load-time/fploionmjgeclbkemipmkogoaohcdbig
https://chrome.google.com/webstore/detail/ninejjcohidippngpapiilnmkgllmakh
https://addons.mozilla.org/en/firefox/addon/yslow/

Киев 2016

Примеры

Браузерные помощники тестировщика

Performance Analyzer

Киев 2016

Примеры

Браузерные помощники тестировщика

Page Load Time

Киев 2016

Исследовательское тестирование

Браузерные помощники тестировщика

Киев 2016

Exploratory Testing by Microsoft (Chrome)

• Добавление скриншотов и заметок• Регистрация дефектов и задач• Запись видео• Интеграция с Visual Studio• Экспорт результатов сессии тестирования

Exploratory Testing (Chrome)

Браузерные помощники тестировщика

Исследовательское тестирование

https://marketplace.visualstudio.com/items?itemName=ms.vss-exploratorytesting-web
https://chrome.google.com/webstore/detail/exploratory-testing-chrom/khigmghadjljgjpamimgjjmpmlbgmekj

Киев 2016

Примеры

Браузерные помощники тестировщика

Exploratory Testing by Microsoft

Киев 2016

Примеры

Браузерные помощники тестировщика

Exploratory Testing

Киев 2016

Скриншоты

Браузерные помощники тестировщика

Киев 2016

СкриншотыNimbus (Chrome| Firefox)

• Снимок всей страницы• Снимок видимой части страницы• Снимок выбранной области / элемента• Запись видео• Редактирование снимков• Сохранение / отправка

Explain & Send Screenshots (Chrome | Firefox)FireShot (Chrome & Firefox)Awesome Screenshot (Chrome | Firefox)Screencastify (Chrome)

Браузерные помощники тестировщика

https://chrome.google.com/webstore/detail/nimbus-screenshot-and-scr/bpconcjcammlapcogcnnelfmaeghhagj
https://addons.mozilla.org/en/firefox/addon/nimbus-screenshot/
https://chrome.google.com/webstore/detail/capture-explain-and-send/mdddabjhelpilpnpgondfmehhcplpiin
https://addons.mozilla.org/en/firefox/addon/explain-and-send-screenshots/
http://getfireshot.com/
https://chrome.google.com/webstore/detail/awesome-screenshot-app/mfpiaehgjbbfednooihadalhehabhcjo
https://addons.mozilla.org/en/firefox/addon/awesome-screenshot-capture-/
https://chrome.google.com/webstore/detail/screencastify-screen-vide/mmeijimgabbpbgpdklnllpncmdofkcpn

Киев 2016

Примеры

Браузерные помощники тестировщика

FireShot Nimbus

Киев 2016

Примеры

Браузерные помощники тестировщика

Nimbus

Explain & Send Screenshots

Киев 2016

Примеры

Браузерные помощники тестировщика

Nimbus Screencastify

Киев 2016

Формы

Браузерные помощники тестировщика

Киев 2016

ФормыAutofill (Chrome | Firefox)

Web Developer Form Filler (Chrome)

Bug Magnet (Chrome)

Form Filler (Chrome)

Lipsum (Chrome | Firefox)

Браузерные помощники тестировщика

https://chrome.google.com/webstore/detail/autofill/nlmmgnhgdeffjkdckmikfpnddkbbfkkk
https://addons.mozilla.org/en/firefox/addon/autofill-262804/
https://chrome.google.com/webstore/detail/web-developer-form-filler/gbagmkohmhcjgbepncmehejaljoclpil
https://chrome.google.com/webstore/detail/bug-magnet/efhedldbjahpgjcneebmbolkalbhckfi
https://chrome.google.com/webstore/detail/form-filler/bnjjngeaknajbdcgpfkgnonkmififhfo
https://chrome.google.com/webstore/detail/lipsumcom-extension/jkkggolejkaoanbjnmkakgjcdcnpfkgi
https://addons.mozilla.org/en/firefox/addon/dummy-lipsum/

Киев 2016

Примеры

Браузерные помощники тестировщика

Autofill

Киев 2016

Примеры

Браузерные помощники тестировщика

Web Developer Form Filler

Киев 2016

Примеры

Браузерные помощники тестировщика

Bug magnet

Киев 2016

Размер

Браузерные помощники тестировщика

Киев 2016

Размер и шрифты

Браузерные помощники тестировщика

Page Ruler (Chrome)MeasureIt (Chrome | Firefox)

Fontface Ninja (Chrome | Firefox)WhatFont (Chrome)Font Finder (Firefox)

PerfectPixel (all browsers)

https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn
https://chrome.google.com/webstore/detail/measureit/pokhcahijjfkdccinalifdifljglhclm
https://addons.mozilla.org/en/firefox/addon/measureit/
https://chrome.google.com/webstore/detail/fontface-ninja/eljapbgkmlngdpckoiiibecpemleclhh
https://addons.mozilla.org/en/firefox/addon/fontface-ninja/
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
https://addons.mozilla.org/en/firefox/addon/font-finder/
http://www.welldonecode.com/perfectpixel/

Киев 2016

Примеры

Браузерные помощники тестировщика

Page Ruler

Киев 2016

Примеры

Браузерные помощники тестировщика

WhatFont

Киев 2016

Примеры

Браузерные помощники тестировщика

Fontface Ninja

Киев 2016

Примеры

Браузерные помощники тестировщика

Киев 2016

Разрешение экрана

Браузерные помощники тестировщика

Киев 2016

Разрешение экранаViewport Resizer (Chrome)

Resolution Test (Chrome)

Window Resizer (Chrome)

User Agent Switcher (Chrome | Firefox)

Браузерные помощники тестировщика

https://chrome.google.com/webstore/detail/viewport-resizer/kapnjjcfcncngkadhpmijlkblpibdcgm
https://chrome.google.com/webstore/detail/idhfcdbheobinplaamokffboaccidbal
https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg
https://addons.mozilla.org/en/firefox/addon/user-agent-switcher/

Киев 2016

На дорожку• Clear Cache (Chrome | Firefox)• Edit This Cookie (Chrome)• Ghostery (Chrome | Firefox)• REST Easy (Chrome | Firefox)• JSONView (Chrome | Firefox)• FoxyProxy (Chrome | Firefox)• Tilt 3D (Firefox)• Google Analytics Debugger (Chrome | Firefox)

Браузерные помощники тестировщика

https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn
https://addons.mozilla.org/en/firefox/addon/clear-cache-button/
https://chrome.google.com/webstore/detail/edit-this-cookie/fngmhnnpilhplaeedifhccceomclgfbg
https://chrome.google.com/webstore/detail/ghostery/mlomiejdfkolichcflejclcbmpeaniij
https://addons.mozilla.org/en/firefox/addon/ghostery/
https://chrome.google.com/webstore/detail/resteasy/nojelkgnnpdmhpankkiikipkmhgafoch
https://addons.mozilla.org/en/firefox/addon/rest-easy/
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc
https://addons.mozilla.org/en/firefox/addon/jsonview/
https://chrome.google.com/webstore/detail/foxyproxy-standard/gcknhkkoolaabfmlnjonogaaifnjlfnp
https://addons.mozilla.org/en/firefox/addon/foxyproxy-standard/
https://addons.mozilla.org/en/firefox/addon/tilt/
https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna
https://addons.mozilla.org/en/firefox/addon/gadebugger/

Киев 2016

Спасибо!

Браузерные помощники тестировщика

nedeliaev@gmail.com

nedeliaev

Alexander Nedeliaev

mailto:nedeliaev@gmail.com

Recommended

Александр Рысь: Браузерные пуш уведомления (web push)
Marketing
SysInternals. Топ-5 инструментов тестировщика
Education
Браузерные онлайн игры
Internet
Возможна ли жизнь без тестировщика?
Art & Photos
Грабли тестировщика
Education
Светлана Федянина - Роль тестировщика в Lean
Education
Жизненный цикл мобильной игры глазами тестировщика
Education
мамины помощники
Education
Помощники человека при счете
Documents
SOA - Взгляд тестировщика
Education
Браузерные и социальные игры по-взрослому. Что нас ждёт?
Technology
«Вредоносные браузерные расширения и борьба с ними», Александра Сватикова (Одноклассники.ру)
Internet
Эффективное взаимодействие тестировщика и аналитика
Education
Логические инструменты в арсенале тестировщика
Technology
Наши помощники - органы чувств
Education
TestGuy - эмулируем вашего тестировщика
Documents
Правила хорошего тона для тестировщика
Technology
Антон Волков (AlternativaPlatform) - “Браузерные игры – время перемен”
Entertainment & Humor
GamiSoft - браузерные игры для корпоративного образования
Business
Словари – наши друзья и помощники
Documents