Что пишут в блогах

Подписаться

Онлайн-тренинги

Очные тренинги

Конференции

Что пишут в блогах (EN)

Разделы портала

Про инструменты

Лучшие вакансии

.
Светлана Мамаева: Встроенные и подключаемые средства браузеров для тестирования веб-приложений
18.11.2011 13:29

Продолжаем публикацию статей-анонсов предстоящей конференции SQA Days 10, которая будет проходить в Москве 2-3 декабря. Сегодня у нас на повестке дня рассказ Светланы Мамаевой, который будет интересен специалистам по тестированию веб-приложений -- обзор встроенных и подключаемых средств для различных браузеров, предназначенных для контроля качества ваших веб-приложений.

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

Можно выделить следующие наиболее важные средства отладки и тестирования web приложений и дать их краткую характеристику:

  1. Консоль ошибок и отладчик
    Отладчик – компонент браузера, который является дополнительной или встроенной программой браузера. В нем отображается исходный код javascript и контролируется его выполнение.
    Отладчик:
    • позволяет контролировать и анализировать критические ошибки javascript;
    • точно указывает место ошибки;
    • может выполнять javascript по шагам;
    • контролирует содержимое переменных.
  2. Статистика ресурсов – включает в себя:
    • проверку успешности загрузки ресурсов страницы браузером;
    • контроль общего размера загруженных ресурсов;
    • контроль времени, необходимого для загрузки этих ресурсов и порядка загрузки ресурсов.
  3. Средства просмотра DOM модели – позволяют просматривать DOM-модель в виде списка/дерева, а также анализировать значения, стили и атрибуты любого тэга.
  4. Профилирование – процесс сбора данных из работающей программы с целью выяснения наиболее медленно работающих частей кода. Задержки в работе современных web приложений могут возникать из-за скриптов и из-за сложной модели DOM.
  5. Аудит страниц – включает в себя запуск процесса аудита для выяснения размера cookies, размеров изображений, порядка стилей и скриптов, неиспользуемых правил CSS и т.д. с целью оптимизации страницы.
  6. Валидация HTML - проверка HTML кода страницы на соответствие мировым стандартам w3c. Это нужно для того, чтобы HTML код страницы корректно отображался в разных браузерах.
  7. Мониторинг локальных ресурсов - контроль cookies, локальных БД, размещения данных в кэше браузера.

Перечислим те задачи, которые решают предложенные средства:

  1. Находят причину задержки в загрузке сайта. Изучить, на чьей стороне проблема – на серверной или клиентской.
  2. Находят причину медленной работы сайта. Задержки могут быть связаны со следующими факторами:
    • задержки ответа сервера;
    • сложность модели DOM;
    • сложность javascript;
    • излишние AJAX запросы;
    • излишние элементы стилей;
    • неиспользуемый javascript код;
    • неиспользуемые секции HTML.
  3. Находят причину отличий в дизайне сайта под разными браузерами.
  4. Находят причину того, что web приложение работает с ошибками (отображение ошибок при загрузке, ошибки выполнения скриптов и т.д.).
  5. Определяют суммарный объем всех данных загружаемой страницы и распределение ресурсов внутри страницы.

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

  1. Firefox и производные (движок Gecko)
  2. Internet Explorer и производные
  3. WebKit-based (представители Safari, Chrome и прочие, включая некоторые мобильные)
  4. Семейство браузеров Opera

В докладе мы не рассматриваем мобильные браузеры, не входящие в семейство WebKit, т.к. они почти не содержат интересующие нас средства.

Приведем таблицу сравнение возможностей современных браузеров:

Browser/Возможности Консоль ошибок Отладчик Статистика ресурсов Средства просмотра DOM модели Профилирование Аудит Валидация Мониторинг локальных ресурсов
Internet Explorer + + - + + - + -
Opera + + + + - - - +
WebKit browsers + + + + + + - +
Mozilla Firefox + + + + + + + +

Наиболее богатым набором средств обладает браузер Mozilla Firefox и браузеры семейства WebKit. В браузеры WebKit (Safari, Chrome и т.д.) средства отладки и тестирования web приложений являются встроенными, тогда как в браузере Mozilla Firefox средства являются подключаемыми (plug-ins).

В браузерах Internet Explorer и Opera набор средств более беден. В Internet Explorer отсутствуют средства сбора статистики ресурсов и аудита, а в браузере Opera нет средств аудита, валидации и профилирования страниц.

Приведем список рекомендуемых профессионалами средств для решения задач, сформулированных выше.

  • FireBug (Mozilla Firefox)
  • CodeBurner
  • CSS Usage
  • Firecookie
  • Firefinder
  • FireQuery
  • FireRainbow
  • Flashbug
  • YSlow
  • Developer tools (Safari)
  • Developer tools (Internet Explorer)
  • Venkman (Mozilla Firefox)

FireBug - расширение для браузера Firefox, являющееся консолью, отладчиком, и DOM-инспектором JavaScript, DHTML, CSS, XMLHttpRequest. Firebug показывает в консоли вызвавшую ошибку функцию, стек вызовов функций, породивший эту ошибку. Он предупреждает, что CSS-правило или JavaScript-метод/свойство, которое вы пытаетесь использовать, не существует. Так как FireBug является модульным, то для него разработано еще несколько plug-ins. Рассмотрим некоторые из них.

  1. CodeBurner – основные функции расширения сосредоточены вокруг панели Reference, которая содержит инструменты просмотра HTML элементов, атрибутов и CSS свойств.
  2. CSS Usage – предоставляет возможности просмотра правил CSS и информацию о том, какие из них действительно используются на сайте, а какие нет.
  3. Firecookie – позволяет просматривать, управлять и отслеживать cookies в браузере.
  4. Firefinder – помогает найти HTML-элементы, соответствующие выбранным CSS селекторам или XPath выражениям.
  5. FireQuery – ряд улучшений, связанных с jQuery.
  6. FireRainbow – добавляет подсветку синтаксиса к Java Script коду.
  7. Flashbug – расширения для flash-a
  8. YSlow – анализирует web-страницы и дает рекомендации по улучшению производительности web-страниц.

Developer tools (Safari) – компонент, который позволяет отлаживать HTML/JavaScript код, просматривать и интерактивно редактировать DOM модель, содержит средства анализа ресурсов web приложений и т.д.

Developer tools (Internet Explorer) - компонент, который позволяет проводить проверку CSS, HTML/JavaScript кода и т.д. Он также позволяет предварительно просматривать макет страницы при различных разрешениях, и предлагает правила размещения элементов на странице.

Venkman - является и графическим и консольным отладчиком. Содержит функции управления остановом, просмотра стек вызовов и т.д. Консоль также поддерживает интерактивное выполнение произвольного кода JavaScript.

Более подробно о возможностях средств тестирования и отладки web приложений будет рассказано в рамках доклада на конференции SQA Days 10. До встречи!

Обсудить в форуме