Использование встроенных или подключаемых средств браузеров для тестирования web приложений
•Als PPT, PDF herunterladen•
0 gefällt mir•749 views
Светлана Мамаева - доклад на SQA Days, 2-3 декабря 2011, Москва
![И спользование Встроенных или Подключаемых Средств Браузеров для Тестирования Web Приложений ,[object Object]](https://image.slidesharecdn.com/sqa10svetlanamamaeva-111208200607-phpapp01/85/web-1-320.jpg)
![Основные понятия ,[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (9)
Ähnlich wie Использование встроенных или подключаемых средств браузеров для тестирования web приложений
Ähnlich wie Использование встроенных или подключаемых средств браузеров для тестирования web приложений (20)
Mehr von SQALab
Mehr von SQALab (20)
Использование встроенных или подключаемых средств браузеров для тестирования web приложений
- 5. Распределение браузеров в сети Источник: WikiPedia
- 9. Сравнение возможностей современных браузеров (комплект после установки) Консоль ошибок Отладчик Статистика ресурсов Просмотр DOM модели Профилирование Аудит Валидация Локальные ресурсы Браузер Firefox исторически имеет все основные инструменты в виде подключаемых модулей Browser Возможности Internet Explorer 8.0 Opera WebKit browsers FireFox
- 10. Сравнение возможностей современных браузеров ( c установленными plug-ins ) Консоль ошибок Отладчик Статистика ресурсов Просмотр DOM модели Профилирование Аудит Валидация Локальные ресурсы Browser Возможности Internet Explorer 8.0 Opera WebKit browsers FireFox
- 12. Консоль ошибок и отладчик Консоль ошибок Точка останова Стек и переменные
- 14. Статистика запросов Общее время запроса Время ожидания ответа Время ответа
- 15. Сводка ресурсов Ресурсы страниц Локальные ресурсы Базы данных
- 16. DOM viewer DOM элементы, редактор CSS
- 18. Профилирование
- 19. Профилирование-2
- 21. Аудит
- 23. Валидация
- 25. Пример
- 28. Сбита разметка страницы При анализе ресурсов, выяснилось, что изображение, необходимое для разметки страницы, не найдено .
- 29. Долгая обработка запросов При анализе ресурсов, выяснилось, что время ответа сервера составляет 10 секунд. Проблема - на серверной стороне .
- 30. Нажатия на кнопки не работают При запуске отладчика , в консоли были обнаружены фатальные ошибки.
- 31. Страница не завершает загрузку Обнаружены постоянные длительные XHR запросы, которые в определенный момент времени приводят к ошибке на сервере.
- 32. Медленное отображение Интерпретатор JavaScript постоянно работал. Отрисовка также занимала чрезмерное время. Требуется доп. исследование DOM модели Выявлено, что потребление памяти на страницу около 20 Mb. Необходимо сравнить эту цифру с другими страницами.
- 33. Неверный стиль элементов При помощи инструмента «лупа» был найден файл CSS элемента. Размер шрифта явно больше чем ожидаемого.
- 34. Локальные данные В Cookie Credentials записана пара «пользователь- пароль». Это небезопасно.
- 35. Вопросы
- 36. Основные средства в браузере FireFox (Firebug)
- 37. Консоль ошибок
- 38. Отладчик
- 39. Просмотр DOM модели
- 41. Заголовки HTTP
Hinweis der Redaktion
- Проблема тестирования Web приложений актуальна, практически, для всех современных многомодульных и многофункциональных программных комплексов. Учитывая, что подавляющее большинство современных программ, включает в себя Web компоненты, встает задача изучения средств, позволяющих не только тестировать HTML / Java Script код в различных браузерах, но и измерять многочисленные дополнительные параметры, влияющие на восприятие пользователя при работе с системой. Современный инженер по качеству или специалист поддержки просто обязан иметь у себя в активе ряд специализированных инструментов и средств для параметрической оценки производительности, скорости отклика и т.д. распределенной системы. На практике мы имеем довольно обширный инструментарий, который невозможно реализовать при помощи единственного браузера или модуля, расширяющего его возможности.
- AJAX / XHR запросы – web 2.0 технология, которая позволяет после загрузки страницы путем использования Java скриптов организовывать дополнительные запросы к серверу без перезагрузки (!) страницы. Чаще всего, такие скрипты добавляют или заменяют часть текущей страницы. DOM (Document Object Module ) – система вложенных сущностей, с помощью которой можно представить весь HTML документ. С понятием DOM модели связано понятие CSS (Cascading Style Sheet ) – каскадная таблица стилей, указывает (отделяет) стили элементов от самих элементов. CSS загружается браузером отдельно и прикладывается к элементам страницы, CSS описывает форматирование элементов страницы. По сути, способ описания элементов, «текст», сформированный по определенным правилам. Обрабатывается непосредственно самим браузером. Пример: «Все текстовые поля содержат шрифт 30»
- 1) Сложные Java скрипты – скрипты, которые завязаны друг на друге, содержат компрессию, обфускацию и т.д. Обфускация - приведение исходного текста или исполняемого кода программы к виду, сохраняющему ее функциональность, но затрудняющему анализ, понимание алгоритмов работы и модификацию при декомпиляции . Это приводит к уменьшению размеров файлов. 2) Большое количество кода – скрипты, HTML разметка 3) Многочисленные AJAX запросы 4) Сложная структура модели DOM 5) К сожалению, в современном мире степень поддержки браузерами стандартов w3c сильно разнятся. Поэтому возникает необходимость поддержки нескольких браузеров.
- 1) Firefox и производные (движок Ge cko) – прародитель N et scape Navigator 2) IE – пр а родитель программы Mosaic 3) WebKit (представители Safari , Chrome и прочие, включая некоторые мобильные) – прародитель KHTML 4) Семейство браузеров Opera В докладе мы не рассматриваем мобильные браузеры, не входящие в семейство WebKit, т.к. они почти не содержат интересующие нас средства. W3C ( World Wide Web Consortium ) разрабатывает для Интернета единые принципы и стандарты (называемые «рекомендациями», англ. W 3 C Recommendations ), которые затем внедряются производителями программ и оборудования. Таким образом достигается совместимость между программными продуктами и аппаратурой различных компаний, что делает Всемирную сеть более совершенной, универсальной и удобной. (википедия) 1) Internet Explorer критикуют за недостаточную поддержку веб-стандартов, устанавливаемых W3C . Это означает, что браузер отображает не то, что должен отобразить согласно стандарту W3C и поэтому может создавать проблемы веб-мастерам. В частности, в браузере сравнительно поздно появилась встроенная поддержка SVG , он имеет недостатки в обработке CSS (википедия) SVG ( Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики 2) При разработке Firefox особое внимание уделялось поддержке стандартов W3C . (википедия) 3) WibKit на данный момент осуществляет наиболее полную поддержку HTML в соответствии с рекомендациями W3C . (википедия) 4) Браузер Opera не только часто не соответствует стандартам, но и иногда не оправдывает заявленную поддержку тех или иных стандартов. Например, Opera обещала поддерживать W 3 C DOM I , но, по признанию разработчиков, у нее еще "не дошли руки", а поддерживать Netscape DOM или Microsoft DOM она (компания) не собирается) ( http://www.myopera.net/descraibe.htm )
- 1) Найти причину задержки в загрузке сайта. Изучить, на чьей стороне проблема – на серверной или клиентской (на стороне клиента и сервера: средства статистики запросов, на стороне клиента: средства профилирования). 2) Найти причину медленной работы сайта. Задержки могут быть связаны с: - задержками ответа сервера (средства статистики запросов); - c ложностью модели DOM ( DOM Viewer , средства профилирования и аудита); - сложностью java scripts (отладчик, средства профилирования, косвенно – средства сводки ресурсов (размер java scripts)); - излишними AJAX запросами (отладчик, средства сводки ресурсов); - излишними элементами стилей (средства аудита); - неиспользуемым java script кодом (средства аудита); - неиспользуемыми секциями HTML (средства аудита). 3) Найти ответ на вопрос, почему сайт выглядит по-разному под разными браузерами. Для этого используются средства валидатора и аудита (частично - DOM Viewer , средства аудита; средства валидации). 4) Найти причину того, что web приложение работает с ошибками (отображает ошибки при загрузке, выполнении скриптов и т.д.). Для этого используются средства консоли и отладчика (отладчик и консоль ошибок). 5) Определить суммарный объем всех данных загружаемой страницы и распределение ресурсов внутри страницы (средства статистики запросов и аудита).
- 1) Отладчик – компонент браузера, который является дополнительной или встроенной программой браузера. В нем отображается исходный код java скрипта и контролируется его выполнение. Отладчик: - позволяет контролировать и анализировать критические ошибки java скрипта; - точно указывает место ошибки; - может выполнять java скрипт по шагам; - контролирует содержимое переменных 2) Контроль ресурсов – включает в себя: - проверку того, что браузер загрузил все ресурсы успешно; - контроль общего размера загруженных ресурсов; - контроль времени, необходимого для загрузки этих ресурсов и порядка загрузки ресурсов 3) Профилирование – процесс сбора данных из работающей программы с целью выяснения чаще всего используемых событий и для выявления тех событий, которые длятся максимального долго. Задержки в работе современных web приложений могут возникать из-за скриптов и из-за сложной модели DOM. 4) Аудит страниц – включает в себя запуск процесса аудита для выяснения размера куков, размеров изображений, порядка стилей и скриптов, неиспользуемых правил CSS и т.д. с целью оптимизации страницы. 5) Валидация HTML - проверка HTML кода страницы на соответствие мировым стандартам. Это нужно для того, чтобы HTML код страницы корректно отображался в разных браузерах.
- Консоль ошибок и отладчик в современных браузерах могут быть внедрены, как непосредственно в страницу (под страницей открывается дополнительная область, где пишутся ошибки и идет отладка), так и, что более удобно, могут быть выполнены в виде отдельного окна.
- Консоль ошибок является основным инструментом для поверхностной проверки web приложения на наличие критических ошибок. Современные браузеры также позволяют выполнять в консоли java scripts. Сообщения об ошибках могут быть отфильтрованы по классам : ! Клик – подсвечивается элемент критические ошибки ( errors ), предупреждения (warnings) и информационные сообщения ( information ). При тестировании QA инженер должен их различать. Отладчик непосредственно не является инструментом QA инженера, однако, ему необходимо им пользоваться в минимальном объеме для исследования ошибок. Основными инструментами отладчика для QA инженера являются: ! Клик – подсвечивается элемент - глобальный переключатель switch on / switch off отладки (на слайде – элемент ); ! Клик – подсвечивается элемент - разнообразные модификаторы останова программы при наличии в ней ошибки (на слайде – элемент ). В последнее время необходимость приобрела функция “ pretty print ” (на слайде – элемент ). ! Клик – подсвечивается элемент Это связано с тем, что java script при компрессии сжимается в одну строку без пробелов и форматирования. Отлаживать такие строки и находить ошибки практически невозможно. Поэтому, предлагается использовать функцию “ pretty print ”, которая автоматически расставляет пробелы и форматирует текст, что облегчает возможность анализа кода для QA инженеров. При запросе разработчика потенциально ему может потребоваться содержимое стэков и переменных. Такая возможность есть в отладчике программы. Большинство отладчиков показывает эти данные на передней панели. Если нужно, пояснить: Стэк вызовов – цепочка вызванных функций. Например: Функция A вызывает функцию B, функция B вызывает функцию C. Тогда стэк вызовов: ABC Точка останова (если спросят) – строка, которая задается пользователем. В этой строке останавливается программа для дальнейшего её анализа. Обычно строки останова передаются разаботчиками.
- Почти все современные браузеры позволяют показывать статистику запроса http страницы. В статистику входят полный цикл запроса страницы от основной страницы до последнего ресурса. Средство визуализации web inspector позволяет отображать оценки производительности сайтов: ! Клик – подсвечивается элемент - размер переданных данных (на слайде – колонка Size); ! Клик – подсвечивается элемент - задержку web сервера между посылкой запроса и полученным ответом (на слайде – колонка Time / Latency ) На слайде изображается, так называемая, временная шкала с отметками. При помощи шкалы можно быстро оценить время изначального отображения сайта (синяя вертикальная черта), и момент, когда сайт был полностью загружен (красная вертикальная черта). В нижней части окна расположены управляющие элементы (Documents, StyleSheets и т.д.), ! Клик – подсвечивается элемент которые позволяют отсортировать загруженные ресурсы по их типу (документы, CSS и т.д.). Рядом с каждым ресурсом, который кодируется цветом, приведена диаграмма загрузки и задержки, которая показывает: ! Клик – появляется укрепненная диаграмма загрузки - в какой момент временной отметки запрос начался; - когда был получен ответ на запрос; - сколько этот запрос занял времени. При двойном щелчке на имя ресурса (на слайде – колонка Name Path ) открывается окно, ! Клик – открывается информация о запросе в котором отображается информация о запросе (заголовок запроса и заголовок ответа).
- Страница сводки ресурса позволяет быстро оценить, какие ресурсы приложение оставило на локальной машине пользователя. Это нужно для того, чтобы помочь инженерам по безопасности оценить, какие параметры сессии, cookies, БД и пр. были задействованы при работе приложения. Кроме того, QA инженер может специализированно менять их с целью выявления ошибок в приложении.
- Современные средства мониторинга DOM-модели позволяют просматривать DOM-модель в виде списка/дерева (на слайде – левая часть окна), смотреть значения, стили и атрибуты любого тэга (на слайде – правая часть окна). Также достаточно популярен элемент «лупа» (на слайде – элемент ), ! Клик – подсвечивается элемент который нужен для того, чтобы в сложных структурах сайта определить измеряемые параметры. Элемент также нужен для навигации по странице сайта. «Лупа» работает следующим образом: выбираем этот элемент, ходим по сайту, в окне DOM V iewer отображаются элементы DOM модели, соответствующие элементам сайта. При этом, элементы в DOM модели подсвечиваются. Средства web inspector , firebug , opera и т.д. позволяют не только просматривать DOM модель, но и интерактивно её редактировать.
- Профилированием называется процесс сбора информации о потребляемых ресурсах во время выполнения скриптов сайта с последующим анализом и выявлением «узких мест». Интерпретирует данные поверхностно – QA, глубоко – разработчик.
- В средствах семейства WebKit за профилирование отвечают закладки Profiles и Timeline. Закладка Profiles : Пользователь должен включить процесс профилирования, поработать с сайтом, выполнить различные функции и остановить процесс. В результате получаем статистику, в которой указывается: ! Клик – подсвечивается элемент - сколько раз была вызвана та или иная функция (на слайде – колонка C all s ); ! Клик – подсвечивается элемент - сколько времени от общего количества было потрачено на выполнение функции (на слайде – колонка Self от колонки Total). Напротив каждой функции можно увидеть стэк вызовов и точку (строку), из которой она была вызвана.
- Закладка Timeline : Информация собирается таким же образом, как в закладке Profiles . При этом собирается информация не только о загрузке ЦПУ, но и информация о потребляемой памяти (на слайде – секция Memory ), событиях, которые произошли в момент работы с программой (на слайде – левая часть окна: Paint , Sent Request и т.д.). При этом, затраченные ресурсы представлены графически, в закладку встроена консоль ошибок (на слайде количество ошибок представлено в нижнем правом углу). Различным цветом выделены: ! Клик – подсвечивается элемент - события загрузки (на слайде – синие полоски ), ! Клик – подсвечивается элемент - работы интерпретатора языка java script (на слайде – оранжевая полоски ), ! Клик – подсвечивается элемент - время, затраченное на отрисовку HTML страницы (на слайде – сиреневые полоски ). Потребляемая память отображается также графически. ! Клик – появляется укрепненная диаграмма загрузки памяти
- Служба аудитов позволяет при загрузке страницы анализировать все элементы и давать практические рекомендации по улучшению производительности данного web приложения.
- Все рекомендации делятся по критичности (на слайде : красные - более критичные, оранжевые - менее критичные), применению к ресурсам (на слайде перечислены ресурсы, к которым их нужно применить) и приоритету (на слайде – сначала расположены более приоритетные, потом – менее, сверху вниз). Типичными результатами аудита являются рекомендации по: - склеиванию файлов java scripts; - включению компрессии; - корректному кэшированию р езультатов; - минимизации размеров куков; - специфическим HTML улучшениям (например, в какой-то строке кода не указан размер картинки); - оптимизации порядка стилей и скриптов; - расположению CSS; - статистике по неиспользуемым CSS ; - статистике по некорректному HTML коду.
- Средство из Validator Firefiox (plug-in)
- Валидатор HTML осуществляет: - проверку HTML кода страницы на валидность (верхняя часть окна), ! Клик – подсвечивается элемент - вывод количества ошибок, подсветку строк с ошибками, ! Клик – подсвечивается элемент - дает пояснения и рекомендации к их устранению. При этом Html Validator использует оба алгоритма HTML Tidy и SGML Parser , которые созданы W 3 C для проверки валидности страниц. Результат проверки отображается в строке состояния, в ее правом нижнем углу в виде небольшой картинки. ! Клик – подсвечивается элемент Кружок с галочкой показывает, что документ валидный, желтый треугольник с восклицательным знаком — по коду имеются замечания, которые могут быть исправлены автоматически. А красный кружок с крестиком предупреждает, что есть серьезные ошибки.
- Firebug — расширение для браузера Firefox , являющееся консолью , отладчиком , и DOM -инспектором JavaScript , DHTML , CSS , XMLHttpRequest . Firebug показывает в консоли вызвавшую ошибку функцию, стек вызовов функций, вызвавших эту ошибку. Он предупреждает, что CSS-правило или JavaScript-метод/свойство, которое вы пытаетесь использовать, не существует. (википедия) Так как он модульный, то для него разработано еще несколько plug-ins, приведенные ниже. Developer Tools ( Safari ) – рассматривали в докладе Developer Tools ( IE ) - является компонентом Internet Explorer, который участвует в разработке и отладке веб-страниц. Компонент был введен как панель инструментов для Internet Explorer 6 и Internet Explorer 7. В Internet Explorer 8 и Internet Explorer 9 эта панель уже встроена . Компонент позволяет проводить проверку CSS, HTML, предварительно просматривать макет страницы при различных разрешениях, а также предлагает правила размещения элементов на странице. Venkman (Firefox) - является и графическим и консольным отладчиком. Содержит функции управления остановом, просмотра стек вызовов и т.д. Консоль также поддерживает интерактивное выполнение произвольного кода JavaScript.
- ! Клик – подсвечивается элемент (в нижнем правом углу) Элемент для быстрой активации/деактивации функций Firebug -а находится в правом нижнем углу ! Клик – подсвечивается элемент (выпадающие списки Console, HTML , CSS , Script , DOM , Net ) У Figebug-а есть следующие управляющие закладки (режимы Figebug-а): режим консоли ( Console ), HTML , CSS и т.д. ! Клик – подсвечивается элемент (в верхнем левом углу) В левом верхнем углу находится основное управляющее меню, в котором можно настроить опции Figebug-а (например, профилирование)
- ! Клик – подсвечивается элемент (закладка Scripts ) Отладчик расположен на закладке Scripts ! Клик – подсвечивается элемент (панель инструментов в виде различных стрелок) Панель инструментов в виде различных стрелок позволяет выполнять основные функции отладки (запустить отладку, остановить, выполнить отладку по шагам и т.д.) ! Клик – подсвечивается элемент (закладки Watch, Stack, Breakpoint ) В отличие от инструмента Development Tools ( S afari) у инструмента Firebug нет возможности смотреть все данные сразу. Данные разнесены на три закладки: контроль значений переменных (Watch), стек функций ( Stack ), точки останова ( Breakpoint ).
- ! Клик – подсвечивается элемент (закладка HTML) Просмоторщик DOM модели находится на закладке HTML ! Клик – подсвечивается элемент (элемент в верхнем левом углу) Он также содержит элемент «лупа», который находится в левом нижнем углу ! Клик – подсвечивается элемент (выпадающие списки Style , Computed , Layout , DOM ) Просмоторщик позволяет анализировать различные аспекты DOM модели: стили ( Style ), эффективные стили ( Computed ), расположение элементов ( Layout ), DOM (пояснить)
- ! Клик – подсвечивается элемент (закладка Net ) Инструмент анализа статистики ресурсов находится на закладке Net. ! Клик – подсвечивается элемент (нижняя часть окна: список ошибок) При анализе статистики и загрузке ресурсов возникающие ошибки отображаются в нижней части окна. ! Клик – подсвечивается элемент (список пояснений к временным диаграммам) Временные диаграммы (аналогичные временным диаграммам Safari).
- ! Клик – подсвечивается элемент (закладки Headers, Response , Cache ) При клике на ресурс открываются заголовки http запроса, которые содержат информацию о самих заголовках ( H eaders), об ответе ( Response ), кэшировании запроса ( Cache ). ! Клик – подсвечивается элемент (секция Request Headers ) Ответ отображается следующим образом.