QA Fest 2016. Александр Неделяев. Браузерные помощники тестировщика
- 1. Киев 2016 Первый в Украине фестиваль тестирования Браузерные помощники тестировщика Александр Неделяев
- 2. Киев 2016 О себе Браузерные помощники тестировщика [email protected] 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 Спасибо! Браузерные помощники тестировщика [email protected] nedeliaev Alexander Nedeliaev
Editor's Notes
- #4: В зависимости от браузера, термин может отличаться от обозначений, к примеру, plug-in (плагин), add-on (дополнение) или extension (расширение). Но суть остается неизменной Расширяют функциональность Делают возможной интеграцию с другими сервисами Изменяют внешний вид страницы Essentially, extensions add features you can use, while plug-ins add features websites can use. “Plug-ins” are things like Adobe Flash, Oracle Java, or Microsoft Silverlight.
- #5: Прежде чем строить дом, нужно заложить прочный фундамент. Если говорить о тестировании веб приложений, то это – инструменты разработчика. К сожалению нету вкладки Инструменты тестировщика – будем обходиться этими.
- #6: Прежде чем что-либо расширять, нужно понимать, что может сам инструмент, в данном случае браузер. Что именно мы расширяем. Инструменты разработчика – бесценная находка тестировщика. Совет: перед тем, как устанавливать плагины, обязательно ознакомьтесь с инструментами разработчика в Хроме и ФФ.
- #11: Ну что же, имея прочный фундамент, давайте расширять наш арсенал.
- #12: 12345
- #15: Web accessibility evaluation tool WCAG
- #16: Естественно не все ошибки – руководство к действию
- #17: Периферийное (глаукома, пигментный ретинит) Дейтеранопия
- #27: FireShot – отличные функции, но не так удобно редактировать Explain & Send Screenshots - то же самое, но редактор чище и красивее Nimbus – мощнее всех, видео запись, отправка в слек, аналог евернота Awesome Screenshot - абсолютно то же самое, но режим шаринга не такой хороший (много мусора на страничке) Screencastify – запись видео, указатель мыши, рисование на лету, сохранение на гугл драйв или ютюб
- #36: Размер иммеет значение особенно при описнии багов