-
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
В зависимости от браузера, термин может отличаться от обозначений, к примеру, 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 – запись видео, указатель мыши, рисование на лету, сохранение на гугл драйв или ютюб
Размер иммеет значение особенно при описнии багов