Лабораторные работы Цифровая кафедра ФЭА 4 семестр / Введение в тестирование веб-приложений / cktestwebfirst

Цель.

Получение практических навыков по тестированию клиентской части веб-приложения.

Задачи.

1.Провести тестирование совместимости веб-системы

2.Протестировать адаптивность веб-системы.

3.Проверить валидность верстки.

4.Протестировать структуру веб-приложения.

5.Провести технический аудит веб-системы

Краткое описание веб-приложения.

Для тестирования выбрана социальная сеть «ВКонтакте» - URL: https://vk.com .

Предметная область: социальные сети и медиа.

Назначение веб-приложения: обеспечение коммуникации между пользователями, обмен медиафайлами, создание тематических сообществ, а также потребление развлекательного и образовательного контента.

Отчет о тестировании совместимости.

Тестирование совместимости (кроссбраузерное тестирование) проведено методом «Черного ящика» без доступа к программному коду. Цель проверки - убедиться, что основные функции клиентской части будут доступны пользователям в различных браузерах. Использовался сервис Browserling. Были выбраны две пары параметров тестирования ОС+браузер: Windows 10 + Chrome и Windows 10 + Edge.

Скриншот 1: Окно Browserling с открытым ВК в Chrome

В данном случае все элементы интерфейса отображаются корректно, артефактов вёрстки не обнаружено.

Скриншот 2: Окно Browserling с открытым ВК в Edge

Вбраузере Edge сервис также отображается хорошо, не имея ошибок вёрстки.

Вобоих случаях базовые элементы интерфейса стартовой страницы отрисованы корректно, критических смещений блоков верстки не наблюдается.

Таким образом, можно сделать вывод, что web-приложение “ВКонтакте” имеет высокий уровень кроссбраузерной совместимости - вёрстка стабильна в актуальных версиях популярных браузеров.

Отчет о тестировании адаптивности.

Тестирование адаптивности проводилось встроенными инструментами разработчика (DevTools) в браузере Safari. Проверка выполнялась на трех наиболее востребованных разрешениях экранов:

-1920x1080 (стандартный десктоп)

-1366x768 (популярное разрешение ноутбуков)

-360x800 (мобильное устройство)

При разрешении 1920x1080 веб-приложение отображается корректно.

Скриншот 3: Окно DevTools на разрешении 1920x1080

При изменении разрещения до популярного разрещения ноутбуков (1366x768) сайт сохраняет декстопную структуру, основное различие - при меньшем разрешении пользователь видит меньше контента.

Скриншот 4: Окно DevTools на разрешении 1366x768

При рассмотрении веб-приложения при разрешении 360x800 можно заметить, что перестройки макета под мобильное приложение не происходит, весь контент просто умещается в небольшое разрешении. Это происходит потому, что для пользователей с мобильными устройствами команда разработчиков ВКонтакте предусмотрело переадресацию на специальную мобильную платформу – https://m.vk.com . Именно из-за разделения веб-приложения для двух типов устройств, мы не видим перестройки макета.

Скриншот 5: Окно DevTools на разрешении 360x800

Отчет о тестировании верстки.

Проверка HTML-кода клиентской части на соответствие стандартам проводилась методом «Белого ящика» с помощью бесплатного валидатора от W3C (validator.w3.org).

В результате проверки адреса vk.com выявлен ряд ошибок и предупреждений. Для сложных современных веб-систем (Single Page Applications) это штатная ситуация: контент генерируется динамически скриптами, и используются специфические пользовательские атрибуты, которые могут не в полной мере соответствовать строгим академическим стандартам W3C, но при этом не нарушают работоспособность сайта в браузерах пользователей.

Скриншот 6: Результат сканирования vk.com в валидаторе W3C

Отчет о тестировании структуры веб-приложения.

Для проверки внутренней логической структуры и выявления проблем ссылочной целостности (наличия «битых ссылок») использовался онлайн-сервис Siteliner.

Из-за того, что значительная часть контента социальной сети защищена авторизацией, сервис анализировал публичные страницы (landing pages). Было проанализировано количество внешних и внутренних ссылок, а также проверены статусы ответов серверов. Результаты сканирования веб-приложения свидетельствуют о качественно поддержке структуры сайта разработчиками. Битых ссылок не обнаружено.

Скриншот 7: Итоговый отчет Siteliner для vk.com

Скриншот 8: Список битых ссылок в разделе Broken Links (отсутствуют)

Вывод.

В ходе выполнения практической работы мы успешно получили базовые навыки тестирования клиентской части сложных веб-приложений. На примере портала «ВКонтакте» были отработаны методики тестирования методом «Черного ящика» (адаптивность, совместимость) и «Белого ящика» (валидность верстки).

Мы узнали как использовать встроенные инструменты разработчика (DevTools) для эмуляции различных устройств, и познакомились с функционалом специализированных сервисов: Browserling, W3C Validator,

Siteliner, W3Techs, BuiltWith.

Главной проблемой, с которой мы столкнулись, стала оценка качества верстки в валидаторе W3C. Стало ясно, что крупные проекты вынуждены отходить от идеальной чистоты академического кода ради интеграции метрик, сложного JavaScript-функционала и оптимизации производительности. Также закрытость структуры авторизацией ограничивает работу таких сканеров, как Siteliner. Эти препятствия были преодолены путем грамотного анализа приветственной страницы вебприложения, доступной всем, что позволило успешно выполнить все поставленные задачи.