Что такое Веб-приложение.

Добрый день! Поздравляю вас с прохождением предыдущей части курса по теории тестирования!

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

Существует три вида приложений, каждым из которых наверняка пользовался любой человек:

• десктопные приложения — приложения, которые установлены прямо на персональный компьютер, например Word;
• мобильные — приложения на наших смартфонах;
• веб-приложения, которые мы используем через браузер на своем компьютере.

Не будем сейчас вдаваться в подробности и истоки использования Интернета. Все мы знаем, что он стал неотъемлемой частью как повседневной жизни, так и бизнеса. Как следствие, повсюду внедряются и всё шире используются веб-приложения.

Веб-приложение — это компьютерная программа, которая для выполнения своих функций использует веб-браузеры и веб-технологии в сети Интернет. Говоря простым языком, это любая программа, которую пользователь открывает в браузере и как-то с ней взаимодействует, например совершает покупку онлайн или бронирует билет. Можно назвать всё это сайтом, и для обычного пользователя действительно нет разницы, открыл он сайт или веб-приложение, однако различия между ними всё-таки есть.

В чём они заключаются?

Веб-сайт — это одна или несколько связанных веб-страниц, которые предоставляют посетителям статическую визуальную, текстовую, аудио или видео информацию. Посетители веб-сайта могут её просматривать и читать, но не могут с ней никак взаимодействовать, разве что ввести свой электронный адрес для получения рассылки или оформления подписки. Сайты прогнозов погоды, новостные ресурсы, блоги, образовательные платформы — всё это веб-сайты.

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

В чём ещё может заключаться различие? Сайт, как правило, более интуитивно понятен и лёгок в использовании. Приложению же необязательно быть таковым, пользователи могут обучаться для работы в нём. Например, операторы банка прежде чем начать работу, проходят обучение в приложении.

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

Клиент-серверная архитектура. ISO модель.

На этом уроке обсудим, как работают веб-приложения. Это важно понимать, чтобы при работе и тестировании уметь локализовать проблему, ну и в целом понимать, с чем ты работаешь.

На самом деле принцип работы несложен. В архитектуре веб-приложений есть три участника, и она называется клиент-серверная архитектура. Первый участник — клиент, это та часть веб-приложения, с которой непосредственно работает пользователь (пользовательский интерфейс/User Interface/ UI), открывая приложение на своем устройстве в браузере и работая с интерфейсом приложения. Как происходит взаимодействие пользователя с клиентом? Он вводит туда различные данные, нажимает различные кнопочки, тем самым формируя запросы, которые пойдут от клиента второму участнику — серверу. Сервер предназначен для обработки запросов клиента и предоставления ему необходимой информации. Откуда он достаёт эту информацию? От третьего участника процесса — базы данных или сервера базы данных. База данных — это хранилище любой информации, с которой работает приложение.

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

Мы ознакомились с понятием “клиент”, теперь давайте разберёмся с сервером. Сервер можно рассматривать с двух сторон: программного обеспечения (software) и аппаратного обеспечения (hardware). С точки зрения “железа”, сервер — это удалённый компьютер или несколько компьютеров, как правило, мощных и быстрых, которые хранят всю информацию приложения: его страницы, картинки, видео и прочее. С точки зрения ПО, сервер — это некая программа, которая содержит логику и обрабатывает запросы клиента. Зачем серверу быть мощным и быстрым? Для успешной и быстрой обработки клиентских запросов, а клиентов, как вы понимаете, бывает очень и очень много, вспоминаем любой онлайн-магазин.

Если приложение большое и имеет сложные бизнес процессы, а также требуется хранить большой объём важных данных, то необходима база данных. Это хранилище всей информации, необходимой для работы приложения. Это могут быть пользовательские данные — логин и пароль, клиентские данные, данные о покупках, данные кредитных карт и тому подобное.

