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

3.1 Тестирование совместимости

Для проверки кроссбраузерной совместимости был использован онлайн-сервис Browserling. Было проведено попарное тестирование работы веб-приложения в различных окружениях.

В качестве тестовых сред были выбраны: операционная система Windows 10 в связке с браузером Chrome, а также Windows 10 в связке с браузером Edge. Результаты тестирования показали, что веб-приложение отображается корректно, функциональные элементы активны, критических искажений интерфейса не выявлено. Результаты тестирования приведены на рисунках 4 и 5.

Рис. 4. Попарное тестирование ОС Windows 10 + браузер Chrome

Рис. 5. Попарное тестирование ОС Windows 10 + Edge

3.2 Тестирование адаптивности

Тестирование адаптивности проводилось при помощи встроенных инструментов веб-разработчика (DevTools) в браузере. Была проверена корректность отображения контента и перестроения блоков на трех различных разрешениях экрана: 1920x1080 (Desktop), 1366x768 (Laptop) и 360x800 (Mobile).

Интерфейс веб-приложения успешно адаптируется под заданные размеры: на десктопных разрешениях контент занимает всю полезную ширину, а на мобильном разрешении появляется скрытое навигационное меню («гамбургер») и блоки выстраиваются в одну колонку. Результаты тестирования приведены на рисунках 6, 7 и 8.

Рис. 6. Тестирование адаптивности для разрешения 1920x1080

Рис. 7. Тестирование адаптивности для разрешения 1366x768

Рис. 8. Тестирование адаптивности для разрешения 360x800

3.3 Тестирование верстки

Проверка валидности HTML-верстки была выполнена с помощью официального инструмента валидации от W3C (W3C Markup Validation Service). В ходе проверки были получены информационные сообщения и предупреждения, а также одна ошибка (Errors) - “Error: A document must not include both a meta element with an http-equiv attribute whose value is content-type, and a meta element with a charset attribute.”. Однако она не мешает работе программы. Результат проверки представлен на рисунке 9.

Рис. 9. Проверка верстки с помощью онлайн-сервиса W3C Validator

Дополнительно было проведено тестирование методом «Белого ящика» с использованием вкладки «Elements» инструментария DevTools. Был исследован программный код логотипа веб-приложения. Элемент создан на основе тега <img> с использованием атрибутов src и class. Результат инспекции кода представлен на рисунке 10.

Рис. 10. Инспекция программного кода веб-элемента

3.4. Технический аудит

Для проведения технического аудита был использован аналитический онлайн-сервис. В результате аудита был определен стек технологий, на котором базируется тестируемое веб-приложение, включая используемые системы управления контентом, веб-серверы и языки программирования. Из них можно выделить популярные - Tilda, PHP, JavaScript (jQuery, Bootstrap, Nuxt, Node JS, Nginx) Данные аудита представлены на рисунке 11.

Рис. 11. Технический аудит веб-приложения

4. Тестирование сетевых подключений

Тестирование сетевых подключений проводилось при помощи встроенных инструментальных средств веб-разработчика DevTools . Был произведен анализ загрузки веб-страницы, где отображены сетевые запросы, которые делает клиентская часть к серверу.

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

Во вкладке Headers (Заголовки) были определены ключевые параметры запроса:

• Тип подключения: безопасное подключение HTTPS .

• Конкретный URL тестируемого элемента .

• Метод получения информации: GET .

• Код состояния загрузки (Status Code): 200 OK, что говорит об успешной обработке запроса сервером . Также на этой вкладке были проанализированы заголовки запросов и ответов (Request Headers и Response Headers), включая информацию о типе контента и кэшировании .

Рис. 12. Вкладка «Headers» тестируемого элемента

Во вкладке Preview выполнен предварительный просмотр полученного элемента. Поскольку тестируемым элементом является изображение, во вкладке Response (Тело ответа) HTML-код отсутствует .

Рис. 13. Вкладка «Preview» тестируемого элемента

Во вкладке Initiator (Инициатор) определен источник, который инициировал загрузку данного изображения (CSS-файл или непосредственно HTML-документ) .

Рис. 14. Вкладка «Initiator» тестируемого элемента

Во вкладке Timing (Тайминги) были проанализированы данные о скорости загрузки элемента, а именно: длительность отправления запроса, время ожидания ответа от сервера (TTFB) и время скачивания самого контента .

Рис. 15. Вкладка «Timing» тестируемого элемента

Во вкладке Cookies была изучена информация о сохраняемых файлах cookie . Установлено, что элементы используют единый домен сайта и обладают параметрами безопасности (secure) .

Рис. 16. Вкладка «Cookies» тестируемого элемента