Single Page Application (SPA) — Введение в тестирование веб-приложений

SPA (Single Page Application) или одностраничное приложение — это сайты, которые не перезагружают страницу при переходе между различными разделами. То есть все данные выводятся на одной странице.

Такие сайты похожи на мобильные приложения, в которых все действия выполняются в рамках одной страницы.

В SPA-приложении все данные загружаются один раз, когда открывается приложение. Затем пользователь может свободно перемещаться между различными разделами и не перезагружать страницу. Это делает приложение более быстрым и удобным для использования.

SPA-приложения могут быть созданы на различных технологиях, например: HTML, CSS и JavaScript.

Пример SPA — личные кабинеты банков. В них информация о деньгах, акциях, специальных предложениях подгружаются автоматически без перезагрузки страницы. При загрузке такого приложения сначала грузятся все основные части: шапка, боковые панели. А основная часть меняется в зависимости от того, в какой раздел перешел пользователь.

Другой пример SPA — почтовые сервисы, например, Gmail:

Шапка с поиском и боковая панель с переключением категорий загружаются единожды и больше не перезагружаются. В них могут меняться данные, например, количество сообщений, но эти части не перезагружаются даже при переходе внутрь письма.

Особенность SPA — использование JavaScript для формирования страницы у клиента. От сервера клиенту один раз приходит полный макет сайта, а дальше данные обновляются при запросах. Это значит, что большая часть логики и интерфейса находится на стороне пользователя, а сервер предоставляет только необходимые данные.

На примере интерфейса Gmail сервер изначально послал весь HTML, который нужен для формирования страницы:

Эти данные отобразились в браузере и больше не меняются. Внутри них могут меняться данные в зависимости от запросов, например:

При этом те части страницы, в которых не изменяются данные, не будут обновляться или перезагружаться.

Тестирование SPA не сильно отличается от тестирования любого другого сайта. Оно строится на принципах, которые мы изучали в прошлых уроках. Но здесь есть свои особенности из-за принципа работы.

В этой части мы не будем рассматривать все способы тестирования, которые разбирали в прошлых уроках. Как и для всех сайтов при тестировании SPA проверяются:

Так как SPA состоит из одной страницы и все взаимодействия происходят через запросы на обновление конкретных данных, то при ручном тестировании проверяется всё, что может обновляться.

Посмотрим это на примере почты:

Тестирование первоначальной загрузки

На этом этапе страница тестируется так же, как и любая другая страница. Проверяется адаптивность, загрузка всех блоков и отсутствие ошибок в загрузке:

При тестировании разделите макет на логические компоненты и проверьте корректность их загрузки. Под корректностью загрузки подразумевается загрузка стилей и первоначальных данных.

В почтовом интерфейсе основные компоненты:

Тестирование функционала

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

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

Тестирование ошибочных запросов

В SPA большую роль играют запросы в различные поля приложения, например, форма поиска или выбор раздела приложения. Приложение должно корректно обрабатывать ошибки и сообщать об этом пользователю. Так как страница не перезагружается и полностью не обновляется, то сообщение об ошибке должно появляться в заметном месте и говорить о том, что произошло. Вот примеры таких ошибок:

В этом примере указана несуществующая метка письма, которая ищется по запросу label:hexlet. Когда мы сделали поиск по такому запросу, был отправлен запрос на сервер, но без результата. Вместо писем было выведено сообщение «Нет цепочек писем с таким ярлыком.»

Еще один пример обработки ошибок — так выглядит страница сервиса YouTube при отсутствии подключения к интернету:

Попробуйте воспроизвести эту ошибку с помощью DevTools. В этом примере раскрывается идея обновлений только некоторых частей приложения. Даже при отсутствии интернета остаются подгруженными шапка и левая панель страницы, а меняется центральная часть с видео, где выводится ошибка «Нет подключения к Интернету».

На этих примерах мы разобрали особенности тестирования SPA-приложений. Хоть тестирование таких проектов и похоже на тестирование обычных сайтов, у него есть несколько особенностей, которые мы разобрали в этом уроке.

В этом уроке мы узнали, что помимо стандартных сайтов существуют одностраничные, которые похожи на мобильные приложения. Такие сайты называются SPA от английского Single Page Application.

Отличительная особенность таких сайтов — переложение логики работы сайта на сторону клиента. Для этого используется язык JavaScript, а на сервер посылаются только запросы на получение новых данных.

При тестировании таких приложений важно, чтобы обновления при запросах происходили корректно. Для этого тестируют: