Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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

Видео может быть заблокировано из-за расширений браузера. В статье вы найдете решение этой проблемы.

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

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

В этом уроке мы разберем, что такое SPA и какие особенности есть в тестировании одностраничных сайтов.

Что такое SPA

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

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

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

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

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

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

Главная страница Gmail

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

Как работает SPA

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

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

  • Шапка

  • Боковая панель

  • Центральная часть

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

  • При переходе в письмо меняется центральная часть и вместо списка писем показывается выбранное письмо

  • В этот же момент обновляется боковая панель. Если письмо ранее было не прочитано, то обновляется количество непрочитанных писем

  • При создании новой категории для писем обновляется боковая панель

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

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

Как тестировать Single Page Application

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

  • Адаптивность

  • Кроссбраузерность

  • Мультиязычность, при ее наличии

  • Загрузка при различных скоростях соединения

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

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

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

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

Главная страница Gmail

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

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

  • Шапка страницы с меню и поисковой строкой

  • Боковая панель с метками писем

  • Центральная часть со списком писем

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

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

Главная страница Gmail

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

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

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

Главная страница Gmail

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

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

Главная страница Youtube

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

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

Выводы

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

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

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

  • Корректную первоначальную загрузку всех блоков

  • Обновление только тех блоков, в которых меняется информация

  • Обновление данных в связанных блоках. Например, обновление счетчика непрочитанных писем при открытии письма

  • Обработка некорректных запросов или при отсутствии интернета


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
от 6 183 ₽ в месяц
Ручное тестирование веб-приложений
4 месяца
с нуля
Старт 18 апреля

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»