Home

Автор: Валери Роле (Valery Raulet)
Оригинал статьи
Перевод: Ольга Алифанова

 С того момента, как Тим Бернерс Ли изобрел "Всемирную паутину" в 1989, браузер довольно серьезно изменился. Теперь он может запускать веб-приложения, используя технологию, которая исходно вообще для этого не предназначена. Язык HTML был создан для того, чтобы исследователи могли сотрудничать и делиться информацией.

Веб-приложения стали сложными и используют комплекс из HTML/XML, JavaScript и CSS. Веб-разработчикам нужно тратить значительное время на изучение этой технологии и всех ее ответвлений (JQuery, Ajax, REST), которые позволяют создавать приложения еще мощнее.

Для тестировщика-автоматизатора веб-приложения могут выглядеть, как обычные приложения с кнопками, чекбоксами, полями ввода и всеми базовыми компонентами GUI. Однако если мы стремимся к более богатому взаимодействию с конечным пользователем, появляются более сложные элементы GUI – деревья, сетки, меню, окна, и т. д. Этот богатый набор функций часто называют Web 2.0. Он не "стандартизован", каждый внедряет эти функции так, как считает нужным, но этот набор все еще полагается на базовые "кирпичи" из HTML, JavaScript и CSS. Эти сложные компоненты – то, что обычно заставляет тестировщика волноваться, так как инструмент автоматизации зачастую не может правильно с ними обращаться. Этот инструмент, как правило, не понимает суть компонента, и вместо этого записывает низкоуровневые взаимодействия вроде клика тут и отметки там. Неудивительно – эти компоненты созданы с использованием базовых блоков. Итак, как решить эту проблему? Прежде чем ответить на этот вопрос, посмотрим на архитектуру веб-браузера.

Элементы:

• Загрузчик HTTP: отвечает за запрашивание различных документов (HTML-страниц, изображений, CSS, JavaScript и любых иных).
• Парсер HTML: обрабатывает полученные HTML-документы и генерирует DOM, древовидное представление HTML-документа.
• Интерпретатор JavaScript: интерпретирует код JavaScript, который или скачан отдельно (файлы .js), или находится внутри (тег <script>).
• DOM: древовидная репрезентация отображаемой страницы.
• Механизм визуализации: механизм, отвечающий за чтение дерева DOM и генерацию его графической репрезентации.

Обычный процесс

Обычный процесс состоит из следующих шагов:

1. Пользователь вводит URL, провоцируя загрузку главной HTML-страницы и всех связанных ресурсов.
2. Парсер HTML обрабатывает код HTML и генерирует статичную часть дерева DOM.
3. Загруженные документы JavaScript и скрипты, находящиеся внутри тегов <script>, обрабатываются. Их код изменяет дерево DOM.
4. Механизм визуализации обрабатывает DOM и генерирует графическую репрезентацию, которую пользователь видит в браузере.
5. Пользовательские взаимодействия (мышь и клавиатура) генерируют события, которые передаются в интерпретатор JavaScript, чтобы внести изменения в DOM (динамическое поведение приложения). Изменения отображаются в DOM и выводятся на экран, и так далее.

Как можно видеть, DOM играет центральную роль в архитектуре браузера. Это его краеугольный камень. Различия между разными браузерами (Chrome, Firefox, Internet Explorer, Opera, Safari, и т. д.) в основном связаны с тем, как именно генерируется репрезентация DOM.

Любой инструмент тестирования, серьезно поддерживающий веб-приложения, должен иметь способ для доступа к DOM, дабы дать тестировщику больше свободы. Эту функциональность можно использовать для:

1. Доступа к объектам DOM, хранящим невидимую на экране информацию.
2. Осуществления более сложных взаимодействий, используя структуру данных DOM.
3. Взаимодействия с DOM для выполнения действий, которые нельзя выполнить при помощи инструмента тестирования.
4. Выполнения любой манипуляции, на которую способен JavaScript.

К примеру, BorlandSilkTest и HP QuickTest Professional, два крупных инструмента функционального тестирования, доступные на рынке, такое взаимодействие позволяют. В QuickTest Professional есть свойство Object, дающее доступ к соответствующему объекту в DOM, а у SilkTest есть метод ExecMethod(), делающий то же самое. См. примеры ниже.

Borland SilkTest

Print(Browser.ExecMethod(“all.tags(“”INPUT””)(0).outerHTML”)

HP QuickTest Professional

Print Browser(“Browser”).Page(“Page”).Object.all.tags(“INPUT”)(0).outerHTML

Можно шагнуть еще дальше – если ваш инструмент тестирования поддерживает расширяемость для Web, вы можете улучшить поведение инструмента и автоматически распознавать сложные объекты GUI. Это обычно требует хорошего знания Web-технологий (JavaScript, DOM, HTML) и язык, используемый для создания расширений.

Благодаря DOM вам больше не придется ограничивать свою тест-мощь!

Дополнительные материалы

Mozilla — Document Object Model (DOM)

Edge — Get started with HTML and the DOM

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