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

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

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

Transcript

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