Браузерные помощники тестировщика (QA Fest 2016)
•Download as PPTX, PDF•
2 likes•870 views
В темные времена доминации Internet Explorer на рынке браузеров, тестировщик оставался один на один с тестируемым приложением, и лишь усердие, трудолюбие и крепкий алкоголь могли спасти его от безумия и профессионального выгорания. К счастью, времена изменились. Современные браузеры скрывают в себе множество полезных функций и имеют тысячи плагинов, способных помочь тестировщику веб приложений. Я расскажу вам о браузерных плагинах, которые значительно облегчили тестирование верстки, поизводительности, отзывчивости сайта, позволили мне ускорить выполнение рутинных задач, а также повысили личную эффективность.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Браузерные помощники тестировщика (QA Fest 2016)
Similar to Браузерные помощники тестировщика (QA Fest 2016) (20)
Браузерные помощники тестировщика (QA Fest 2016)
- 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
Editor's Notes
- В зависимости от браузера, термин может отличаться от обозначений, к примеру, 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.
- Прежде чем строить дом, нужно заложить прочный фундамент. Если говорить о тестировании веб приложений, то это – инструменты разработчика. К сожалению нету вкладки Инструменты тестировщика – будем обходиться этими.
- Прежде чем что-либо расширять, нужно понимать, что может сам инструмент, в данном случае браузер. Что именно мы расширяем. Инструменты разработчика – бесценная находка тестировщика. Совет: перед тем, как устанавливать плагины, обязательно ознакомьтесь с инструментами разработчика в Хроме и ФФ.
- Ну что же, имея прочный фундамент, давайте расширять наш арсенал.
- 12345
- Web accessibility evaluation tool WCAG
- Естественно не все ошибки – руководство к действию
- Периферийное (глаукома, пигментный ретинит) Дейтеранопия
- FireShot – отличные функции, но не так удобно редактировать Explain & Send Screenshots - то же самое, но редактор чище и красивее Nimbus – мощнее всех, видео запись, отправка в слек, аналог евернота Awesome Screenshot - абсолютно то же самое, но режим шаринга не такой хороший (много мусора на страничке) Screencastify – запись видео, указатель мыши, рисование на лету, сохранение на гугл драйв или ютюб
- Размер иммеет значение особенно при описнии багов