Уровень 9            Тестирование WEB - приложений

Нет времени объяснять, просто скорее узнай, что такое Web приложение и давай тестировать!

Определение Web приложения
  • Web приложение - это приложение, к которому пользователи получают доступ с помощью Web браузера через сеть Internet или Intranet

 

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

 

  • Web приложениями мы будем называть любые приложения, предоставляющие Web интерфейс

 
Характеристики Web приложения
  • Для взаимодействия с пользователем используется Web браузер. Пользователь напрямую с сервером не общается

 

  • Сервер и браузер общаются, посылая друг другу запросы по стандартному протоколу (HTTP/ HTTPS)

 

  • Соединение может инициировать только Web браузер

 

  • Взаимодействие с пользователем обычно осуществляется с помощью элементов форм и отправляемых запросов, чаще всего GET или POST

 

  • Эти этапы разделяются однозначно выделяемыми обращениями от браузера к приложению

 

  • Для описания интерфейса применяется стандартное представление (HTML / XHTML)

     

Отличия Web приложения от обычного приложения
  • Web интерфейс отображается не самим приложением, а стандартизированным "движком" браузера

 

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

 

  • Web приложение динамически генерирует серию Web

    документов в стандартном формате (например HTML), который поддерживается браузерами

     

 
 
Web браузер. Принцип общения с Web сервером

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

  • Соединение с Web сервером может инициировать только браузер

 

  • Web браузер посылает запрос (на одном из языков, таком как JavaScript или VBScript) по одному из протоколов доступа (HTTP, HTTPS). Например, показать такой-то файл. В ответ на запрос сервер посылает файл, который получает пользователь

 

  • На стороне Web браузера происходит добавление динамических элементов к пользовательскому интерфейсу

 

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

Примеры Web форм
 
Пример общения браузера с Web сервером

1.  Пользователь нажимает на ссылку, браузер посылает запрос серверу и ждет ответа: Браузер -> Сервер

 

2.  Сервер выполняет скрипт, отдает результат в браузер и завершает работу: Сервер -> Браузер

 

3.  Браузер отображает страницу, "просматривая" её на предмет ссылок, которые надо запросить у сервера (теги <img src>, <script src> и так далее) и посылает соответствующие запросы: Браузер -> Cервер, Браузер -> Cервер...

 

4. Пользователь заполняет форму и нажимает на кнопку: Браузер -> Сервер

 

5. Сервер обрабатывает форму, записывает данные в базу и посылает браузеру заголовок Location: Сервер -> Браузер

 

6. Браузер, получив этот заголовок, запрашивает указанную страницу: Браузер -> Сервер

 

7. Сервер выполняет запрос... и так далее

Факты о веб интерфейсе
  • В момент, когда пользователь видит перед собой страницу и начинает совершать какие-то действия с ней, Сервер уже завершил работу!

 

  • И пользователь взаимодействует не с Сервером, а со своей страницей HTML, которую он получил в браузере

 

  • Результатом работы скрипта на Сервере в большинстве случаев является обычный текст - текст HTML страницы, которая отдается браузеру и показывается им как обычный HTML

 

  • Клиент запросил - сервер отдал.

 

  • Отcюда становится понятным ответ на вопрос, можно ли точно узнать, сколько пользователей сейчас на сайте. Нельзя. Потому, что "на сайте" нет ни одного. Они соединяются, запрашивают страницу и отсоединяются.

Web приложение как клиент-серверное приложение

С-3РО, для тебя вопрос. Сможешь ответить? Что нужно для взаимодействия с Web приложением?

Отличная работа, С-3РО. Может, ты мне ещё и скажешь что такое Web-сервер?

Это легко, Web-сервер — это сервис, получающий и обрабатывающий HTTP-запросы.

Между прочим, очень часто функциональность Web-сервера расширяют, доводя его до уровня сервера приложений.

Вот, смотри пример приложений, собраных в одном сервисе:

 

 

Я конечно не люблю хвастовства, но ответ на этот вопрос знаю.

Для взаимодействия необходимо: 

хосты (клиент и сервер);

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

Ну, как тебе?

Моя тоже знает про клиент-серверное взаимодействие! 

Клиентом (агентом пользователя) в большинстве случаев является Web-браузер, который выставляет запросы серверу и этим инициирует соединение.

 

Основная функция браузера:

  • Рендеринг (визуализация) HTML-кода

  • Вспомогательные функции:

    • Упрощение навигации (back, forward, history, bookmarks);

    • Кэширование  данных; 

    • Наличие почтового клиента; 

    • Наличие HTML-редактора и WEB-инспектора и пр.

А что ты знаешь о рендеринге веб-страницы?

Моя ничего совсем не знать об этом ...

