Successfully reported this slideshow.

QA Fest 2016. Александр Неделяев. Браузерные помощники тестировщика

7

Share

1 of 44
1 of 44

QA Fest 2016. Александр Неделяев. Браузерные помощники тестировщика

7

Share

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

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

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

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

More Related Content

Viewers also liked

More from QAFest

Related Books

Free with a 14 day trial from Scribd

See all

QA Fest 2016. Александр Неделяев. Браузерные помощники тестировщика

  1. 1. Киев 2016 Первый в Украине фестиваль тестирования Браузерные помощники тестировщика Александр Неделяев
  2. 2. Киев 2016 О себе Браузерные помощники тестировщика nedeliaev@gmail.com nedeliaev Alexander Nedeliaev
  3. 3. Киев 2016 О чем речь Браузерное расширение – небольшая программа, которая в некотором роде расширяет фунциональные возможности браузера. https://wikipedia.org/wiki/browser_extension Браузерные помощники тестировщика
  4. 4. Киев 2016 Основы Браузерные помощники тестировщика
  5. 5. Киев 2016 Основы Браузерные помощники тестировщика Developer Tools (F12 | Ctrl+Shift+I) • Анализ элементов страницы • Анализ времени загрузки страницы • Эмуляция мобильных устройств • Эмуляция состояния сети • Принудительное состояние элемента • ... и многое другое Firebug (Firefox| Chrome) Firepath (Firefox)
  6. 6. Киев 2016 Примеры Браузерные помощники тестировщика Вкладка Chrome ‘Elements’
  7. 7. Киев 2016 Примеры Браузерные помощники тестировщика Chrome эмуляция мобильных устройств и состояния сети
  8. 8. Киев 2016 Примеры Браузерные помощники тестировщика Firefox – время загрузки страницы
  9. 9. Киев 2016 Примеры Браузерные помощники тестировщика Firefox – доступные инструменты разработчика
  10. 10. Киев 2016 Начинаем расширять Браузерные помощники тестировщика
  11. 11. Киев 2016 Начинаем расширять Браузерные помощники тестировщика Web Developer (Chrome | Firefox) • Отключение javascript, очистка кэша • Работа с cookies • Просмотр, редактирование и отключение стилей • Анализ изображений, ссылок, форм и других элементов • Проверка на соответствие стандартам • Просмотр страницы в разных разрешениях • Утилиты: линейка, лупа
  12. 12. Киев 2016 Примеры Браузерные помощники тестировщика Web Developer – вкладки ‘Информаиця’ и ‘Формы’
  13. 13. Киев 2016 Доступность Браузерные помощники тестировщика
  14. 14. Киев 2016 Доступность Браузерные помощники тестировщика WAVE (Chrome) • Анализ соответствия страндартам • Анализ верстки • Анализ изображений и ссылок • Анализ контраста NoCoffee – Vision Simulator (Chrome) • Как видят сайт люди с нарушениями зрения Accessibility Developer Tools (Chrome) ColorZilla (Chrome | Firefox)
  15. 15. Киев 2016 Примеры Браузерные помощники тестировщика WAVE
  16. 16. Киев 2016 Примеры Браузерные помощники тестировщика NoCoffee
  17. 17. Киев 2016 Производительность Браузерные помощники тестировщика
  18. 18. Киев 2016 Производительность Браузерные помощники тестировщика Performance Analyzer (Chrome | Firefox) • Анализ времени загрузки страницы • Распределение запросов по типу и доменам • Timing Waterfall Page Load Time (Chrome) YSlow (Chrome | Firefox)
  19. 19. Киев 2016 Примеры Браузерные помощники тестировщика Performance Analyzer
  20. 20. Киев 2016 Примеры Браузерные помощники тестировщика Page Load Time
  21. 21. Киев 2016 Исследовательское тестирование Браузерные помощники тестировщика
  22. 22. Киев 2016 Exploratory Testing by Microsoft (Chrome) • Добавление скриншотов и заметок • Регистрация дефектов и задач • Запись видео • Интеграция с Visual Studio • Экспорт результатов сессии тестирования Exploratory Testing (Chrome) Браузерные помощники тестировщика Исследовательское тестирование
  23. 23. Киев 2016 Примеры Браузерные помощники тестировщика Exploratory Testing by Microsoft
  24. 24. Киев 2016 Примеры Браузерные помощники тестировщика Exploratory Testing
  25. 25. Киев 2016 Скриншоты Браузерные помощники тестировщика
  26. 26. Киев 2016 Скриншоты Nimbus (Chrome| Firefox) • Снимок всей страницы • Снимок видимой части страницы • Снимок выбранной области / элемента • Запись видео • Редактирование снимков • Сохранение / отправка Explain & Send Screenshots (Chrome | Firefox) FireShot (Chrome & Firefox) Awesome Screenshot (Chrome | Firefox) Screencastify (Chrome) Браузерные помощники тестировщика
  27. 27. Киев 2016 Примеры Браузерные помощники тестировщика FireShot Nimbus
  28. 28. Киев 2016 Примеры Браузерные помощники тестировщика Nimbus Explain & Send Screenshots
  29. 29. Киев 2016 Примеры Браузерные помощники тестировщика Nimbus Screencastify
  30. 30. Киев 2016 Формы Браузерные помощники тестировщика
  31. 31. Киев 2016 Формы Autofill (Chrome | Firefox) Web Developer Form Filler (Chrome) Bug Magnet (Chrome) Form Filler (Chrome) Lipsum (Chrome | Firefox) Браузерные помощники тестировщика
  32. 32. Киев 2016 Примеры Браузерные помощники тестировщика Autofill
  33. 33. Киев 2016 Примеры Браузерные помощники тестировщика Web Developer Form Filler
  34. 34. Киев 2016 Примеры Браузерные помощники тестировщика Bug magnet
  35. 35. Киев 2016 Размер Браузерные помощники тестировщика
  36. 36. Киев 2016 Размер и шрифты Браузерные помощники тестировщика Page Ruler (Chrome) MeasureIt (Chrome | Firefox) Fontface Ninja (Chrome | Firefox) WhatFont (Chrome) Font Finder (Firefox) PerfectPixel (all browsers)
  37. 37. Киев 2016 Примеры Браузерные помощники тестировщика Page Ruler
  38. 38. Киев 2016 Примеры Браузерные помощники тестировщика WhatFont
  39. 39. Киев 2016 Примеры Браузерные помощники тестировщика Fontface Ninja
  40. 40. Киев 2016 Примеры Браузерные помощники тестировщика
  41. 41. Киев 2016 Разрешение экрана Браузерные помощники тестировщика
  42. 42. Киев 2016 Разрешение экрана Viewport Resizer (Chrome) Resolution Test (Chrome) Window Resizer (Chrome) User Agent Switcher (Chrome | Firefox) Браузерные помощники тестировщика
  43. 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. 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 – запись видео, указатель мыши, рисование на лету, сохранение на гугл драйв или ютюб
  • Размер иммеет значение особенно при описнии багов
  • ×