Рівень 9. Тестування WEB-застосунків
Часу на пояснення немає. Швидше дізнавайся, що таке вебзастосунок, і почнімо тестувати!
Визначення вебзастосунку
- Вебзастосунок — це застосунок, до якого користувачі отримують доступ за допомогою веббраузера через мережу Інтернет або інтранет
- Вебзастосунок — це система, що зазвичай містить набір скриптів, розташованих на вебсервері та взаємодіючих із базами даних та іншими джерелами динамічного вмісту
- Вебзастосунками ми називатимемо будь-які застосунки, що надають вебінтерфейс
Характеристики вебзастосунку
- Для взаємодії з користувачем використовується веббраузер. Користувач безпосередньо із сервером не спілкується
- Сервер і браузер спілкуються, надсилаючи одне одному запити за стандартним протоколом (HTTP/HTTPS)
- З'єднання може ініціювати лише веббраузер
- Взаємодія з користувачем зазвичай здійснюється за допомогою елементів форм і запитів, що надсилаються, найчастіше GET або POST
- Ці етапи розділяються чітко виокремленими зверненнями від браузера до застосунку
- Для опису інтерфейсу застосовується стандартне подання (HTML / XHTML)
Чим вебзастосунок відрізняється від звичайного застосунку
- Вебінтерфейс відображається не самим застосунком, а стандартизованим «рушієм» браузера
- Веббраузер бере на себе всю взаємодію з користувачем і звертається до вебзастосунку лише за потреби
- Вебзастосунок динамічно генерує серію веб документів у стандартному форматі (наприклад, HTML), який підтримується браузерами
Веббраузер. Принцип спілкування з вебсервером
Веббраузер — це програмне забезпечення для перегляду вебсайтів, тобто для запиту вебсторінок, їх обробки, виведення та переходу від однієї сторінки до іншої
- З'єднання з вебсервером може ініціювати лише браузер
- Веббраузер надсилає запит (однією з мов, як-от JavaScript або VBScript) за одним із протоколів доступу (HTTP, HTTPS). Наприклад, «показати такий-то файл». У відповідь на запит сервер надсилає файл, який отримує користувач
- На боці веббраузера відбувається додавання динамічних елементів до інтерфейсу користувача
- Зазвичай кожна вебсторінка доставляється користувачеві як статичний документ, але послідовність сторінок може забезпечувати діалог із користувачем шляхом обробки даних, які користувач має можливість вводити у вебформи, вбудовані в сторінку
Приклади вебформ
Приклад спілкування браузера з вебсервером
1. Користувач натискає на посилання, браузер надсилає запит серверу й чекає на відповідь: Браузер -> Сервер
2. Сервер виконує скрипт, віддає результат у браузер і завершує роботу: Сервер -> Браузер
3. Браузер відображає сторінку, «переглядаючи» її на предмет посилань, які треба запитати в сервера (теги <img src>, <script src> тощо), і надсилає відповідні запити: Браузер -> Сервер, Браузер -> Сервер...
4. Користувач заповнює форму й натискає на кнопку: Браузер -> Сервер
5. Сервер обробляє форму, записує дані в базу та надсилає браузеру заголовок Location: Сервер -> Браузер
6. Браузер, отримавши цей заголовок, запитує вказану сторінку: Браузер -> Сервер
7. Сервер виконує запит... і так далі
Факти про вебінтерфейс
- У момент, коли користувач бачить перед собою сторінку й починає щось із нею робити, Сервер уже завершив роботу!
- І користувач взаємодіє не із Сервером, а зі своєю HTML-сторінкою, яку він отримав у браузері
- Результатом роботи скрипта на Сервері в більшості випадків є звичайний текст — текст HTML-сторінки, який віддається браузеру та показується ним як звичайний HTML
- Клієнт запитав — сервер віддав.
- Звідси стає зрозумілою відповідь на запитання, чи можна точно дізнатися, скільки користувачів зараз на сайті. Не можна. Тому що «на сайті» немає жодного. Вони з'єднуються, запитують сторінку й від'єднуються.
Вебзастосунок як клієнт-серверний застосунок
C-3PO, в мене до тебе запитання. Зможеш відповісти? Що потрібно для взаємодії з вебзастосунком?
Звісно, я не люблю вихвалятися, але відповідь на це запитання знаю.
Для взаємодії потрібні:
хости (клієнт і сервер);
програмне забезпечення, що взаємодіє; реалізовані протоколи взаємодії.
Ну, як тобі?
Чудова робота, C-3PO. Може, ти ще й скажеш мені, що таке вебсервер?
Це легко. Вебсервер — це сервіс, що отримує й обробляє HTTP-запити.
До речі, дуже часто функціональність вебсервера розширюють, доводячи його до рівня сервера застосунків.
Ось, дивись приклад застосунків, зібраних в одному сервісі:
Я теж знати про клієнт-серверну взаємодію!
Клієнтом (агентом користувача) в більшості випадків є веббраузер, який виставляє запити серверу і цим ініціює з'єднання.
Основна функція браузера:
- Рендеринг (візуалізація) HTML-коду
- Допоміжні функції: Спрощення навігації (back, forward, history, bookmarks); Кешування даних; Наявність поштового клієнта; Наявність HTML-редактора та вебінспектора тощо.
А що ти знаєш про рендеринг вебсторінки?
Я нічого зовсім не знати про це ...
А ще вихвалявся!.. Гаразд, розповім тобі, як усе відбувається. Розгляньмо послідовність роботи браузера під час відображення документа:
- З отриманого від сервера HTML-документа формується DOM (Document Object Model).
- Завантажуються й розпізнаються стилі, формується CSSOM (CSS Object Model).
- На основі DOM і CSSOM формується дерево рендерингу, або render tree — набір об'єктів рендерингу (Webkit використовує термін «renderer» або «render object», а Gecko — «frame»). Render tree дублює структуру DOM, але невидимі елементи (наприклад, <head> або елементи зі стилем display:none;) сюди не потрапляють. Також кожен рядок тексту подано в дереві рендерингу як окремий renderer. Кожен об'єкт рендерингу містить відповідний йому об'єкт DOM (або блок тексту) і розрахований для цього об'єкта стиль. Простіше кажучи, render tree описує візуальне подання DOM.
- Для кожного елемента render tree розраховується положення на сторінці — відбувається layout. Браузери використовують потоковий метод (flow), за якого в більшості випадків для розміщення всіх елементів достатньо одного проходу (для таблиць потрібно більше проходів).
- Нарешті, увесь цей крам малюється в браузері — painting.
Під час взаємодії користувача зі сторінкою, а також виконання скриптів вона змінюється, що вимагає повторного виконання деяких із перелічених вище операцій.
Архітектура клієнт-серверного застосунку
Клієнт-сервер — мережева архітектура, в якій пристрої є або клієнтами, або серверами
- Клієнтом є машина, що надсилає запит, сервером — машина, що відповідає на запит
- Обидва терміни (клієнт і сервер) можуть застосовуватися як до фізичних пристроїв, так і до ПЗ
- Під час тестування бажано уявляти конфігурацію системи, в якій працює тестований вебзастосунок, щоб ефективніше розглядати проблеми
- Розуміння конфігурації системи додає вагомості опису помилки
Трирівнева архітектура клієнт-серверного застосунку
Трирівнева архітектура — варіант архітектури клієнт-сервер, в якому UI, бізнес-логіка, доступ до даних і зберігання даних розробляються та функціонують як незалежні модулі, часто на різних платформах
Стандартна трирівнева архітектура організації системи управління інформаційним вмістом складається зі сховища даних, сервера застосунків і клієнтської частини
Дворівнева архітектура клієнт-серверного застосунку
- Дворівнева архітектура — відмова від сервера застосунків. У цьому разі дані, які користувачі запитують найчастіше, зберігаються не в базі даних, а у вигляді вже сформованих статичних інформаційних сторінок
- Такий підхід дає змогу відмовитися від ланцюжка «отримання запиту користувача — запит до бази даних — формування запитуваної сторінки — надання сформованої сторінки користувачеві»
- Це дає змогу уникнути перевантаження апаратних ресурсів сервера
і значно знижує навантаження на базу даних - Очевидно, що це рішення не підходить для організації великих корпоративних порталів, покликаних забезпечувати не лише ефективне управління інформацією, а й організацію робочого місця співробітника підприємства.
Веббраузер у ролі тонкого клієнта
- У комп'ютерних технологіях тонкий клієнт (англ. thin client) — це комп'ютер-клієнт мережі з клієнт-серверною архітектурою, який
переносить більшість завдань з обробки інформації на сервер - Цим тонкий клієнт відрізняється від товстого клієнта, який, навпаки,
обробляє інформацію незалежно від сервера, використовуючи останній переважно лише для зберігання даних - Тонкий клієнт у більшості випадків має мінімальну апаратну конфігурацію, іноді — без жорсткого диска
- Прикладом тонкого клієнта може слугувати комп'ютер із браузером,
що використовується для роботи з вебзастосунком - Упродовж користувацької сесії веббраузер інтерпретує та
відображає сторінки й виступає в ролі універсального тонкого клієнта для будь-якого вебзастосунку
Втомився?
Часу відпочивати немає, рухаємося далі
Структура вебзастосунку на прикладі організації вебпорталу
- Контроль над вмістом здійснюється за допомогою систем управління інформаційним вмістом (Content Management System)
- CMS дає змогу керувати текстовим і графічним наповненням вебзастосунку, надаючи користувачеві зручні інструменти зберігання, навігації та публікації інформації
- Нині існує безліч готових систем управління вмістом сайту, зокрема й безкоштовних
Набір сервісів і застосунків (інтерактивні навчальні курси, засоби контролю знань, засоби обміну інформацією, реєстрація тощо), а також засоби персоналізації та
розмежування доступу
Інформаційне наповнення (контент) порталу.
Пошуковий механізм,
каталог посилань на ресурси
Функціональність на клієнті та сервері
- Функціональність реалізується як на серверному, так і на
клієнтському боці - Функціональність, реалізована на клієнтському боці,
як правило, зводиться:
до перевірки даних, що вводяться
і реалізації додаткових можливостей інтерфейсу,
що здійснюється шляхом використання скриптових
можливостей, вбудованих в HTML
- Окрім скриптових можливостей, існують інші засоби
розширення функціональності, такі як технологія ActiveX,
Macromedia Flash та ін., які взаємодіють із веб-
застосунком, використовуючи власні механізми
Технології, засновані на виконанні коду в клієнтському застосунку
AJAX (Asynchronous JavaScripting and XML):
- Усуває необхідність перезавантаження вебсторінки й дає змогу «на льоту» підвантажувати та перетворювати потрібну інформацію
- Не самостійна технологія, а ідея. AJAX — один із
компонентів концепції DHTML
Приклад: стрічка новин Facebook
DHTML або Dynamic HTML:
Це спосіб створення інтерактивного вебсайту із застосуванням поєднання:
- статичної мови розмітки HTML
- вбудованої скриптової мови JavaScript
- CSS (каскадних таблиць стилів)
- DOM (об'єктної моделі документа)
Може бути використана, наприклад:
- для простішої навігації або для надання інтерактивності формам
- для динамічного переміщення елементів екраном
- може слугувати інструментом для створення браузерних відеоігор
DHTML-застосунки цілком автономні в браузері без серверної підтримки
Приклад — http://despiration.wix.com/pechenka
Java-аплети (applets):
- Це несамостійний компонент програмного забезпечення, вбудований і виконуваний у вікні браузера — спеціальні Java-застосунки, посилання на які впроваджується у вебсторінку
- Аплети можуть виконуватися на всіх платформах, для яких існують
віртуальні Java-машини
Через нескінченні вразливості безпеки в аплетах технологія практично вимерла. Chrome її вже не підтримує.
Приклад — http://www.echoecho.com/freejamenus02.htm. Працює лише у Firefox
Macromedia Flash для анімації
Adobe Flex
Flex — це великий набір класів, що розширюють можливості Flash. Flex-фреймворк містить можливості локалізації, стилізації застосунку, розробки модульного застосунку, вбудовані валідатори та форматувальники текстових полів — усі ті інструменти, які потрібні розробникам застосунків, що працюють 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:
- Мова програмування, що інтерпретується веббраузерами, — вбудований у HTML-сторінку код скриптовими мовами, такими як typeScript і JavaScript, здатний виконувати Java-аплети та елементи керування
- Спочатку використовувалася переважно для створення сценаріїв поведінки
браузера, нині ж еволюціонувала й реалізує повноцінні програми як на клієнтському, так і на серверному боці
Приклад відмальовування простору за допомогою JS http://maxogden.github.io/voxel-perlin-terrain/
ActiveX:
- Це код, що інтерпретується браузером і виконується в його власному адресному просторі
- До складу вебсторінки можуть входити посилання на елементи керування ActiveX, які є динамічно завантажуваними бібліотеками, що виконуються в адресному просторі браузера
- При цьому, на відміну від Java-аплетів, виконання елементів керування ActiveX загалом не зазнає жодних обмежень на доступ до файлів та інших ресурсів операційної системи й мережі
Застарів і мало використовується
Технології, засновані на виконанні коду на вебсервері
CGI (Common Gateway Interface) — загальний інтерфейс шлюзу, що слугує для зв'язку зовнішньої програми з вебсервером застосунку. Зазвичай це консольні застосунки, які генерують HTML-код, що передається браузеру. Як це працює:
- Звернення до них — шляхом зазначення їхньої назви (параметрів) в URL
- Важливо, що вебклієнтами не обов'язково мають бути браузери, це можуть бути
будь-які програми, що використовують протокол HTTP - Вхідною інформацією слугує вміст HTTP-заголовка або тіло запиту,
залежно від застосовуваного протоколу - Можуть являти собою код скриптовими мовами або виконуваний файл,
який можна створити за допомогою практично будь-якого засобу розробки
Думаю, треба розібратися, що таке HTTP?
HTTP (англ. HyperText Transfer Protocol — «протокол передавання гіпертексту») — протокол прикладного рівня передавання даних (спочатку — у вигляді гіпертекстових документів у форматі HTML, нині використовується для передавання довільних даних). Основою HTTP є технологія «клієнт-сервер», тобто передбачається існування споживачів (клієнтів), які ініціюють з'єднання й надсилають запит, та постачальників (серверів), які очікують на з'єднання для отримання запиту, виконують необхідні дії й повертають назад повідомлення з результатом.
Технології, засновані на виконанні коду на вебсервері
Сервлет
- Сервлет — CGI-програми, написані на Java і такі, що мають кращі характеристики щодо продуктивності та можливості зберігати стан (sessions)
- Сервлет — це програма, яка розширює функціональні можливості вебсервера, динамічно генеруючи вміст і взаємодіючи з вебклієнтами за допомогою принципу запит-відповідь
- Сервлети автоматично підтримуються більшістю вебсерверів
- Сервлети набули широкого поширення в реалізації вебсервісів
Вебзастосунки, засновані на застосуванні бібліотек :
наприклад, ISAPI або DSO
Проблему обмеженої продуктивності вебзастосунків можна вирішити, створивши застосунок у вигляді бібліотек, що завантажуються в адресний простір вебсервера
Розміщення всередині вебсторінки коду, що виконується вебсервером:
- технологія ASP.NET — можливість обробки на сервері подій, що виникають у клієнтському застосунку. ASP.NET є частиною .NET Framework, а тому забезпечує доступ до всіх можливостей цієї платформи
- технологія JSP (Java Server Pages) — одноразова компіляція Java-коду (сервлета) під час першого звернення до нього, виконання методів цього сервлета та розміщення результатів виконання цих методів у наборі даних, що надсилаються в браузер
- технологія PHP (Personal Home Pages) — застосування CGI-застосунків, що інтерпретують код скриптовою мовою, вбудований у HTML-сторінку. Простота розробки й доступність для різних платформ (докладніше далі)
Вебсервіси
Переваги вебсервісів:
- Забезпечують взаємодію програмних систем незалежно від платформи
- Ґрунтуються на відкритих стандартах і протоколах
- Завдяки використанню XML досягається простота розробки й налагодження вебсервісів
Недоліки вебсервісів:
- Нижча продуктивність і більший розмір мережевого трафіку через використання текстових XML-повідомлень
Останнім часом спостерігається масова поява застосунків, що використовують вебсервіси, зокрема й призначених для кінцевих користувачів
До таких застосунків належать, наприклад, застосунки родини Microsoft Office
System, що дають змогу за допомогою вебсервісів користуватися:
- даними словників, енциклопедій,
- систем онлайн-перекладу,
- сервісів онлайн-замовлення товарів
Принципи побудови та роботи:
- Команди, доступні для виклику, описуються мовою WSDL
- Безпосередня активація команд відбувається у вигляді надсилання SOAP-повідомлень за адресою, де розташований сервіс (використовується стандартний протокол HTTP)
- Для пошуку вебсервісу існують глобальні або локальні (внутрішні) каталоги, що підтримують стандартні сервіси виявлення UDDI (UDDI-каталог)
Універсальний інтерфейс
розпізнавання, опису та
інтеграції (Universal Description, Discovery, and Integration) вебсервісу
WSDL (Web Services Description
Language) — мова опису зовнішніх інтерфейсів вебсервісів на базі XML
(Simple Object Access Protocol) Протокол обміну повідомленнями на базі XML
Динамічне вебсередовище
Коли під час проведення процедури значення атрибута специфічного середовища не залишається сталим, це призводить до того, що операційне середовище стає динамічним
Вебсередовище можна з повним правом віднести до динамічних середовищ
Змінні параметри динамічного вебсередовища:
Специфічні для ресурсу:
- Доступна пам'ять RAM
- Зайнятий простір на диску
Специфічні для вибору часу:
- Час очікування мережі
- Порядок виконаних користувацьких транзакцій
Коли тест-кейс залежить від точного відтворення як набору дій, так і операційного середовища, а середовище відтворити неможливо (відповідно до його динамічної природи), тоді помилка стає невідтворюваною або важковідтворюваною
Мови розмітки у вебсередовищі
Мова розмітки HTML (HyperText Markup Language) — це мова публікації, що використовується у вебсередовищі — WWW (World Wide Web)
Мова HTML не є мовою програмування в широкому розумінні — з її допомогою не можна створити повноцінний застосунок
HTML надає авторам засоби для:
- Публікації електронних документів із заголовками, текстом, таблицями,
списками, фотографіями тощо - Завантаження електронної інформації за допомогою клацання миші на
гіпертекстовому посиланні - Розроблення форм для виконання транзакцій із віддаленими сервісами,
для використання в пошуку інформації, резервуванні, замовленні
продуктів тощо - Вбудовування електронних таблиць, відеокліпів, звукових фрагментів та
інших застосунків безпосередньо в документи
Якщо тема HTML зацікавила вас або вам потрібні глибші знання там, де ви збираєтеся працювати, на допомогу вам довідник з HTML і підручник з HTML
Модифікації мов розмітки
Мова SGML — найзагальніша й найскладніша з метамов. Вона широко використовувалася в друкарській і видавничій сфері, але її складність перешкодила її широкому поширенню для повсякденного використання. Вона стала прабатьком метамов, що використовуються нині
XML (eXtensible Markup Language) — мова, що є спрощеною версією SGML. XML не обмежує нас у створенні власних елементів розмітки
HTML — чітко визначена
(за допомогою стандарту W3C — World Wide Web
Consortium) підмножина (підмова)
SGML. Є жорстко структурованою
мовою розмітки вебсторінок, але водночас синтаксично «м'якою» мовою: вона допускає безліч «вільностей», наприклад: відсутність закривальних тегів, значення атрибутів елементів без лапок, нечутливість до регістру тощо
XHTML (eXtensible HyperText Markup
Language — розширювана мова розмітки гіпертексту) — синтаксично «жорстка» підмножина XML. XHTML — той самий HTML, але такий, що не допускає цих синтаксичних «вільностей», наприклад, у XHTML усі елементи мають бути закриті, булеві атрибути записуються в розгорнутій формі
Сучасна технологія — це HTML 5
HTML5 став необхідною, вимушеною еволюцією мови, якою пишуться вебсторінки. Його розроблено для написання вебзастосунків (так називають динамічні інтерактивні вебсторінки, на яких можна щось робити). Його попередник, HTML4 (класичний HTML), вміє створювати лише статичні компоненти, як-от зображення, таблиці, списки, текст тощо, тоді як сучасний розвиток медіа вимагає інтерактивних компонентів, здатних реагувати на дії користувача в реальному часі.
- Він може конкурувати з плагінами на кшталт Microsoft Silverlight та Adobe Flash, які самі були створені, щоб закрити прогалини в скам'янілому стандарті HTML4.
- У HTML5 реалізовано безліч нових синтаксичних можливостей. Наприклад, елементи <video>, <audio> та <canvas>, а також можливість використання векторної графіки й математичних формул. Ці новинки розроблено для спрощення створення та керування графічними й мультимедійними об'єктами в мережі без потреби використання сторонніх API та плагінів.
Інші мови у вебсередовищі
DHTML (Dynamic HyperText Markup Language — динамічна мова розмітки гіпертексту) — розширення мови HTML, що дає змогу створювати вебсторінки з такими інтерактивними елементами, як:
- рухомий фон, розташований під статичним вмістом документа
- рухомі об'єкти, випадне меню, кнопки, що підсвічуються
при наведенні курсора миші, анімація, рядки, що біжать, тощо
JavaScript — мова написання програм, що виконуються браузером. Є стандартом для Dynamic HTML. З міркувань безпеки вона не може вплинути ні на що, крім браузера. Вона не має засобів звернення до диска комп'ютера, за винятком запису cookie
- JavaScript значно розширює можливості документа, створеного в цьому форматі
- Модуль, написаний на JavaScript, інтегрується у файл HTML як підпрограма
- Викликається на виконання з відповідного рядка HTML-коду стандартною командою. Може існувати як окремий файл
PHP — мова програмування, спеціально розроблена для створення серверних застосунків
Набула дуже великого поширення завдяки багатим можливостям і простоті використання
Оскільки PHP — одна з найпоширеніших мов для створення та керування вебсайтами, у цій статті докладно розглянуто принцип роботи цієї серверної вебмови, це вам позакласне читання :')
Схема 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 — це уніфікований ідентифікатор ресурсу (Uniform Resource Identifier)
Уніфікований ідентифікатор ресурсу — дуже широке поняття
Вимог до його формату немає — є лише вимога його унікальності
Приклади: IP-адреса комп'ютера в мережі — http://http://54.174.211.229/, повна адреса цієї сторінки — http://www.qaacademy.net/#!level9/g7m0g
Поняття URL та URN
Кожен ресурс у вебі має адресу, яку можна закодувати за допомогою уніфікованого локатора ресурсів (Uniform 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-авторизацію, то браузер під час кожного звернення надсилає введені логін і пароль
Синтаксис 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.0
HEAD
Аналогічний методу GET, за винятком того, що у відповіді сервера відсутнє тіло. Запит HEAD зазвичай застосовується для отримання метаданих, перевірки наявності ресурсу (валідація URL) і для того, щоб дізнатися, чи не змінився він з моменту останнього звернення.
Застосування запиту:
- час зміни документа
- розмір документа
- тип документа
Методи запитів POST
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, код стану й опис:
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
<порожній рядок>
Якщо запит клієнта успішний, надсилаються запитані дані
Коди відповідей HTTP-сервера
Діапазон кодів
Значення відповіді
100-199
Інформаційний
200-299
Запит клієнта успішний
300-399
Запит клієнта переадресовано, потрібні подальші дії
400-499
Запит клієнта є неповним
500-599
Помилки сервера
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 (виведення сторінки з повідомленням про неможливість отримати доступ до сторінки)
Специфіка збору вимог до вебзастосунків
Класифікація вимог до вебзастосунків:
- Функціональні: визначають ту функціональність системи, за допомогою якої
користувачі могли б виконати свої завдання в межах своїх бізнес-процесів
- Нефункціональні: є описом характеристик застосунку, важливих для користувача під час роботи із системою:
- Вимоги до надійності застосунку
- Вимоги до швидкодії застосунку
- Вимоги до безпеки
- Вимоги до масштабованості
- Як нефункціональні вимоги до вебзастосунків можна
розглядати вебстандарт — W3C, World Wide Web Consortium:
Нефункціональні вимоги до вебзастосунку:
Вимоги до надійності застосунку:
Визначаються умовами функціонування застосунку (параметри сервера, максимальна кількість користувачів застосунку) та допустимими показниками якості роботи системи за цих умов (час обробки запиту користувача до системи, кількість відмов системи)
Вимоги до швидкодії застосунку:
Швидкодія визначається як середній час обробки запиту користувача до системи. Максимальним прийнятним часом відгуку для вебзастосунків вважається 5 секунд
Вимоги до безпеки вебзастосунку:
- Розмежування прав доступу до функцій і даних кожного компонента вебзастосунку
- Контроль рівня доступу компонентів та/або користувачів
- Авторизація та верифікація користувачів
Вимоги до масштабованості :
Це здатність системи збільшувати свою продуктивність за підвищеного навантаження та додавання ресурсів. Для користувача масштабованого вебзастосунку має залишатися непомітним момент (тобто час відгуку системи на запити користувача не повинен помітно змінюватися), коли зросте навантаження (наприклад, до застосунку одночасно отримують доступ ще кілька користувачів) і коли зміниться конфігурація застосунку, наприклад, якщо буде додано додатковий компонент обробки даних
Управління ризиками у вебсередовищі
Управління проєктом за допущення ризику — процес, який допомагає визначити, як на проєкт вплине поява тих чи інших ризиків, пов'язаних із вебсередовищем
Робота з ризиками передбачає їх виявлення, аналіз, планування та відстеження. До цього процесу слід звернутися ще до початку роботи над проєктом
Інфраструктура та методи передавання інформації завжди несуть у собі певний ризик, який важливо враховувати під час створення, тестування й управління вебзастосунком
Потрібно мати чіткі плани дій для забезпечення безпеки кожного з пунктів, що містить потенційну небезпеку
Мати на увазі можливі оновлення, ревізії, появу нових версій, випусків і все, що може застаріти або стати причиною підвищеної небезпеки
Причини виникнення ризиків у вебсередовищі
Причинами виникнення ризиків у вебсередовищі можуть стати:
- Операційна система
- Апаратне забезпечення
- Програмне забезпечення
- Браузер
- Провайдер інтернет-послуг
- Сервер
- Клієнт
- Сценарії входу в систему
- Протоколювання помилок
- Протокол передавання гіпертекстових файлів (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
Іншими словами, застосунок/сайт, побудований за стандартами, в ідеалі має бути:
- З добре структурованим кодом. Увесь HTML-документ повинен мати чітку ієрархію, кожен логічний блок має бути обгорнутий тегами div
- Чистим (з валідним кодом). Працюючи із сайтом, потрібно постійно перевіряти консоль: помилки, що викидаються в консоль, є збоями в програмі, а отже, багами
- Заснованим на CSS. Усі параметри кольору, шрифту, відступів тощо мають бути описані у стилі компонента
- Дружнім до пошукових систем (SEO). SEO — окремий великий розділ, що не стосується тестування. Але нас цікавлять лише функціональні аспекти SEO. Як тестувальники, ми перевіряємо, чи відкривається версія сайту для роботів (SEO-версія) після додавання параметра ?_escaped_fragment_= до URL. 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-тестувальника. З його допомогою виявляють багато багів і аналізують їх усі. Адже часто явний функціональний баг супроводжується консольною помилкою, яка допоможе зрозуміти його причину. Докладніше про це у відеоуроці.
Практика
Щоб відчути знання тестування, ти повинен використати їх на практиці. Виконай усі завдання зі списку для сайту та надішли їх мені. Можливо, для проходження цього завдання тобі знадобиться переглянути навчальне відео вище.
- З'ясувати, який document title у сайту
- З'ясувати doc type
- З'ясувати кодування сайту та погуглити, що це за кодування
- З'ясувати, який favicon (іконка для вкладки браузера), і дати посилання на картинку
- Відкрити SEO-версію сайту
- Відкрити мобільну версію сайту
- Купити печиво прямо зараз!, з'ясувати назву шрифту
- З'ясувати точний розмір іконки з тістечком
- Дати URL картинки з галереї з тістечками на головній
- Знайти "cookieName" у запиті на реєстрацію на сайті (потрібно зареєструватися)
- З'ясувати id продукту під час купівлі печива. Приклад: "id":"338211591"
- З'ясувати HTML-код кольору кнопки на головній. Приклад кольору: #CA7D08.
- З'ясувати HTML-код кольору фону на сайті
- Виміряти середній час завантаження сайту за 10 спроб за допомогою застосунку Page Speed Monitor