А хвастался!.. Ладно, расскажу тебе как все происходит. Рассмотрим последовательность работы браузера при отображении документа:
 

  1. Из полученного от сервера HTML-документа формируется DOM (Document Object Model).

  2. Загружаются и распознаются стили, формируется CSSOM (CSS Object Model).

  3. На основе DOM и CSSOM формируется дерево рендеринга или render tree — набор объектов рендеринга (Webkit использует термин «renderer» или «render object», а Gecko — «frame»). Render tree дублирует структуру DOM, но сюда не попадают невидимые элементы (например — <head> или элементы со стилем display:none;). Также, каждая строка текста представлена в дереве рендеринга как отдельный renderer. Каждый объект рендеринга содержит соответствующий ему объект DOM (или блок текста) и рассчитанный для этого объекта стиль. Проще говоря, render tree описывает визуальное представление DOM.

  4. Для каждого элемента render tree рассчитывается положение на странице — происходит layout. Браузеры используют поточный метод (flow), при котором в большинстве случаев достаточно одного прохода для размещения всех элементов (для таблиц проходов требуется больше).

  5. Наконец, происходит отрисовка всего этого добра в браузере — painting.


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

 
Архитектура клиент-серверного приложения

Клиент-сервер - сетевая архитектура, в которой устройства являются либо клиентами, либо серверами

 

  • Клиентом является запрашивающая машина, сервером — машина, которая отвечает на запрос

 

  • Оба термина (клиент и сервер) могут применяться как к физическим устройствам, так и к ПО

 

  • При проведении тестирования желательно представлять себе конфигурацию системы, в которой работает тестируемое Web- приложение, чтобы с большей эффективностью рассматривать проблемы

 

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

     

Трехзвеньевая архитектура клиент-серверного приложения

Трёхзвеньевая архитектура - вариант архитектуры клиент-сервер, в котором UI, бизнес-логика, доступ к данным и хранение данных разрабатываются и функционируют как независимые модули, зачастую на различных платформах

 

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

 

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

 

  • Такой подход позволяет отказаться от цепочки "получение запроса пользователя - запрос базы данных - формирование запрашиваемой страницы - предоставление сформированной страницы пользователю"

 

  • Это позволяет избежать перезагрузки аппаратных ресурсов сервера
    и значительно снижает нагрузку на базу данных

 

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

     

Web браузер в роли тонкого клиента
  • В компьютерных технологиях тонкий клиент (англ. thin client) — это компьютер-клиент сети с клиент-серверной архитектурой, который
    переносит большинство задач по обработке информации на сервер

 

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

 

  • Тонкий клиент в большинстве случаев обладает минимальной аппаратной конфигурацией, иногда — без жесткого диска

 

  • Примером тонкого клиента может служить компьютер с браузером,
    использующийся для работы с Web приложением

 

  • В течении пользовательской сессии Web браузер интерпретирует и
    отображает страницы и выступает в роли универсального тонкого клиента для любого Web приложения

     

 

Устал?

Нет времени отдыхать, следуем дальше

 
 
Структура Web приложения на примере организации Web портала
  • Контроль над содержимым осуществляется при помощи систем управления информационным содержанием (Content Management System)

 

  • CMS позволяет управлять текстовым и графическим наполнением Web приложения, предоставляя пользователю удобные инструменты хранения, навигации и публикации информации

 

  • Сейчас существует множество готовых систем управления содержимым сайта, в том числе и бесплатных

     

Набор сервисов, и приложений (интерактивные обучающие курсы, средства контроля знаний, средства обмена информацией, регистрация и т.д.) А также средства персонализации и 

разграничения доступа

Информационное наполнение (контент) портала.

Поисковый механизм,

каталог ссылок на ресурсы

 

 

Функциональность на клиенте и сервере
  • Функциональность реализуется как на серверной, так и на
    клиентской стороне

 

  • Функциональность, реализованная на клиентской стороне, как
    правило, сводится:

 

           к проверке вводимых данных

 

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

           возможностей, встроенных в HTML

 

  • Кроме скриптовых возможностей, существуют другие средства
    расширения функциональности, такие как технология ActiveX,
    Macromedia Flash и др., которые взаимодействуют с Web-
    приложением, используя свои собственные механизмы

     

 

 

 

 
 
Технологии, основанные на выполнении кода в клиентском приложении

AJAX (Asynchronous JavaScripting and XML):

 

  • Устраняет необходимость перезагрузки Web страницы и позволяет "на лету" подгружать и преобразовывать необходимую информацию

 

  • Не самостоятельная технология, а идея. AJAX — один из
    компонентов концепции DHTML

 

Пример: Facebook лента новостей

