Привет, участник Школы 21! В этом проекте мы наконец познакомимся с такими понятиями, как Front-end и Back-end, разберёмся с тем, как устроены современные веб-приложения и как их необходимо тестировать. 😇
Новая команда и новый групповой проект! Распределяйте задачи в команде так, чтобы добиться максимальной эффективности. Тимлид также должен отслеживать процесс выполнения задач.
Напоминаем, что все созданные отчёты и файлы вам нужно будет загрузить в папку src/ в корне проекта (обязательно в
ветку develop).
- Chapter I
1.1. Веб-приложения
1.2. Клиент-серверное взаимодействие
1.3. Front-end и Back-end
1.4. Задание №1
1.5. Важность изучения архитектуры веб-приложения
1.6. Задание №2 - Chapter II
2.1. Основные Frontend технологии
2.2. HTML
2.3. CSS
2.4. JavaScript
2.5. Задание №3 - Chapter III
3.1. UX/UI
3.2. Задание №4
Наверное, вы много раз слышали или встречали в Интернете термин "веб-приложение", давайте разберёмся с тем, что это такое и почему его не называют "сайтом". Сайт — набор страниц, которые как-то связаны между собой и содержат информацию различного рода: текст, видео, картинки. Основной целью сайтов является предоставление информации. К сайтам можно отнести блоги, сообщества, поисковики, сайты-визитки и т.д. Например, всем знакомую "Википедию" мы можем назвать сайтом.
Веб-приложения, в отличие от обычных сайтов, являются полноценной программой и обладают обширной функциональностью. Веб-приложения позволяют пользователям не только получать, но и манипулировать данными (создавать, удалять, изменять). Идеальным примером веб-приложений являются соцсети (VK, YouTube).
На данный момент в мире почти не осталось сайтов, которые бы не предоставляли никакого элемента интерактивности, однако сайты всё ещё являются информационными источниками, а веб-приложения остаются пользовательскими инструментами.
Пользуясь веб-приложением, вы постоянно взаимодействуете с сервером. Допустим, регистрация в какой-нибудь социальной сети непременно приведёт к появлению ваших данных на сервере. Так и любое приложение, размещённое в сети Интернет, основывается на связке "клиент-сервер". И это не только электронные формы. Даже простое "перелистывание" страниц некоторого сайта в Интернете — пример клиент-серверного взаимодействия, ведь страницы хранятся не на каждом компьютере, а подгружаются извне.
Что же понимается под "клиентом" и "сервером"? 🤔
Клиент — в нашем случае это компьютер, оснащённый специальным программным обеспечением, которое позволяет пользователю отправить запрос к другой машине и получить ответ. Код, выполняемый на стороне клиента, чаще всего называют клиентским кодом. Он обеспечивает создание пользовательского интерфейса. Здесь, когда речь заходит о браузере, важную роль играет язык программирования JavaScript и библиотеки расширения.
Сервер — это компьютер, который оснащён специальным программным обеспечением, которое позволяет решить задачи предоставления пользователю доступа к некоторым услугам и ресурсам, которыми владеет и управляет данный сервер. Код, выполняемый на стороне сервера, называют серверным кодом или серверным сценарием. Он обеспечивает обработку данных. Здесь важную роль играют серверные языки программирования. Примерами таких языков являются PHP и Python.
Таким образом, базовый концепт заключается в том, что клиент посылает запрос на сервер, а сервер ему отвечает (с внутренней кухней такого взаимодействия мы обязательно познакомимся в следующем проекте😉).
Обычно все говорят о двух "сторонах" веб-приложения, однако, в алгоритме подобного взаимодействия довольно активно принимает участие еще одна "сторона" — база данных. Вся динамическая информация приложения (учетные, пользовательские данные и пр) хранится именно здесь.
Схематично это выглядит следующим образом:
Клиент (вы с помощью компьютера) взаимодействует с сервером с помощью запросов. Сервер, в свою очередь, "общается" с базой данный, а затем возвращает клиенту ответ.
Вот мы и дошли до этих терминов. В IT сфере их можно услышать почти везде, где идёт речь о разработке веб-приложений. Так что же мы понимаем под словами Front-end и Back-end? На самом деле, всё очень просто.
Front-end (frontend, фронтенд) — это клиентская часть веб-приложения (да-да, тот самый "клиент"), пользовательский интерфейс, который мы видим, когда открываем что-либо в браузере. То есть фронтенд — всё, что браузер может читать, выводить на экран и/или запускать. К примеру, фронтенд гитлаба Школы21 выглядит так:
Back-end (backend, бэкенд) — это внутренняя, скрытая от пользователя часть веб-приложения (те самые "сервер" и база данных). То есть бэкенд — всё, что работает на сервере, "не в браузере".
Создайте файл exercise1.md, в котором:
- Дайте определения следующим терминам:
- Single Page Application (SPA)
- Multi Page Application (MPA)
- Progressive Web Application (PWA)
- опишите их различия, недостатки и преимущества;
- приведите по 3 различных примера к каждому термину (с ссылками на реальные приложения);
- ответьте на вопросы:
- Зачем вообще нужны PWA? Почему нельзя ограничиться SPA или MPA?
- Какие технологии используются для реализации PWA?
- Как можно понять (и можно ли), что перед нами PWA, а не другие виды приложений?
- Чем отличается между собой тестирование SPA и MPA?
- Как тестировать PWA?
Архитектура веб-приложения — это организация структуры и компонентов веб-приложения, которая определяет, как оно взаимодействует с пользователями, обрабатывает данные, выполняет бизнес-логику и взаимодействует с сервером. Понимание архитектуры веб-приложения предоставляет тестировщику множество возможностей, которые помогают повысить эффективность тестирования и облегчают выявление потенциальных проблем. Например:
- Знание архитектуры позволяет тестировщику понять, какие части приложения являются наиболее критичными для его общей производительности и функциональности и нуждаются в большем внимании.
- При проведении системного тестирования QA-специалист должен понимать, как между собой взаимодействуют пользовательский интерфейс и серверная часть (как данные передаются между клиентской и серверной сторонами), так как это взаимодействие играет ключевую роль в функциональности, производительности и безопасности веб-приложения.
- Знание архитектурных паттернов (например, SPA) помогает тестировщику лучше ориентироваться в структуре и логике приложения, проводить аналогии с тестируемыми ранее приложениями и более эффективно выявлять проблемы
Создайте файл exercise2.md, в котором дайте ответы на следующие вопросы:
- Какие существуют уровни веб-приложения?
- За что отвечает каждый из них?
- Что такое монолитная и микросервисная архитектуры веб-приложения?
- Каковы различия между монолитом и микросервисами?
- Почему не все приложения построены на микросервисной архитектуре?
- Каковы особенности тестирования монолитных и микросервисных веб-приложений?
Для разработки фронтенд части приложения нужны разнообразные инструменты, которые помогут создать структуру, красиво оформить продукт и сделать его интерактивным. Среди подобных инструментов нужно отметить:
- HTML
- CSS
- JS (JavaScript)
HTML (HyperText Markup Language) — это язык гипертекстовой разметки текста. HTML-код используется для
структурирования и отображения веб-страницы и её контента. Чтобы посмотреть на HTML-код любой страницы в Интернете,
просто нажмите на клавишу F12 и перейдёте во вкладку Elements. Также можно разом посмотреть код всей страницы: для
этого надо нажать правой кнопкой мыши на пустую область сайта, а после на кнопку "Посмотреть код страницы".
HTML-код состоит из ряда элементов. Когда вы заходите на сайт, браузер подгружает HTML-файл с информацией о структуре и контенте веб-страницы. HTML выстраивает структуру сайта, он указывает, где будут располагаться элементы, какой у них будет базовый дизайн, откуда брать стили для элементов и скрипты (обычно их пишут на JavaScript). Элементы же состоят из тегов и контента.
К примеру, следующую форма для авторизации (поля для ввода логина и пароля, а также кнопка "Войти"):
на HTML будет описана следующим образом:
<!DOCTYPE html>: эта строка сообщает браузеру о том, что документ является HTML-документом. Это объявление необходимо для правильного отображения и интерпретации документа;<html lang="en">: тег для обозначения начала HTML-документа. Атрибут lang="en" указывает на язык документа, в данном случае, это английский;<head>: секция заголовка документа. Здесь обычно размещаются метаданные и ссылки на внешние ресурсы, такие как стили и скрипты;<meta charset="UTF-8">: устанавливает кодировку документа на UTF-8, что позволяет правильно отображать символы различных языков;<meta name="viewport" content="width=device-width, initial-scale=1.0">: задает параметры масштабирования для устройств с разными ширинами экрана. Это помогает сделать веб-страницу адаптивной к различным устройствам (например, для телефона, для планшета и для ноутбука);<title>Document</title>: заголовок (название) документа, оно отображается во вкладке браузера;<body>: секция тела документа, где размещается основное содержимое веб-страницы;<input type="text" placeholder="Логин">: элемент ввода текста, предназначенный для ввода логина.type="text"указывает, что это поле для текста. Атрибутplaceholderзадает подсказку, отображаемую внутри поля ввода до тех пор, пока пользователь не начнет вводить текст;<input type="password" placeholder="Пароль" id="password">: ёще один элемент ввода текста, но с типом "password", что скрывает введенный текст (поле для пароля). Атрибут id предоставляет уникальный идентификатор элементу, который может быть использован для стилизации или взаимодействия с JavaScript.<button>Войти</button>: кнопка, которую пользователь может нажать для входа. Текст "Войти" находится между открывающим и закрывающим тегами<button>, и именно он отображается на кнопке.
Конечно, тема HTML очень обширная, её попросту нельзя раскрыть за один проект. Существуют целые курсы по изучению HTML и вёрстки сайтов. Поэтому подробно рассматривать данную тему мы не станем, но изучим основные теги.
CSS (Cascading Style Sheets, каскадные таблицы стилей) — это код, который используется для стилизации веб-страницы. Он позволяет "украсить" ваши HTML-элементы, по умолчанию у которых почти никаких стилей нет. CSS позволяет реализовать анимации, переходы, реакции элементов на движение мыши и прочее.
А вот JavaScript — это полноценный язык программирования, который можно встроить в веб-страницу. Этот язык позволяет реализовывать сложные вещи в веб-приложении, например, отображать периодически обновляемый контент, интерактивные графики и так далее.
P.S.: очень советуем изучить вышеперечисленные технологии подробнее, ведь вам ещё не раз придётся с этим столкнуться!
Создайте файл exercise3.1.md, в него добавьте ответы на вопросы:
- Что такое язык разметки?
- Какие вы знаете языки разметки? Опишите каждый из них.
- Что такое XML?
- Что такое теги, атрибуты и элементы в XML?
- Чем XML отличается от HTML?
- Что такое DTD? Расшифруйте и приведите примеры использования в различных документах.
- Из чего состоит HTML-документ?
Создайте файл exercise3.2.md, в котором опишите, за что отвечают следующие теги HTML:
<a><div><p><style><br><!--...-->
Работая с фронтенд-составляющей приложения, можно часто встретить такие аббревиатуры, как UI и UX. Есть даже такие виды тестирования, как UI-тестирование и UX-тестирование (юзабилити-тестирование).
Аббревиатура UI расшифровывается как user interface — оформление сайта: сочетания цветов, шрифты, иконки и кнопки. UX — user experience, то есть "пользовательский опыт". Простыми словами, это то, каким образом пользователь взаимодействует с интерфейсом и насколько приложение для него удобно.
Если функциональное тестирование — это тестирование ПО для проверки реализуемости функциональных требований, то * UI-тестирование* — это тестирование ПО с целью проверки всех визуальных индикаторов и иконок, меню, переключателей, текстовых полей, флажков и так далее.
Для проведения UI-тестирования необходимо:
- Сравнить реализованный интерфейс приложения с дизайн-макетами. Если же у вас нет дизайн-макетов, на которые можно
ориентироваться, то:
- проверить, что цвета на страницах приложения согласованы между собой;
- проверить, что текст удобно считывается, не выезжает за границы блоков;
- проверить логику расположения элементов на странице, ориентируясь на типовые структуры веб-страниц (и на пользовательский опыт).
- Проверить, как сайт отображается на различных устройствах, таких как ноутбуки, планшеты и мобильные телефоны. Убедиться, что элементы интерфейса адекватно реагируют на изменения размеров экрана.
- Проверить работу всех интерактивных элементов, таких как кнопки, ссылки, формы ввода и другие элементы управления.
- Убедиться, что анимации и переходы между страницами (если они есть) работают корректно.
- Протестировать навигацию по сайту, убедившись, что все ссылки и кнопки перехода ведут на соответствующие страницы.
- Проверить все формы на наличие их корректной работы и валидации введенных данных. Убедиться, что пользователь получает понятные сообщения об ошибках при неправильном вводе данных.
- Проверить работу интерфейса в различных браузерах, например, в таких как Chrome, Firefox, Edge, Opera, чтобы убедиться в его корректном отображении.
UX-тестирование (юзабилити-тестирование) — это метод наблюдения за респондентами, для выявления проблемных мест в пользовательском интерфейсе. Данный вид тестирования отличается от других, которые мы рассматривали ранее, тем, что оно подразумевает проведение проверки на реальных пользователях и не проводится тестировщиками. Потому проводить UX-тестирование в данном проекте мы не будем, но от UI-тестирования не откажемся!
Задание №4.1
В TestIT создайте общее рабочее пространство, в нём создайте проект и назовите его "СберСтрахование". Добавьте тест-кейсы, которые позволяют провести полное ручное UI-тестирование одной из страниц СберСтрахования: "1. Оформление".
После выполнения задания выгрузите полученные тест-кейсы в формате xlsx, назовите файл exercise4.1.xlsx и загрузите
его в папку /src.
Задание №4.2
Добавьте в созданное рабочее пространство новый проект. Теперь вам необходимо создать тест-кейсы, которые позволят
провести полное ручное UI-тестирование демонстрационного приложения conduit. Файл с
выгруженными тест-кейсами назовите exercise4.2.xlsx и загрузите его во всю ту же папку /src!
Перед загрузкой выполненного проекта в репозиторий перепроверьте наличие всех необходимых файлов, которые требовалось создать во время его выполнения:
exercise1.md
exercise2.md
exercise3.1.md
exercise3.2.md
exercise4.1.xlsx
exercise4.2.xlsx