Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

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

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

4 <h2>Что такое SPA</h2>

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

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

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

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

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

10 <p>Другой пример SPA - почтовые сервисы, например, Gmail:</p>

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

12 <h2>Как работает SPA</h2>

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

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

15 <ul><li>Шапка</li>

16 <li>Боковая панель</li>

17 <li>Центральная часть</li>

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

19 <ul><li>При переходе в письмо меняется центральная часть и вместо списка писем показывается выбранное письмо</li>

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

21 <li>При создании новой категории для писем обновляется боковая панель</li>

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

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

24 <h2>Как тестировать Single Page Application</h2>

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

26 <ul><li>Адаптивность</li>

27 <li>Кроссбраузерность</li>

28 <li>Мультиязычность, при ее наличии</li>

29 <li>Загрузка при различных скоростях соединения</li>

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

31 <p>Посмотрим это на примере почты:</p>

32 <h3>Тестирование первоначальной загрузки</h3>

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

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

35 <p>В почтовом интерфейсе основные компоненты:</p>

36 <ul><li>Шапка страницы с меню и поисковой строкой</li>

37 <li>Боковая панель с метками писем</li>

38 <li>Центральная часть со списком писем</li>

39 </ul><h3>Тестирование функционала</h3>

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

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

42 <h3>Тестирование ошибочных запросов</h3>

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

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

45 <p>Еще один пример обработки ошибок - так выглядит страница сервиса YouTube при отсутствии подключения к интернету:</p>

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

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

48 <h2>Выводы</h2>

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

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

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

52 <ul><li>Корректную первоначальную загрузку всех блоков</li>

53 <li>Обновление только тех блоков, в которых меняется информация</li>

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

55 <li>Обработка некорректных запросов или при отсутствии интернета</li>

56 </ul>