DHTML или Dynamic HTML:

 

     Это способ создания интерактивного Web-сайта, используя сочетание:

 

  • статического языка разметки HTML

 

  • встраиваемого скриптового языка JavaScript

 

  • CSS (каскадных таблиц стилей) 

 

  • DOM (объектной модели документа)

 

    Может быть использован, например:

 

  • для более простой навигации или для придания интерактивности формам

 

  • для динамического перемещения элементов по экрану

 

  • может служить как инструмент для создания основанных на браузере видео-игр

 

    DHTML приложения вполне автономны в браузере без серверной поддержки

 

Пример - http://despiration.wix.com/pechenka

 

 

 

Java-апплеты (applets):

 

  • Это несамостоятельный компонент программного обеспечения, встроенный и исполняемый в окне браузера - специальные Java-приложения, ссылка на которые внедряется в Web-страницу

  • Апплеты могут выполняться на всех платформах, для которых существуют
    виртуальные Java-машины

 

Из-за бесконечных уязвимостей безопасности в апплетах технология практически умерла. Chrome ее уже не поддерживает.

 

Пример -   http://www.echoecho.com/freejamenus02.htm. Работает только в firefox

 

Macromedia Flash для анимации

 

Adobe Flex

Flex — это большой набор классов, расширяющих возможности Flash. Flex-framework включает возможности локализациистилизации приложения, разработки модульного приложения,  встроенные валидаторы и форматоры текстовых полей - все те инструменты, которые нужны разработчикам приложений, работающих online.

Факты о Flex:

  • Это технология для создания Rich Internet Applications

  • Технология родственная Flash и основанная на описании интерфейса с помощью диалекта XML - так называемом MXML (декларативный язык описания интерфейсов, используемый платформой Adobe Flex)

  • Помимо интерфейса, позволяет описывать еще и определенные действия приложения

  • Результатом компиляции Flex является swf файл, исполняемый Flash Player который встраивается в браузер

 

Хороший пример - http://albert-elrom3.wix.com/qa-exam

 

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

Говорят вязание помогает дать мозгу хороший отдых

Отличия Flex от Flash и достоинства Flex:

 

  • Flex расширяет базовые возможности Flash, позволяя описывать интерфейс приложения на XML, ускоряя и упрощая процесс разработки насыщенных веб-приложений

 

  • Flex компоненты для построения графиков сделаны удобными для использования. Пример - графики Google Analytics

 

  • Flex 2, помимо скорости разработки, предоставляет полные мультимедийные возможности Flash Platform: включая потоковое видео, звук, поддерживает передачу данных на клиенты

 

  • AJAX может работать с Flex

JavaScript:

 

  • Интерпретируемый Web-браузерами язык программирования - внедренный в HTML-страницу код на скриптовых языках, таких как typeScript и JavaScript, способный выполнять Java-апплеты и элементы управления

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

 

Пример отрисовки пространства с помощью  JS http://maxogden.github.io/voxel-perlin-terrain/

ActiveX:

 

  • Это код, интерпретируемый браузером, выполняется в его собственном адресном пространстве

 

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

 

  • При этом, в отличие от Java-апплетов,  выполнение элементов управления ActiveX в общем случае не подвергается никаким ограничениям на доступ к файлам и иным ресурсам операционной системы и сети

 

Устарел и мало используется

Технологии, основанные на выполнении кода на Web сервере

CGI (Common Gateway Interface) - общий интерфейс шлюза, служащий для cвязи внешней программы с Web сервером приложения. Обычно это консольные приложения,которые генерируют HTML-код, передаваемый браузеру. Как  это работает:

 

  • Обращение к ним - посредством указания их имени (параметров) в URL

 

  • Важно, что Web-клиентами могут быть не обязательно браузеры, это могут быть
    любые программы, использующие протокол HTTP

 

  • Входной информацией служит содержимое HTTP-заголовка либо тело запроса, в
    зависимости от применяемого протокола

 

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

 

Думаю, надо разобраться что такое HTTP?

HTTP (англ. HyperText Transfer Protocol — «протокол передачи гипертекста») — протокол прикладного уровня передачи данных (изначально — в виде гипертекстовых документов в формате HTML, в настоящий момент используется для передачи произвольных данных). Основой HTTP является технология «клиент-сервер», то есть предполагается существование потребителей (клиентов), которые инициируют соединение и посылают запрос, и поставщиков (серверов), которые ожидают соединения для получения запроса, производят необходимые действия и возвращают обратно сообщение с результатом.

 

Технологии, основанные на выполнении кода на Web сервере

Сервлет

  • Сервлет — CGI-программы, написанные на Java и имеющие лучшие характеристики в отношении производительности и возможности сохранять состояние (sessions)

 

  • Сервлет это программа, которая расширяет функциональные возможности Web сервера, динамически генерируя содержание и взаимодействуя с Web-клиентами при помощи принципа запрос-ответ

 

  • Сервлеты автоматически поддерживаются большинством Web-серверов

 

  • Сервлеты получили широкое распространение в реализации Web-сервисов

     

