В темные времена доминации Internet Explorer на рынке браузеров, тестировщик оставался один на один с тестируемым приложением, и лишь усердие, трудолюбие и крепкий алкоголь могли спасти его от безумия и профессионального выгорания. К счастью, времена изменились. Современные браузеры скрывают в себе множество полезных функций и имеют тысячи плагинов, способных помочь тестировщику веб приложений. Я расскажу вам о браузерных плагинах, которые значительно облегчили тестирование верстки, поизводительности, отзывчивости сайта, позволили мне ускорить выполнение рутинных задач, а также повысили личную эффективность.

1. Киев 2016
Первый в Украине фестиваль тестирования
Браузерные помощники
тестировщика
Александр Неделяев

2. Киев 2016
О себе
Браузерные помощники тестировщика
nedeliaev@gmail.com
nedeliaev
Alexander Nedeliaev

3. Киев 2016
О чем речь
Браузерное расширение – небольшая программа,
которая в некотором роде расширяет
фунциональные возможности браузера.
https://wikipedia.org/wiki/browser_extension
Браузерные помощники тестировщика

4. Киев 2016
Основы
Браузерные помощники тестировщика

5. Киев 2016
Основы
Браузерные помощники тестировщика
Developer Tools (F12 | Ctrl+Shift+I)
• Анализ элементов страницы
• Анализ времени загрузки страницы
• Эмуляция мобильных устройств
• Эмуляция состояния сети
• Принудительное состояние элемента
• ... и многое другое
Firebug (Firefox| Chrome)
Firepath (Firefox)

6. Киев 2016
Примеры
Браузерные помощники тестировщика
Вкладка Chrome ‘Elements’

7. Киев 2016
Примеры
Браузерные помощники тестировщика
Chrome эмуляция мобильных устройств и состояния сети

8. Киев 2016
Примеры
Браузерные помощники тестировщика
Firefox – время загрузки страницы

9. Киев 2016
Примеры
Браузерные помощники тестировщика
Firefox – доступные инструменты разработчика

10. Киев 2016
Начинаем расширять
Браузерные помощники тестировщика

11. Киев 2016
Начинаем расширять
Браузерные помощники тестировщика
Web Developer (Chrome | Firefox)
• Отключение javascript, очистка кэша
• Работа с cookies
• Просмотр, редактирование и отключение стилей
• Анализ изображений, ссылок, форм и других элементов
• Проверка на соответствие стандартам
• Просмотр страницы в разных разрешениях
• Утилиты: линейка, лупа

12. Киев 2016
Примеры
Браузерные помощники тестировщика
Web Developer – вкладки ‘Информаиця’ и ‘Формы’

13. Киев 2016
Доступность
Браузерные помощники тестировщика

14. Киев 2016
Доступность
Браузерные помощники тестировщика
WAVE (Chrome)
• Анализ соответствия страндартам
• Анализ верстки
• Анализ изображений и ссылок
• Анализ контраста
NoCoffee – Vision Simulator (Chrome)
• Как видят сайт люди с нарушениями зрения
Accessibility Developer Tools (Chrome)
ColorZilla (Chrome | Firefox)

15. Киев 2016
Примеры
Браузерные помощники тестировщика
WAVE

16. Киев 2016
Примеры
Браузерные помощники тестировщика
NoCoffee

17. Киев 2016
Производительность
Браузерные помощники тестировщика

18. Киев 2016
Производительность
Браузерные помощники тестировщика
Performance Analyzer (Chrome | Firefox)
• Анализ времени загрузки страницы
• Распределение запросов по типу и доменам
• Timing Waterfall
Page Load Time (Chrome)
YSlow (Chrome | Firefox)

19. Киев 2016
Примеры
Браузерные помощники тестировщика
Performance Analyzer

20. Киев 2016
Примеры
Браузерные помощники тестировщика
Page Load Time

21. Киев 2016
Исследовательское тестирование
Браузерные помощники тестировщика

22. Киев 2016
Exploratory Testing by Microsoft (Chrome)
• Добавление скриншотов и заметок
• Регистрация дефектов и задач
• Запись видео
• Интеграция с Visual Studio
• Экспорт результатов сессии тестирования
Exploratory Testing (Chrome)
Браузерные помощники тестировщика
Исследовательское тестирование

23. Киев 2016
Примеры
Браузерные помощники тестировщика
Exploratory Testing by Microsoft

24. Киев 2016
Примеры
Браузерные помощники тестировщика
Exploratory Testing

25. Киев 2016
Скриншоты
Браузерные помощники тестировщика

26. Киев 2016
Скриншоты
Nimbus (Chrome| Firefox)
• Снимок всей страницы
• Снимок видимой части страницы
• Снимок выбранной области / элемента
• Запись видео
• Редактирование снимков
• Сохранение / отправка
Explain & Send Screenshots (Chrome | Firefox)
FireShot (Chrome & Firefox)
Awesome Screenshot (Chrome | Firefox)
Screencastify (Chrome)
Браузерные помощники тестировщика

27. Киев 2016
Примеры
Браузерные помощники тестировщика
FireShot Nimbus

28. Киев 2016
Примеры
Браузерные помощники тестировщика
Nimbus
Explain & Send Screenshots

29. Киев 2016
Примеры
Браузерные помощники тестировщика
Nimbus Screencastify

30. Киев 2016
Формы
Браузерные помощники тестировщика

31. Киев 2016
Формы
Autofill (Chrome | Firefox)
Web Developer Form Filler (Chrome)
Bug Magnet (Chrome)
Form Filler (Chrome)
Lipsum (Chrome | Firefox)
Браузерные помощники тестировщика

32. Киев 2016
Примеры
Браузерные помощники тестировщика
Autofill

33. Киев 2016
Примеры
Браузерные помощники тестировщика
Web Developer Form Filler

34. Киев 2016
Примеры
Браузерные помощники тестировщика
Bug magnet

35. Киев 2016
Размер
Браузерные помощники тестировщика

36. Киев 2016
Размер и шрифты
Браузерные помощники тестировщика
Page Ruler (Chrome)
MeasureIt (Chrome | Firefox)
Fontface Ninja (Chrome | Firefox)
WhatFont (Chrome)
Font Finder (Firefox)
PerfectPixel (all browsers)

37. Киев 2016
Примеры
Браузерные помощники тестировщика
Page Ruler

38. Киев 2016
Примеры
Браузерные помощники тестировщика
WhatFont

39. Киев 2016
Примеры
Браузерные помощники тестировщика
Fontface Ninja

40. Киев 2016
Примеры
Браузерные помощники тестировщика

41. Киев 2016
Разрешение экрана
Браузерные помощники тестировщика

42. Киев 2016
Разрешение экрана
Viewport Resizer (Chrome)
Resolution Test (Chrome)
Window Resizer (Chrome)
User Agent Switcher (Chrome | Firefox)
Браузерные помощники тестировщика

43. Киев 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)
Браузерные помощники тестировщика

44. Киев 2016
Спасибо!
Браузерные помощники тестировщика
nedeliaev@gmail.com
nedeliaev
Alexander Nedeliaev