Download - Использование встроенных или подключаемых средств браузеров для тестирования web приложений
![Page 1: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/1.jpg)
Использование Встроенных или Подключаемых Средств Браузеров для
Тестирования Web Приложений
Светлана Мамаева. EMC
![Page 2: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/2.jpg)
Основные понятия
AJAX/XHR запросы
DOM модель
CSS
![Page 3: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/3.jpg)
Особенности современных Web приложений
Сложные Java Scripts (JQuery, etc)Большое количество кодаМногочисленные AJAX запросыСложная структура DOMНеобходимость поддержки нескольких браузеров
![Page 4: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/4.jpg)
Классы браузеров
Mozilla Firefox и производныеInternet ExplorerСемейство WebKit (Safari, Chrome и прочие, включая мобильные)Opera
![Page 5: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/5.jpg)
Распределение браузеров в сети
37%
25%
8%3%7%
20%
Internet ExplorerFirefoxSafariOperaМобильные браузерыДругие
Источник: WikiPedia
![Page 6: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/6.jpg)
Как тестировать такие приложения?
Использование встроенных средств браузеровИспользование дополнительных модулей
(plug-ins)Использование сторонних программ
![Page 7: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/7.jpg)
Основные цели использования инструментов
Найти причину задержки загрузки сайтаНайти причину медленной работы сайтаНайти причину различий в дизайне сайта под разными браузерамиУстановить причину ошибок работы сайтаУстановить суммарный объем загружаемых данных сайта
![Page 8: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/8.jpg)
Основные средства
Контроль ошибок - работа с отладчикомКонтроль ресурсовПрофилированиеАудит страницВалидация HTML
![Page 9: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/9.jpg)
Сравнение возможностей современных браузеров
(комплект после установки)
Browser
Возможности
Internet Explorer 8.0
Opera
WebKit browsers
FireFox
Ко
нсол
ьош
ибок
Отлад
чик
Статистика
ресурсов
Про
смотр
DO
M
мод
ели
Про
фил
иро
вани
е
Ауди
т
Вал
идац
ия
Локал
ьные
ресурсы
Браузер Firefox исторически имеет все основные инструменты в виде подключаемых модулей
![Page 10: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/10.jpg)
Сравнение возможностей современных браузеров
(c установленными plug-ins)
Browser
Возможности
Internet Explorer 8.0
Opera
WebKit browsers
FireFox
Ко
нсол
ьош
ибок
Отлад
чик
Статистика
ресурсов
Про
смотр
DO
M
мод
ели
Про
фил
иро
вани
е
Ауди
т
Вал
идац
ия
Локал
ьные
ресурсы
![Page 11: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/11.jpg)
Основные средства
Контроль ошибок - работа с отладчиком
![Page 12: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/12.jpg)
Консоль ошибокКонсоль ошибок
Точка останова
Точка останова
Стек и Стек и переменныепеременные
Консоль ошибок и отладчик
![Page 13: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/13.jpg)
Основные средства
Контроль ресурсов
![Page 14: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/14.jpg)
Статистика запросов
Общее время
запроса Время ожиданияответа
Времяответа
![Page 15: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/15.jpg)
Ресурсы страницРесурсы страницЛокальные ресурсыЛокальные ресурсы
Базы данных Базы данных
Сводка ресурсов
![Page 16: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/16.jpg)
DOM элементы, редактор CSSDOM элементы, редактор CSS
DOM viewer
![Page 17: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/17.jpg)
Основные средства
Профилирование
![Page 18: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/18.jpg)
Профилирование
![Page 19: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/19.jpg)
Профилирование-2
![Page 20: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/20.jpg)
Основные средства
Аудит страниц
![Page 21: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/21.jpg)
Аудит
![Page 22: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/22.jpg)
Основные средства
Валидация страниц
![Page 23: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/23.jpg)
Валидация
![Page 24: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/24.jpg)
FireBug (Firefox)
● CodeBurner
● CSS Usage
● Firecookie
● Firefinder
● FireQuery
● FireRainbow
● Flashbug
● YSlow
• Developer tools (Safari)
• Developer tools (IE)
• Venkman (Firefox)
Рекомендуемые инструменты
![Page 25: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/25.jpg)
Пример
![Page 26: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/26.jpg)
Дано: разработанное нами web приложение.
Полученные жалобы от заказчика:
● На титульной странице сбита разметка
● Вход в систему занимает длительное время
● Страница “Заказы” не реагирует ни на какие кнопки
● Страница “Контроль” никогда не завершает загрузку
● Страница “Отчет” отображается крайне медленно
● Текст на странице “Документы” слишком большого размера
● Клиент просит проверить, не хранятся ли какие-либо приватные данные в открытом виде
Начальные данные
![Page 27: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/27.jpg)
Инженер по качеству должен провести начальный анализ проблем и передать
результаты программистам web приложения
Задача
![Page 28: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/28.jpg)
Сбита разметка страницы
При анализе, ресурсов, выяснилось что
, изображение необходимое для
, разметки страницы не найдено.
![Page 29: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/29.jpg)
Долгая обработка запросов
При анализе, ресурсов, выяснилось что
время ответа сервера составляет
10 . секунд Проблема - на
серверной стороне.
![Page 30: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/30.jpg)
Нажатия на кнопки не работают
При запускеотладчика, в
консоли были обнаружены
.фатальные ошибки
![Page 31: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/31.jpg)
Страница не завершает загрузку
Обнаружены постоянные
длительные XHR , запросы которые в
определенный момент времени приводят к ошибке
. на сервере
![Page 32: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/32.jpg)
Медленное отображение
ИнтерпретаторJavaScript постоянно
. работал Отрисовка также занимала
. чрезмерное время . Требуется доп
исследование DOM модели
, Выявлено что потребление
памяти на страницу 20около Mb.
Необходимо сравнить эту цифру
с другими.страницами
![Page 33: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/33.jpg)
Неверный стиль элементов
При помощи « » инструмента лупа
был найден файлCSS . элемента
Размер шрифта явно больше чем
.ожидаемого
![Page 34: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/34.jpg)
Локальные данные
В Cookie Credentials записана пара
« - пользователь». пароль Это
. небезопасно
![Page 35: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/35.jpg)
Вопросы
![Page 36: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/36.jpg)
Основные средства в браузере FireFox (Firebug)
![Page 37: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/37.jpg)
Консоль ошибок
![Page 38: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/38.jpg)
Отладчик
![Page 39: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/39.jpg)
Просмотр DOM модели
![Page 40: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/40.jpg)
Статистика ресурсов
![Page 41: Использование встроенных или подключаемых средств браузеров для тестирования web приложений](https://reader034.vdocuments.net/reader034/viewer/2022042715/559706341a28ab33208b457a/html5/thumbnails/41.jpg)
Заголовки HTTP