Web приложения, основанные на применении библиотек : 

например, ISAPI или DSO

 

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

 

Размещение внутри Web страницы кода, выполняемого Web сервером:

  • технология ASP.NET - возможность обработки на сервере событий,возникающих в клиентском приложении. ASP.NET является частью .NETFramework, и потому обеспечивает доступ ко всем возможностям этой платформы

 

  • технология JSP (Java Server Pages)  - однократная компиляция Java-кода (сервлета) при первом обращении к нему, выполнение методов этого сервлета и помещение результатов выполнения этих методов в набор данных, отправляемых в браузер

 

  • технология PHP (Personal Home Pages) - применение CGI-приложений, интерпретирующих внедренный в HTML- страницу код на скриптовом языке. Простота разработки и доступности для различных платформ (далее будет подробнее)

 
Web сервисы

Достоинства Web сервисов:

  • Обеспечивают взаимодействие программных систем независимо от платформы

 

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

 

  • Благодаря использованию XML достигается простота разработки и отладки Web сервисов

     

Недостатки Web сервисов:

  • Меньшая производительность и больший размер сетевого трафика за счет использования текстовых XML-сообщений

 

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

 

К таким приложениям, например, относятся приложения семейства Microsoft Office
System, позволяющие при помощи Web сервисов пользоваться:

  • данными словарей, энциклопедий,

 

  • систем онлайнового перевода,

 

  • сервисов онлайнового заказа товаров

     

     

Принципы построения и работы:

  • Доступные для вызова команды описываются на языке WSDL

 

  • Непосредственная активизация команд происходит в виде посылки SOAP-сообщений по адресу, где располагается сервис (используется стандартный протокол HTTP)

 

  • Для поиска Web-сервиса существуют глобальные или локальные (внутренние) каталоги, поддерживающие стандартные сервисы обнаружения UDDI (UDDI каталог) 

     

 

Универсальный интерфейс

распознавания описания и
интеграции (Universal Discovery, Description, and Integration) Web сервиса

WSDL (Web Services Description
Language)
 - язык описания внешних интерфейсов Web сервисов на базе XML

(Simple Object Access Protocol) Протокол обмена сообщениями на базе XML

Динамическая Web среда

Когда во время проведения процедуры значение атрибута специфической среды не остается постоянным, это приводит к тому,что операционная среда становится динамической

 

Web среду  можно с полным правом отнести к динамическим средам

Изменяемые параметры динамической Web среды:

 

Специфически для ресурса:

  1. Доступная память RAM

  2. Занимаемое пространство на диске

 

Специфически для выбора времени:

  1. Время ожидания сети

  2. Порядок совершенных пользовательских транзакций

 

Когда контрольный пример зависит от точного воспроизведения как набора действий, так и операционной среды, а среда воспроизведена быть не может (в соответствии с ее динамической природой), тогда ошибка становится невоспроизводимой или тяжело воспроизводимой

 

Языки разметки в Web среде
 

Язык разметки HTML (HyperText Markup Language) - это язык публикации, используемый в Web cреде - WWW(World Wide Web)

Язык HTML не является языком программирования в широком смысле - с его помощью нельзя создать полноценное приложение

 

HTML дает авторам средства для:

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

 

  • Загрузки электронной информации с помощью щелчка мыши на
    гипертекстовой ссылке

 

  • Разработки форм для выполнения транзакций с удаленными сервисами,
    для использования в поиске информации, резервировании, заказе
    продуктов и т.д.

 

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

     

     

Если вас заинтересовала тема HTML или вам требуются более глубокие знания в том месте где вы собираетесь работать: справочник по  HTML и учебник HTML вам в помощь

 
Модификации языков разметки

XML (eXtensible Markup Language) - язык «упрощенной версии SGML.  XML не ограничивает нас в создании собственных элементов разметки

 

Язык SGML - наиболее общий и самый сложный из мета-языков. Он широко использовался в печатной и издательской сфере, но его сложность затруднила его широкое распространение для повседневного использования. Он стал прородителем используемых мета-языков

 

HTML - четко определенное
(посредством стандарта w3c - www
Consortium) подмножество (подъязык)
SGML. Является жестко структурированным

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

XHTML (eXtensible HyperText Markup
Language
— расширяемый язык разметки гипертекста) — синтаксически «жесткое подмножество XML. XHTML - тот же HTML, но не позволяющий этих синтаксических "вольностей", например, в XHTML все элементы должны быть закрыты, булевы  атрибуты записываются в развёрнутой форме

 

Соверменые технологии это HTML 5

