Embed Size (px)
Citation preview
Киев 2016
Первый в Украине фестиваль тестирования
Браузерные помощники
тестировщикаАлександр Неделяев
Киев 2016
О себе
Браузерные помощники тестировщика
nedeliaev
Alexander Nedeliaev
Киев 2016
О чем речь
Браузерное расширение – небольшая программа, которая в некотором роде расширяет фунциональные возможности браузера.
https://wikipedia.org/wiki/browser_extension
Браузерные помощники тестировщика
Киев 2016
Основы
Браузерные помощники тестировщика
Киев 2016
Основы
Браузерные помощники тестировщика
Developer Tools (F12 | Ctrl+Shift+I)
• Анализ элементов страницы• Анализ времени загрузки страницы• Эмуляция мобильных устройств• Эмуляция состояния сети• Принудительное состояние элемента• ... и многое другое
Firebug (Firefox| Chrome)Firepath (Firefox)
Киев 2016
Примеры
Браузерные помощники тестировщика
Вкладка Chrome ‘Elements’
Киев 2016
Примеры
Браузерные помощники тестировщика
Chrome эмуляция мобильных устройств и состояния сети
Киев 2016
Примеры
Браузерные помощники тестировщика
Firefox – время загрузки страницы
Киев 2016
Примеры
Браузерные помощники тестировщика
Firefox – доступные инструменты разработчика
Киев 2016
Начинаем расширять
Браузерные помощники тестировщика
Киев 2016
Начинаем расширять
Браузерные помощники тестировщика
Web Developer (Chrome | Firefox)
• Отключение javascript, очистка кэша• Работа с cookies • Просмотр, редактирование и отключение стилей• Анализ изображений, ссылок, форм и других элементов• Проверка на соответствие стандартам• Просмотр страницы в разных разрешениях• Утилиты: линейка, лупа
Киев 2016
Примеры
Браузерные помощники тестировщика
Web Developer – вкладки ‘Информаиця’ и ‘Формы’
Киев 2016
Доступность
Браузерные помощники тестировщика
Киев 2016
Доступность
Браузерные помощники тестировщика
WAVE (Chrome)• Анализ соответствия страндартам• Анализ верстки• Анализ изображений и ссылок• Анализ контраста
NoCoffee – Vision Simulator (Chrome)• Как видят сайт люди с нарушениями зрения
Accessibility Developer Tools (Chrome)ColorZilla (Chrome | Firefox)
Киев 2016
Примеры
Браузерные помощники тестировщика
WAVE
Киев 2016
Примеры
Браузерные помощники тестировщика
NoCoffee
Киев 2016
Производительность
Браузерные помощники тестировщика
Киев 2016
Производительность
Браузерные помощники тестировщика
Performance Analyzer (Chrome | Firefox)
• Анализ времени загрузки страницы• Распределение запросов по типу и доменам• Timing Waterfall
Page Load Time (Chrome)YSlow (Chrome | Firefox)
Киев 2016
Примеры
Браузерные помощники тестировщика
Performance Analyzer
Киев 2016
Примеры
Браузерные помощники тестировщика
Page Load Time
Киев 2016
Исследовательское тестирование
Браузерные помощники тестировщика
Киев 2016
Exploratory Testing by Microsoft (Chrome)
• Добавление скриншотов и заметок• Регистрация дефектов и задач• Запись видео• Интеграция с Visual Studio• Экспорт результатов сессии тестирования
Exploratory Testing (Chrome)
Браузерные помощники тестировщика
Исследовательское тестирование
Киев 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)
Браузерные помощники тестировщика
Киев 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)
Браузерные помощники тестировщика
Киев 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)
Киев 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)
Браузерные помощники тестировщика
Киев 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)
Браузерные помощники тестировщика
Киев 2016
Спасибо!
Браузерные помощники тестировщика
nedeliaev
Alexander Nedeliaev
