3. Тестирование клиентской части веб-приложения
3.1 Тестирование совместимости
Для проверки кроссбраузерной совместимости был использован онлайн-сервис Browserling. Было проведено попарное тестирование работы веб-приложения в различных окружениях.
В качестве тестовых сред были выбраны: операционная система
Windows 10 в связке с браузером Chrome, а также Windows 10 в связке с браузером Edge. Результаты тестирования показали, что веб-приложение отображается корректно, функциональные элементы активны, критических искажений интерфейса не выявлено. Результаты тестирования приведены на рисунках 4 и 5.
Рис. 4. Попарное тестирование ОС Windows 10 + браузер Chrome
9
Рис. 5. Попарное тестирование ОС Windows 10 + Edge
3.2 Тестирование адаптивности
Тестирование адаптивности проводилось при помощи встроенных инструментов веб-разработчика (DevTools) в браузере. Была проверена корректность отображения контента и перестроения блоков на трех различных разрешениях экрана: 1920x1080 (Desktop), 1366x768 (Laptop) и
360x800 (Mobile).
Интерфейс веб-приложения успешно адаптируется под заданные размеры: на десктопных разрешениях контент занимает всю полезную ширину, а на мобильном разрешении появляется скрытое навигационное меню («гамбургер») и блоки выстраиваются в одну колонку. Результаты тестирования приведены на рисунках 6, 7 и 8.
10
Рис. 6. Тестирование адаптивности для разрешения 1920x1080
Рис. 7. Тестирование адаптивности для разрешения 1366x768
11
Рис. 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. |
12
Рис. 9. Проверка верстки с помощью онлайн-сервиса W3C Validator
Дополнительно было проведено тестирование методом «Белого ящика» с использованием вкладки «Elements» инструментария DevTools.
Был исследован программный код логотипа веб-приложения. Элемент создан на основе тега <img> с использованием атрибутов src и class.
Результат инспекции кода представлен на рисунке 10.
Рис. 10. Инспекция программного кода веб-элемента
13