HTML5 стал необходимой, вынужденной эволюцией языка, на котором пишутся веб-страницы. Он был разработан для написания веб-приложений (так называются динамические интерактивные веб-страницы, на которых можно что-то делать). Его предшественник, HTML4 (классический HTML) умеет создавать только статические компоненты как: изображения, таблицы, списки, текст и прочее​, в то время как современное медийное развитие требует интерактивных компонентов, способных реагировать на действия пользвателя в реальном времени. 

  • Он может соревноваться с плагинами типа Microsoft Silverlight и Adobe Flash, которые сами по себе были созданы, чтобы закрыть дыры в окаменелом стандарте HTML4.

  • В HTML5 реализовано множество новых синтаксических особенностей. Например, элементы <video>, <audio> и <canvas>, а также возможность использования векторной графики и математических формул. Эти новшества разработаны для упрощения создания и управления графическими и мультимедийными объектами в сети без необходимости использования сторонних API и плагинов.

Другие языки в Web среде

DHTML (Dynamic Hyper Text Markup Language - динамический язык разметки гипертекста) - расширение языка HTML, которое позволяет создавать Web cтраницы с такими интерактивными элементами, как:

  • движущийся фон, расположенный под статичным содержимым документа

 

  • движущиеся объекты, выпадающее меню, кнопки, подсвечивающиеся
    при наведении курсора мыши, анимация, бегущие титры и др.

JavaScript - язык написания программ, исполняемых браузером. Является стандартом для Dynamic HTML. Из соображений безопасности, он лишен возможности повлиять на что либо, кроме браузера. Он не имеет средств обращения к диску компьютера, за исключением записи cookie

  • JavaScript - значительно расширяет возможности документа, созданного в этом формате

 

  • Модуль, написанный на JavaScript, интегрируется в файл HTML как подпрограмма

 

  • Вызывается на исполнение из соответствующей строки HTML-кода стандартной командой. Может существовать как отдельный файл

PHP - язык программирования, специально разработанный для создания серверных приложений

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

 

Т.к. PHP один из самых распространенных языков для создания и управления WEB сайтами в этой статье  подробно рассмотрен принцип работы этого серверного веб языка, это вам внеклассное прочтение :')

Схема DTD (Document Type Declaration)

Для полноценного обмена информацией необходимо договориться и где-то зафиксировать, какие именно элементы разметки будут использованы, с какими свойствами и в каком порядке. Это называется схемой документа, или декларацией типа документа (document type
declaration)

 

  • Схема DTD сообщает валидатору, какая версия (X)HTML используется, определяет структуру документа, типы элементов, его свойства и типы данных

 

  • DTD может храниться как в самом документе, так и в отдельном файле

 

  • Связывание HTML/XML-документа с внешней DTD-схемой осуществляется специальной директивой <!DOCTYPE > в заголовке документа:

<!DOCTYPE HTML PUBLIC ―-//W3C//DTD HTML 4.0//EN‖―http://www.w3.org/TR/REC-html40/strict.dtd‖>

 

Здесь и сейчас, открой исходный код страницы и убедись что тип документа HTML <!DOCTYPE html>

Понятие URI

URI - это Универсальный идентификатор ресурса (Universal Resource Identifier)

Универсальный идентификатор ресурса - очень обширное понятие

 

Нет требований на его формат - есть только требование его уникальности

 

Примеры:  IP адрес компьютера в сети - http://http://54.174.211.229/, полный адрес данной страницы - http://www.qaacademy.net/#!level9/g7m0g 

Понятие URL и URN

Каждый ресурс в Web имеет адрес, который может быть закодирован с помощью универсального локатора ресурсов (Universal Resource Locator), или URL

URL - это URI, который помимо идентификации ресурса предоставляет ещё и информацию о местонахождении этого ресурса

URL — подмножество URI с четким форматом:

<протокол>://<хост>/<путь>/<документ>#<фрагмент>

URL обычно состоят из частей:

  • схема наименования механизма, используемого для доступа к ресурсу (протокол)

 

  • имя машины, на которой располагается ресурс (хост)

 

  • имя собственно ресурса, заданное в виде пути

 

  • идентификатор фрагмента

 

Итак, мы можем считать, что:

URI = URL или URI = URN или URI = URL + URN. При этом URI может указывать как местоположение ресурса (URL), так и его имя (URN). А может содержать и то и другое. То есть URL и URN — это частные случаи URI.

Нет ничего лучше, чем конкретный пример:

URI = http://www.qaacademy.net/#!blank-4/mcjbf

URL = http://www.qaacademy.net

URN = #!blank-4/mcjbf

 
Протоколы HTTP/HTTPS. Понятие порта

Протокол HTTP  (HyperText Transfer Protocol ) — протокол передачи гипертекста 

 Обмен сообщениями идёт по обыкновенной схеме:

  •   Запрос

  •   Ответ

 

 

 

