Использование Встроенных или Подключаемых Средств Браузеров для

Тестирования Web Приложений

Светлана Мамаева. EMC

Основные понятия

AJAX/XHR запросы

DOM модель

CSS

Особенности современных Web приложений

Сложные Java Scripts (JQuery, etc)Большое количество кодаМногочисленные AJAX запросыСложная структура DOMНеобходимость поддержки нескольких браузеров

Классы браузеров

Mozilla Firefox и производныеInternet ExplorerСемейство WebKit (Safari, Chrome и прочие, включая мобильные)Opera

Распределение браузеров в сети

37%

25%

8%3%7%

20%

Internet ExplorerFirefoxSafariOperaМобильные браузерыДругие

Источник: WikiPedia

Как тестировать такие приложения?

Использование встроенных средств браузеровИспользование дополнительных модулей

(plug-ins)Использование сторонних программ

Основные цели использования инструментов

Найти причину задержки загрузки сайтаНайти причину медленной работы сайтаНайти причину различий в дизайне сайта под разными браузерамиУстановить причину ошибок работы сайтаУстановить суммарный объем загружаемых данных сайта

Основные средства

Контроль ошибок - работа с отладчикомКонтроль ресурсовПрофилированиеАудит страницВалидация HTML

Сравнение возможностей современных браузеров

(комплект после установки)

Browser

Возможности

Internet Explorer 8.0

Opera

WebKit browsers

FireFox

Ко

нсол

ьош

ибок

Отлад

чик

Статистика

ресурсов

Про

смотр

DO

M

мод

ели

Про

фил

иро

вани

е

Ауди

т

Вал

идац

ия

Локал

ьные

ресурсы

Браузер Firefox исторически имеет все основные инструменты в виде подключаемых модулей

Сравнение возможностей современных браузеров

(c установленными plug-ins)

Browser

Возможности

Internet Explorer 8.0

Opera

WebKit browsers

FireFox

Ко

нсол

ьош

ибок

Отлад

чик

Статистика

ресурсов

Про

смотр

DO

M

мод

ели

Про

фил

иро

вани

е

Ауди

т

Вал

идац

ия

Локал

ьные

ресурсы

Основные средства

Контроль ошибок - работа с отладчиком

Консоль ошибокКонсоль ошибок

Точка останова

Точка останова

Стек и Стек и переменныепеременные

Консоль ошибок и отладчик

Основные средства

Контроль ресурсов

Статистика запросов

Общее время

запроса Время ожиданияответа

Времяответа

Ресурсы страницРесурсы страницЛокальные ресурсыЛокальные ресурсы

Базы данных Базы данных

Сводка ресурсов

DOM элементы, редактор CSSDOM элементы, редактор CSS

DOM viewer

Основные средства

Профилирование

Профилирование

Профилирование-2

Основные средства

Аудит страниц

Аудит

Основные средства

Валидация страниц

Валидация

FireBug (Firefox)

● CodeBurner

● CSS Usage

● Firecookie

● Firefinder

● FireQuery

● FireRainbow

● Flashbug

● YSlow

• Developer tools (Safari)

• Developer tools (IE)

• Venkman (Firefox)

Рекомендуемые инструменты

Пример

Дано: разработанное нами web приложение.

Полученные жалобы от заказчика:

● На титульной странице сбита разметка

● Вход в систему занимает длительное время

● Страница “Заказы” не реагирует ни на какие кнопки

● Страница “Контроль” никогда не завершает загрузку

● Страница “Отчет” отображается крайне медленно

● Текст на странице “Документы” слишком большого размера

● Клиент просит проверить, не хранятся ли какие-либо приватные данные в открытом виде

Начальные данные

Инженер по качеству должен провести начальный анализ проблем и передать

результаты программистам web приложения

Задача

Сбита разметка страницы

При анализе, ресурсов, выяснилось что

, изображение необходимое для

, разметки страницы не найдено.

Долгая обработка запросов

При анализе, ресурсов, выяснилось что

время ответа сервера составляет

10 . секунд Проблема - на

серверной стороне.

Нажатия на кнопки не работают

При запускеотладчика, в

консоли были обнаружены

.фатальные ошибки

Страница не завершает загрузку

Обнаружены постоянные

длительные XHR , запросы которые в

определенный момент времени приводят к ошибке

. на сервере

Медленное отображение

ИнтерпретаторJavaScript постоянно

. работал Отрисовка также занимала

. чрезмерное время . Требуется доп

исследование DOM модели

, Выявлено что потребление

памяти на страницу 20около Mb.

Необходимо сравнить эту цифру

с другими.страницами

Неверный стиль элементов

При помощи « » инструмента лупа

был найден файлCSS . элемента

Размер шрифта явно больше чем

.ожидаемого

Локальные данные

В Cookie Credentials записана пара

« - пользователь». пароль Это

. небезопасно

Вопросы

Основные средства в браузере FireFox (Firebug)

Консоль ошибок

Отладчик

Просмотр DOM модели

Статистика ресурсов

Заголовки HTTP