Home

Продолжаем публикацию статей-анонсов предстоящей конференции 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, т.к. они почти не содержат интересующие нас средства.

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

Наиболее богатым набором средств обладает браузер 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. До встречи!

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