HTTPS — расширение протокола HTTP, поддерживающее шифрование. В отличие от HTTP (стандартный порт - 80), для HTTPS по умолчанию используется TCP порт 443

 

Порт - номер программы на сервере (для того, чтобы различать программы, выполняющиеся на одном хосте). Номера портов до 1024 зарезервированы (стандартом установлено соответствие наиболее распространенных сервисов для некоторых номеров), номера от 1025 до~65000 - для свободного использования

 

 

Способы общения браузера с сервером

Это спрашивают на собеседовании

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

   Браузер может отправлять информацию серверу следующими способами:

  •   GET  - данные передаются в адресной строке, например, когда пользователь жмет ссылку

 

  •   POST - когда пользователь нажимает кнопку в форме

 

  •   Cookie - если сервер поставил cookie, и он не устарел, то браузер отсылает его при каждом обращении к серверу

 

  •   HTTP аутентификация -  если сервер запрашивал HTTP авторизацию, то браузер при каждом обращении шлет введенные логин и пароль

 

POST

Метод POST позволяет посылать на сервер данные в запросе клиента

Данные, посылаемые на сервер, находятся в теле содержимого запроса клиента

В качестве схемы кодирования с методом POST используется URL-кодирование

 

Пример:

POST /cgi-bin/birthday.pl HTTP/1.0
User-Agent; Mozilla/4.05 (WinNT; 1)

Accept: image/gif, iinage/x-xbj.tmap, image/jpeg, J.mage/pjpeg, */*

Host: www.ora.com

 

Content-type: application/x-www-form-ur.lencoded
Content-Length: 20

 

month=august&date=24

Другие методы HTTP запросов

LINK

Связывает информацию заголовка с документом на сервере

 

UNLINK

Отменяет связь информации заголовка с документом на сервере

 

PUT

Помещает тело содержимого запроса по указанному URI

 

DELETE

Удаляет данные, находящиеся на сервере по заданному URI

 

OPTIONS

Запрашивает информацию о коммуникационных параметрах сервера.

Чтобы запросить данные обо всем сервере в целом, вместо URI

запроса следует использовать символ *

 

TRACE

Требует, чтобы тело содержимого запроса было возвращено без
изменений. Используется для отладки

 

Ответы сервера

Сервер отвечает на запрос клиента следующим образом:

Первая часть ответа сервера - строка состояния, содержащая три поля: версию HTTP, код состояния и описание:

            НТТР/1.0 200 OK

 

После строки состояния сервер передает клиенту информационные заголовки:

Date: Fri, 10 Jan 1998 08:17:58 GMT
Server: Apache/1.2.6

Last-modified: Mon, 12 Jun 1997 21:53:08 GMT
Content-type: text/html

Content-length: 2482
<пустая строка>

 

Если запрос клиента успешен, то посылаются затребованные данные

 

Диапазон кодов

Значение ответа

100-199

Информационный

200-299

Запрос клиента успешен

400-499

Запрос клиента является неполным

300-399

Запрос клиента переадресован, необходимы дальнейшие действия

500-599

Ошибки сервера

Синтаксис HTTP-запроса

Стандартная схема http запроса:

<метод> <URI> <версия>

<набор заголовков>

<пустая строка>

<данные, передаваемые серверу>

 

Например:

GET /index.html HTTP/1.0

User-Agent: Mozilla/4.05 (WinNT; 1)
Accept: image/gif, image/x-xbitmap,
image/jpeg, image/pjpeg, */*

 

Основные методы HTTP запроса:
GET, POST, HEAD

Методы запросов GET, HEAD

GET

 

Запрос информации, расположенной на сервере по указанному URL

Тело информационного содержимого запроса GET всегда пустое

 

Пример:

 GET /cgi-bin/birthday.pl?month=august&date=24 HTTP/1.О

 

HEAD

 

Аналогичен методу GET, за исключением того, что в ответе сервера отсутствует тело. Запрос HEAD обычно применяется для извлечения метаданных, проверки наличия ресурса (валидация URL) и чтобы узнать, не изменился ли он с момента последнего обращения.  

 

Применение запроса:

  •   время изменения документа

  •   размер документа

  •   тип документа

     

Методы запросов POST
Коды ответов HTTP сервера
Cookies в HTTP

Cookie

Это небольшая порция информации, которую сервер передает клиенту


Клиент (браузер) будет хранить эту информацию и передавать ее серверу с каждым запросом как часть HTTP заголовка

 

Установка cookie:

HTTP-заголовок

Set-Cookie: NAME=value; EXPIRES=date; DOMAIN=domain_name; PATH=path;
SECURE

 

HTML

<META HTTP-EQUIV="Set-Cookie"
CONTENT="NAME=value;

EXPIRES=date;

DOMAIN=domain_name;

