С появлением смартфонов и приложений появилось больше потребности в создании сайтов, которые ведут себя как приложения. На таких сайтах может не быть некоторых страниц. Например, когда пользователь доходит до самой последней новости в ленте, более поздние новости в ней прогружаются автоматически.
Получается, данные на сайте подгружаются в зависимости от действий пользователей без перезагрузки страниц. Сайты с такими страницами называются SPA.
В этом уроке мы разберем, что такое SPA и какие особенности есть в тестировании одностраничных сайтов.
Что такое SPA
SPA (Single Page Application) или одностраничное приложение — это сайты, которые не перезагружают страницу при переходе между различными разделами. То есть все данные выводятся на одной странице.
Такие сайты похожи на мобильные приложения, в которых все действия выполняются в рамках одной страницы.
В SPA-приложении все данные загружаются один раз, когда открывается приложение. Затем пользователь может свободно перемещаться между различными разделами и не перезагружать страницу. Это делает приложение более быстрым и удобным для использования.
SPA-приложения могут быть созданы на различных технологиях, например: HTML, CSS и JavaScript.
Пример SPA — личные кабинеты банков. В них информация о деньгах, акциях, специальных предложениях подгружаются автоматически без перезагрузки страницы. При загрузке такого приложения сначала грузятся все основные части: шапка, боковые панели. А основная часть меняется в зависимости от того, в какой раздел перешел пользователь.
Другой пример SPA — почтовые сервисы, например, Gmail:
Шапка с поиском и боковая панель с переключением категорий загружаются единожды и больше не перезагружаются. В них могут меняться данные, например, количество сообщений, но эти части не перезагружаются даже при переходе внутрь письма.
Как работает SPA
Особенность SPA — использование JavaScript для формирования страницы у клиента. От сервера клиенту один раз приходит полный макет сайта, а дальше данные обновляются при запросах. Это значит, что большая часть логики и интерфейса находится на стороне пользователя, а сервер предоставляет только необходимые данные.
На примере интерфейса Gmail сервер изначально послал весь HTML, который нужен для формирования страницы:
-
Шапка
-
Боковая панель
-
Центральная часть
Эти данные отобразились в браузере и больше не меняются. Внутри них могут меняться данные в зависимости от запросов, например:
-
При переходе в письмо меняется центральная часть и вместо списка писем показывается выбранное письмо
-
В этот же момент обновляется боковая панель. Если письмо ранее было не прочитано, то обновляется количество непрочитанных писем
-
При создании новой категории для писем обновляется боковая панель
При этом те части страницы, в которых не изменяются данные, не будут обновляться или перезагружаться.
Тестирование SPA не сильно отличается от тестирования любого другого сайта. Оно строится на принципах, которые мы изучали в прошлых уроках. Но здесь есть свои особенности из-за принципа работы.
Как тестировать Single Page Application
В этой части мы не будем рассматривать все способы тестирования, которые разбирали в прошлых уроках. Как и для всех сайтов при тестировании SPA проверяются:
-
Адаптивность
-
Кроссбраузерность
-
Мультиязычность, при ее наличии
-
Загрузка при различных скоростях соединения
Так как SPA состоит из одной страницы и все взаимодействия происходят через запросы на обновление конкретных данных, то при ручном тестировании проверяется всё, что может обновляться.
Посмотрим это на примере почты:
Тестирование первоначальной загрузки
На этом этапе страница тестируется так же, как и любая другая страница. Проверяется адаптивность, загрузка всех блоков и отсутствие ошибок в загрузке:
При тестировании разделите макет на логические компоненты и проверьте корректность их загрузки. Под корректностью загрузки подразумевается загрузка стилей и первоначальных данных.
В почтовом интерфейсе основные компоненты:
-
Шапка страницы с меню и поисковой строкой
-
Боковая панель с метками писем
-
Центральная часть со списком писем
Тестирование функционала
В этой части тестируются запросы и реакция приложения на них. Например, при открытии непрочитанного письма должна обновиться центральная часть почтового приложения и количество непрочитанных писем в левой части страницы:
При открытии письма счетчик непрочитанных писем автоматически уменьшился на один, а в центральной части вместо списка писем открылось выбранное письмо. При этом другие элементы и сама страница не были изменены или перезагружены.
Тестирование ошибочных запросов
В SPA большую роль играют запросы в различные поля приложения, например, форма поиска или выбор раздела приложения. Приложение должно корректно обрабатывать ошибки и сообщать об этом пользователю. Так как страница не перезагружается и полностью не обновляется, то сообщение об ошибке должно появляться в заметном месте и говорить о том, что произошло. Вот примеры таких ошибок:
В этом примере указана несуществующая метка письма, которая ищется по запросу label:hexlet. Когда мы сделали поиск по такому запросу, был отправлен запрос на сервер, но без результата. Вместо писем было выведено сообщение «Нет цепочек писем с таким ярлыком.»
Еще один пример обработки ошибок — так выглядит страница сервиса YouTube при отсутствии подключения к интернету:
Попробуйте воспроизвести эту ошибку с помощью DevTools. В этом примере раскрывается идея обновлений только некоторых частей приложения. Даже при отсутствии интернета остаются подгруженными шапка и левая панель страницы, а меняется центральная часть с видео, где выводится ошибка «Нет подключения к Интернету».
На этих примерах мы разобрали особенности тестирования SPA-приложений. Хоть тестирование таких проектов и похоже на тестирование обычных сайтов, у него есть несколько особенностей, которые мы разобрали в этом уроке.
Выводы
В этом уроке мы узнали, что помимо стандартных сайтов существуют одностраничные, которые похожи на мобильные приложения. Такие сайты называются SPA от английского Single Page Application.
Отличительная особенность таких сайтов — переложение логики работы сайта на сторону клиента. Для этого используется язык JavaScript, а на сервер посылаются только запросы на получение новых данных.
При тестировании таких приложений важно, чтобы обновления при запросах происходили корректно. Для этого тестируют:
-
Корректную первоначальную загрузку всех блоков
-
Обновление только тех блоков, в которых меняется информация
-
Обновление данных в связанных блоках. Например, обновление счетчика непрочитанных писем при открытии письма
-
Обработка некорректных запросов или при отсутствии интернета
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
