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

МИНОБРНАУКИ РОССИИ

Санкт-Петербургский государственный

электротехнический университет

«ЛЭТИ» им. В.И. Ульянова (Ленина)

Цифровая Кафедра

ПРАКТИЧЕСКАЯ РАБОТА №1

Тестирование клиентской части веб-приложений

Студенты гр. 4404		Комарницкий М. С. Коншин М. В. Кудрявцев С. А.
Преподаватель		Турнецкая Е.Л.

Санкт-Петербург

2026

Цель.

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

Задачи.

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 (отсутствуют)

Отчет о проведенном техническом аудите.

Быстрый технический аудит веб-приложения проводился с помощью сервисов BuiltWith и W3Techs. Данный инструмент позволил зафиксировать масштабный стек технологий, на которых реализована социальная сеть. Зафиксировано использование мощных веб-серверов (например, Nginx), аналитических трекеров, а также множества современных JavaScript-библиотек, необходимых для обеспечения высокой интерактивности пользовательского интерфейса, например React.

Скриншот 9: Выдача сервиса BuiltWith: Perl, PHP, Java, React, VKUI и тд.

Скриншот 10: Выдача сервиса W3Techs: PHP, JavaScript (Node JS, Next JS)

Вывод.

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

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

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

Список использованных источников.

1. Аграновский, А. В. Тестирование веб-приложений: учебное пособие / A. B. Аграновский. Санкт-Петербург: ГУАП, 2020. 155 с. (дата обращения: 24.05.2026)

2. Куликов С.С. Тестирование программного обеспечения. Базовый курс. URL: https://svyatoslav.biz/software_testing_book (дата обращения: 24.05.2026)

3. Browserling: Online cross-browser testing. URL: https://www.browserling.com (дата обращения: 24.05.2026)

4. W3C Markup Validation Service. URL: https://validator.w3.org (дата обращения: 24.05.2026)

5. Онлайн-сервис BuiltWith. URL: https://builtwith.com (дата обращения: 24.05.2026)

6. Онлайн-сервис Siteliner. URL: http://www.siteliner.com (дата обращения: 24.05.2026)