PATH=path;

SECURE―>

Параметры установок cookie:

  • expires=DATE

Время хранения cookie, дата в формате Wdy, DD-Mon-YYYY HH:MM:SS
GMT, после которой истекает время хранения cookie. Если этот атрибут не указан, то cookie хранится в течение одного сеанса, до закрытия браузера

 

  • domain=DOMAIN_NAME

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

 

  • path=PATH

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

 

  • secure

Если стоит такой маркер, то информация cookie пересылается только через HTTPS (HTTP с использованием SSL). Если этот маркер не указан,то информация пересылается обычным способом

Правила работы с cookies

 

  В случае, если cookie принимает новое значение при имеющемся уже в браузере cookie с совпадающими NAME, domain и path, старое значение заменяется новым. В остальных случаях новые cookies добавляются.

 

  Использование expires не гарантирует сохранность cookie в течение заданного периода времени, поскольку клиент (браузер)может удалить запись вследствие нехватки выделенного места или каких-либо других лимитов.

 

Клиент (браузер) имеет следующие ограничения:

  •   всего может храниться до 300 значений cookies

 

  •   каждый cookie не может превышать 4Кбайт

 

  •   с одного сервера или домена может храниться до 20 значений cookies

 
 
 

Видео инструкция по работе с cookies

Аутентификация в HTTP

Виды аутентификации:

  • None (без аутентификации)

 

  • HTTP basic authentication (базовая аутентификация HTTP)

 

  • Form-based authentication (аутентификация, реализуемая формой)

 

  • Client-certificate authentication (аутентификация, основанная на сертификации клиента)

 

  • Digest authentication (профильная аутентификация)

 

Заголовки при аутентификации:

  • WWW-Authenticate:Basic realm=―Защищенная зона‖ (при получении данного заголовка браузер выводит окно аутентификации)

 

  • HTTP/1.0 401 Unauthorized (вывод страницы с сообщением о безуспешной авторизации)

 

  • HTTP/1.0 403 Forbidden (вывод страницы с сообщением о невозможности получить доступ к странице)

 

 
Специфика сбора требований Web приложений

Классификация требований к Web приложениям:

  • Функциональные: определяют ту функциональность системы, с помощью  которой

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

 

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

  1. Требования к надежности приложения

  2. Требования к быстродействию приложения

  3. Требования к безопасности

  4. Требования к масштабируемости

 

  • В качестве нефункциональных требований для Web приложений можно

рассматривать Web стандарт - W3C - WWW Consortium:

http://www.w3.org/standards/

 

Нефункциональные требования к Web приложению:

Требования к надежности приложения:

Определяются условиями функционирования приложения (параметры сервера, максимальное количество пользователей приложения) и допустимые показатели качества работы системы в этих условиях (время обработки запроса пользователя к системе, количество  отказов системы)

 

Требования  к быстродействию приложения:

Быстродействие определяется как среднее время обработки запроса пользователя к системе. Максимальным приемлемым временем отклика для Web приложений считается 5 секунд

 

Требования к  безопасности Web приложения:

  • Разграничение прав доступа к функциям и данным каждого компонента Web приложения

 

  • Контроль уровня доступа компонентов и/или пользователей

 

  • Авторизация и верификация пользователей

  

Требования к масштабируемости :

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

Управление рисками в среде Web

 Управление проектом при допущении риска - процесс, который помогает определить, как повлияет на проект появление тех или иных связанных со средой Web рисков

 

 Работа с рисками подразумевает их выявление, анализ, планирование и отслеживание. К данному процессу следует обратиться еще до начала работы над проектом

 

Инфраструктура и методы передачи информации всегда несут в себе определенный риск, который важно учитывать при создании,тестировании и управлении Web приложением

 

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

 

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

Причины возникновения рисков в среде Web

  Причинами возникновения рисков в Web среде могут стать:

  •   Операционная система

 

  •   Аппаратное обеспечение

 

  •   Программное обеспечение

 

  •   Браузер

  

  •    Провайдер Интернет-услуг

 

  •    Сервер

  

  •    Клиент

 

  •   Сценарии входа в систему
     

  •    Протоколирование ошибок

 

  •   Протокол передачи гипертекстовых файлов (Hypertext Transfer Protocol - HTTP)

 

  •   Протокол управления передачей (Transmission Control Protocol/Internet Protocol - TCP/IP)

 

  •   Адреса-указатели информационных ресурсов (URL)

Когда рискуешь взять не свежий кефирчик

Пример учета и анализа рисков

Предмет анализа

Риски​

Ссылки (HTML):

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

Правописание (HTML)

Если сайт содержит важную информацию, но она при этом неправильно оформлена или не понятна, посетители не будут пользоваться вашим сайтом

Метатеги (HTML)

