View
886
Download
7
Category
Preview:
DESCRIPTION
Светлана Мамаева - доклад на SQA Days, 2-3 декабря 2011, Москва
Citation preview
Использование Встроенных или Подключаемых Средств Браузеров для
Тестирования 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
Recommended