Теперь давайте разберем простой пример работы веб-приложения, пусть это будет любой онлайн-магазин. Итак, пользователь на своем компьютере открывает браузер и в строке поиска вводит название магазина/сайта. Браузер отправляет запрос к серверу магазина, точнее, к серверу веб-приложения этого магазина. Сервер принимает запрос и проводит его обработку, после чего отправляет ответ браузеру. Браузер, приняв ответ от сервера, понимает, что пользователю необходимо отобразить страницу клиентской части приложения магазина, например домашнюю страницу или страницу авторизации. Увидев страницу магазина, пользователь продолжает работать в ней и вводит свои данные для авторизации, нажимает кнопку Войти, тем самым отправляет новый запрос на сервер. Сервер обрабатывает и этот запрос, увидев данные об авторизации, и, в свою очередь, шлёт запрос в базу данных, чтобы выяснить, действительно ли такой пользователь зарегистрирован в онлайн-магазине. База данных отвечает на этот запрос, подтверждая, что такой пользователь зарегистрирован. Дальше сервер шлёт клиенту ответ с разрешением на авторизацию, и клиент отображает страницу магазина для зарегистрированного пользователя. Вспомнив свой опыт работы в подобных приложениях, вы понимаете, что всё это происходит за секунды, или быстрее.

В чём заключается подход к тестированию веб-приложений? Как вы уже поняли, работа веб-приложения — это постоянный обмен сообщениями между клиентом и сервером, при этом клиентов могут быть тысячи. Важно быть уверенным, что приложение сможет качественно и быстро обработать запросы для всех клиентов. Должна быть обеспечена производительность приложения и безопасность использования данных. С другой стороны, мы должны быть уверены, что для любого пользователя клиентская часть будет работать и выглядеть качественно. Это значит, что пользователи смогут использовать приложение на разных устройствах: ноутбук, планшет, телефон; на ноутбуках могут быть разные операционные системы, да и браузеров уже очень много и пользователь может выбрать любой на свое усмотрение. Всё это окружение по сути не должно влиять на работу веб-приложения и на его UI часть, пользователь в любой ситуации должен получить быстрый доступ и качественную работу приложения. Отсюда появляется такой подход как кросс-браузерное тестирование, при котором необходимо проверить работу пользовательского интерфейса (например, при использовании любого браузера кнопки не должны “уезжать” куда-то за пределы страницы).

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

Для работы сетей разработана своя модель. Среди них популярна семиуровневая архитектура OSI (The Open Systems Interconnection model). Модель представляет собой семь уровней взаимодействия, где принимают участие компьютер-отправитель, компьютер-получатель и данные, которые передаются. Самый верхний уровень называется прикладным, нижний — физическим. Не будем подробно разбирать каждый уровень, для знакомства нам хватит посмотреть на это в общем виде. Так вот, на самом высоком уровне у нас на компьютере в браузерах, например, мы видим информацию в виде текста, картинок, видео, аудио, или же в онлайн-звонках мы видим нашего собеседника и слышим его. За это отвечает протокол HTTP — протокол передачи гипертекста. По мере того как информация, например пересылаемая картинка, спускается ниже по уровням модели, она проходит процесс инкапсуляции, т. е. картинка раскладывается по битам, понятным компьютеру, как железу. Известно, что компьютеры понимают информацию в виде нулей и единичек. Эти биты трансформируются в физические сигналы, что происходит на самом нижнем уровне — физическом. Они-то и передаются по оптоволокну или посредством wi-fi, bluetooth, 4G на другой компьютер. Сигналы, придя на компьютер-получатель, двигаются вверх по уровням, трансформируясь в человекочитаемый формат, ту самую картинку. Такой обратный процесс называется декапсуляция. Между этими уровнями, располагаются ещё пять, каждый из которых имеет свою цель, например транспортный уровень. Его задача — доставить данные, за это отвечают протоколы передачи данных TCP/IP и UDP. Часто спрашивают — в чём разница между ними? Один протокол (TCP/IP) гарантирует доставку всех данных, и если по пути часть данных потеряется, он перешлёт их ещё раз, второй же (UDP) этого не гарантирует. Поэтому второй выбирают тогда, когда необходимо быстро передавать информацию, не боясь потерь. Например, в видео- звонках или играх пара кадров может потеряться или пропадёт звук, но в целом передача состоится. Первый же используется там, где требуется надёжность и целостность данных.

Front-end и Back-end.

Вообще, существует два основных типа веб-приложений, и эти типы могут объединяться друг с другом или существовать по отдельности.

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