Если ваш сайт не зарегистрирован в поисковых машинах, люди не смогут узнать о его существовании

 

Заголовки (HTML)

Если заголовок обычен и не интересен, а название вашего ресурса ничего не говорит посетителям - предстоят трудности при раскручиваниие сайта в поисковых машинах

Формы (Активные элементы)

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

Скрипты (Активные элементы)

Если сайт не тестировался на предмет специфических ошибок в языках  сценариев (JavaScript и VBScript), посетители будут получать множество сообщений об ошибках и прекратят пользоваться сайтом

XML (Активные элементы)

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

Доменное имя (Сайт)

Если содержащаяся в доменном имени информация не соответствует  действительности, ваш сайт не сможет получить большого трафика

Простота использования (Сайт)

Если сайт не удобен в использовании, посетители найдут в Сети другие 

альтернативные сайты

Производительность (Сайт)

 

Если вы не правильно работаете с элементами сетевой инфраструктуры, у вас возникнут проблемы при развертывании сайта и организации хостинга

Контроль источников (Сайт)

Гарантировать качество - только при понимании особенностей использования форм, скриптов, баз данных и любых источников, из которых сайт запрашивает информацию

Log-файлы сервера (WWW)

Использовать, чтобы избавиться от неисправностей, сохранить целостность сайта и не допустить перебоев в его работе

Web стандарты

Приложение/ сайт, простроенный по Web стандартам -  это следование стандартам (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG и т.д.) и лучших отработанных решений:

  • валидный код

  • доступный код

  • семантически правильный код

  • дружественные URL-ы

Например http://www.qaacademy.net/#!level9/g7m0g, ниразу не дружественный URL, дружественный был бы http://www.qaacademy.net/level9

 

Другими словами приложение/сайт, построенный по стандартам в идеале должен быть:

  • C хорошо структурированным кодом. Весь html документ должен иметь четкую иерархию, каждый логический блок должен быть обернут тегами div

  • Чистым (с валидным кодом), при работе с сайтом нужно все время проверять консоль, ошибки выбрасываемые в консоль являются сбоями в программе, а значит багами

  • Основанным на CSS. Все параметры цвета, шрифта, отступов и прочего должны быть описаны в стиле компонента

  • Дружественным к поисковым серверам (SEO). SEO это отдельный большой раздел не касающийся тестирования. Но нас интересуют только функциональные аспекты SEO. 

    • Как тестировщики, мы проверяем открывается ли версия сайта для роботов (seo версия) с помощью добавления параметра в url ?_escaped_fragment_=​​ SEO версия версия не содержит стилей, не предназначена для пользователей и вмещает только ключевые поисковые фразы и картинки сайта

    • Есть ли карта сайта для индексации его поисковиком.

    • Есть ли файл robots.txt который указывает параметры сайта для индексации поисковыми ботами

Далее даны рекомендации по тестированию Web приложений методом контрольного списка Web стандартов

 
 
 
Рекомендации использования контрольного списка Web стандартов

Использование:

  Можно применять, дополнять и расширять с учетом специфики конкретного Web приложения

 

Например - указан ли у страниц правильный Doctype (DTD)?

  •   Декларация должна присутствовать в начале каждой Web страницы

  •   Разметка и CSS не пройдут валидацию, если в документе отсутствует Doctype

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml">

 

 

Указана ли у страниц кодировка (charset)?

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

 

Content-Type: text/html; charset=utf-8 

или

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

Как работать с web инспектором

Web инспектор - это освновной инструмент для web тестировщика. С его помощью обнаруживают многие баги и анализи всех их. Ведь зачастую явный функциональный баг сопровождается консольной ошибкой которая поможет понять его причину. Об этом подробнее в видео уроке.

Практика

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

 

  1. Узнать какой document title сайта

  2. Выяснить doc type

  3. Узнать кодировку сайта  и прогуглить что это за кодировка

  4. Выяснить какой favicon (иконка для вкладки браузера), и дать ссылку на картинку

  5. Открыть SEO версию сайта

  6. Открыть мобильную версию сайта

  7. Купить печенье Чичас!, узнать название шрифта

  8. Узнать точный размер иконки с пироженкой

  9. Дать URL картинки из галереи с пироженными на главной

  10. Найти "cookieName" в запросе на регистрацию на сайте (нужно зарегестрироваться)

  11. Узнать id продукта при покупке печеньки. Пример: "id":"338211591"

  12. Узнать HTML код цвета кнопки на главной. Пример цвета: #CA7D08.

  13. Выяснить html код цвета фона на сайте

  14. Измерить среднее время загрузки сайта за 10 попыток c помощью приложения page speed monitor

Для перехода на уровень 10, необходимо набрать минимум 14,4 балла (60%)  за задания уровня 9.

Уровень 10