А вот второй тип приложения — Frontend (фронтенд) — клиентская часть приложения, это тот самый пользовательский интерфейс, с которым работает пользователь. Простым языком, frontend — это всё то, что вы видите, когда загружаете какой-либо сайт. Frontend реализуется с помощью а) языка разметки гипертекста — HTML, который отвечает за то, в каком месте страницы будет отображаться картинка, кнопка, текст; б) языка стилей CSS, который помогает делать страницу красивой, через него задаются цвета и стили элементов; и в) языка программирования JavaScript, который делает страницу “живой”, например при наведении на кнопку или поле отображается подсказка, или при нажатии на кнопку меняется картинка.

Чаще всего веб-приложение состоит из двух этих частей, которые общаются между собой посредством запросов. Примером такой комбинации может служить одностраничное приложение (Single page application). Это довольно новый вид приложений, который быстро стал популярным из-за своих преимуществ, таких как быстрота загрузки содержимого страницы или уменьшение нагрузки на серверную часть.

Cache, Cookies. Консоль разработчика.

Мы обсудили, как работает веб-приложение, — за счёт отправки сообщений от клиента к серверу и обратно. Хоть это происходит довольно быстро, есть некоторые способы, которые способны ускорить работу и повысить производительность веб-приложения. Для этого существуют Cache (кеш) и Cookies (куки). Вы сталкивались с ними при работе с приложениями. Это способы временного хранения информации на пользовательском устройстве.

Что такое Cache? Это временная память для хранения документов веб-приложения, например для хранения картинок сайта, видео или аудио. Наверняка вы замечали, открывая сайт с большим количеством картинок или видео, что первая его загрузка в вашем браузере занимает какое-то время. Это происходит потому, что загрузка в первый раз происходит с сервера, что увеличивает время. Однако, в следующий раз этот сайт будет загружаться быстрее, т. к. в этот раз работает кеш-память, и оттуда материалы подгружаются быстрее. Cache не очищается самостоятельно, его необходимо удалять вручную на своем устройстве.

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

В завершении этой темы мы отведём время для знакомства с таким инструментом как консоль разработчика (DevTools). Казалось бы, панель разработчика не имеет отношения к тестировщикам, однако этот инструмент очень полезен при тестировании веб-приложений, в частности, он помогает локализовать проблемы там, где их невозможно обнаружить. Например, вы заполнили форму на UI, нажали кнопку, и ничего не произошло. Как понять отправилась ли ваша заявка или нет? Умение работать в консоли поможет решить эту проблему.

Открыть консоль разработчика можно, нажав горячую клавишу F12 (на некоторых устройствах комбинацию fn + f12), или щёлкнув правой кнопкой мыши в любом месте сайта выбрать пункт Просмотреть код. Открывается панель разработчика, где мы видим, что у неё есть несколько вкладок. Наиболее часто используемые вкладки при тестировании это Elements (Элементы), Console (Консоль) и Network (Сеть).

Вкладка Элементы содержит информацию об элементах и их свойствах на странице сайта. Верхняя часть вкладки — это как раз описание страницы на языке HTML. На вкладке рядом или ниже Стили (Styles) можно видеть, как задан стиль каждого элемента страницы, например цвет и размер шрифта. Чем эти вкладки могут помочь при тестировании? Например, проверить, верно ли указаны цвета элементов и заданы ли они в принципе. Аналогично можно проверить, как будет выглядеть таблица с данными, если в ячейки поместить слишком длинное слово и будет ли ячейка заезжать на другие.

Вкладка Консоль отображает все ошибки (Errors) и предупреждения (Warnings), которые возникают при работе приложения. Важно этот момент отслеживать и фиксировать возникшие проблемы разработчикам. Плюс на этой вкладке можно писать и выполнять какие-то скрипты на javaScript.

Вкладка Сеть отображает список запросов и ответов между клиентом и сервером, а также различные ресурсы, подключённые к данной странице приложения. Всё это выводится в виде таблицы, где можно узнать отправленный клиентом тип запроса, его статус-код, размер, и время, затраченное на отправку запроса. Запросы с ошибками обычно подсвечиваются красным цветом. Эту таблицу можно фильтровать по типам ресурсов.

Ещё на вкладке devtools для работы можно использовать её расположение. В правом верхнем углу есть кнопка Три точки. Нажав на неё, увидим панель Dock side и несколько вариантов расположения панели разработчика. Выбираем ту, которая удобней для нас.

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

На этом тема про веб-приложения завершается.