Тема_7_Тестирование_WEB_приложений

1. Тема 7. Тестирование WEB-приложений

2. Содержание

1.
2.
3.
4.
5.
6.
7.
8.
Тестирование верстки
Элементы интерфейса
Средства тестирования верстки
Клиент-серверная архитектура
DevTools
Кроссбраузерное тестирование и тестирование
адаптивности
Технологии хранения данных
Анализаторы трафика

3. Вёрстка  — это соединение и расположение элементов интерфейса таким образом, чтобы они соответствовали макету

1. Тестирование верстки
Вёрстка
— это соединение и расположение элементов интерфейса
таким образом, чтобы они соответствовали макету

4. Тестирование верстки

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

5. 2. Элементы интерфейса

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

6. Элементы интерфейса

7. Общие элементы интерфейса 

Общие элементы интерфейса
Главное меню (main menu) —
основной элемент
пользовательского
интерфейса веб-приложения,
который делает возможной
навигацию по разделам.
Контекстное меню,
всплывающее меню (popup
menu) — меню действий,
которое можно вызвать у
выбранного элемента.
При тестировании вёрстки стоит
проверить:
•подсветку пункта меню при наведении
курсора;
•изменение курсора при наведении;
•изменение пункта меню при работе в
выбранном разделе.
_______________________
•ведёт на нужную веб-страницу
•подсветка пункта меню при наведении
курсора;
•изменение курсора при наведении, если это
есть в требованиях и макетах.
_______________________
•ведёт на нужную веб-страницу

8. Общие элементы интерфейса 

Общие элементы интерфейса
При тестировании вёрстки стоит
проверить:
Полоса прокрутки, скролл
(scrollbar) — элемент, который
передвигает визуальную
область окна браузера вверхвниз, вправо-влево.
•одного размера и цвета
_______________________
•не должно быть, если весь контент и
так помещается на одной странице;
•можно двигаться мышью или
кнопками: Page up и Page down, Home
и End.

9. Элементы ввода данных

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

10. Элементы ввода данных

Область ввода текста,
многострочный текст
(textarea) — поле ввода
одной или нескольких
строк.
При тестировании вёрстки стоит
проверить:
функциональность
• обязательность;
• минимальное и максимальное количество
символов;
• формат данных соответствует требованиям;
• уже введённые данные можно редактировать;
• если в поле разрешены специальные символы,
при вводе они должны отображаться корректно.
вёрстка
• область ввода выровнена согласно требованиям;
• введённые данные не касаются границ поля;
• область ввода подстраивается под введённые
данные: например, увеличивается при добавлении

11. Элементы выбора данных

Радиокнопка (radiobutton) —
элемент круглой формы.
Выделяется точкой внутри.
Рядом с радиокнопкой всегда
добавляют обозначение либо
описание. Иногда их
размечают группами по
несколько штук. Радиокнопка
предполагает, что можно
выбрать только один вариант.
Ещё один вид радиокнопки —
переключатель, или toggle
switch:
При тестировании вёрстки стоит проверить:
функциональность
•включается: если состояние меняется на «Вариант выбран» —
отображается точка внутри;
•выключается выбором другой радиокнопки: если состояние меняется
на «Вариант не выбран» — точка внутри выключенной кнопки не
отображается;
•если радиокнопка в виде переключателя, выбранный вариант
выделяется: например, цветом;
•в выборке не меньше двух радиокнопок: всегда должен быть выбор;
•больше одной радиокнопки включить нельзя;
•если пользователь перешёл на страницу вперёд и вернулся назад,
радиокнопка должна оставаться в выбранном положении: включена
или выключена;
•если пользователь обновил страницу, радиокнопки сбрасывают
состояние.
вёрстка
• область ввода выровнена согласно требованиям;
• введённые данные не касаются границ поля;

12. Элементы выбора данных

Чекбокс, флажок, галочка
(checkbox) — ☑ включено
и ☐ отключено. Почти
всегда это элемент
квадратной формы, реже
— круглой. Внутри можно
установить флажок или
галочку. Обычно рядом
добавляют
описание.
Чекбокс может
выглядеть и
как переключатель — toggle
switch:
При тестировании вёрстки стоит проверить:
функциональность
•включается: если состояние меняется на «Вариант выбран» —
отображается галочка или флажок внутри;
•выключается: если состояние меняется на «Вариант не выбран» —
галочка или флажок внутри не отображаются;
•если чекбокс в виде переключателя, состояние «Вариант выбран»
отображается в виде включенного переключателя;
•когда чекбокс включается, он вызывает нужное действие: например,
появляются дополнительные поля;
•если чекбоксов несколько, их можно включить одновременно все или
не включать ни одного;
•если пользователь перешёл на страницу вперёд и вернулся назад,
чекбокс должен оставаться в выбранном положении: включён или
выключен;
•если пользователь обновил страницу, чекбоксы сбрасывают
состояние.
вёрстка
•чекбокс и описание — на одном уровне;

13. Элементы выбора данных

Раскрывающийся список,
комбинированный список
(combobox) — подвид
элемента «Список».
Состоит из поля ввода
текста и выпадающего
списка. Список
раскрывается, если нажать
на кнопку раскрытия или
начать вводить текст.
Позволяет ввести текст
значения вручную или
раскрыть список и выбрать
значение.
При тестировании вёрстки стоит проверить:
функциональность
•у раскрывающегося списка с большим количеством значений есть
возможность прокрутки;
•прокручивать можно клавишами Вверх-Вниз, тачпадом или
колёсиком мыши;
•если выбрать значение из списка, оно выделяется как выбранное;
•список разворачивается и сворачивается;
•можно выбрать одно или несколько значений;
•если начать вводить текст, значения фильтруются автоматически,
чтобы ускорить выбор пользователя;
•выбрать значение можно кнопками на клавиатуре, тачпадом или
мышью;
•если в списке нет совпадений по значению, появляется
соответствующая подсказка.
вёрстка
•значения отсортированы в определённом порядке;
•все раскрывающиеся списки веб-приложения — одинаковые по
размеру и цвету.

14. Элементы выбора данных

Выпадающий
список (select menu, dropdown list) — подвид
элемента «Список».
Раскрывается, если нажать
в любую его область.
Вводить данные не
позволяет — только
выбирать. Бывает только с
единственным выбором
значения из списка, а
бывает с множественным.
При тестировании вёрстки стоит проверить:
функциональность
•у выпадающего списка с большим количеством значений есть
возможность прокрутки;
•прокручивать можно клавишами Вверх-Вниз, тачпадом или
колёсиком мыши;
•если выбрать значение из списка, оно выделяется как выбранное;
•нельзя редактировать выбранное значение из списка;
•можно выбрать одно или несколько значений;
•список разворачивается и сворачивается.
вёрстка
•если в списке есть значение из большого количества символов, оно
разбивается на несколько строк;
•значения отсортированы в определённом порядке;
•все выпадающие списки веб-приложения — одинаковые по размеру
и цвету.

15. Элементы действий

При тестировании вёрстки стоит проверить:
Иконка, картинка (icon) —
небольшое изображение,
которое иллюстрирует
действие.
Кнопка (button) —
элемент с текстом
внутри, вызывает
определённое действие
при нажатии
Ссылка — связующий
элемент веб-приложения,
отсылает к элементу.
•при наведении мыши на иконку всплывает подсказка (hint) с кратким описанием;
•расположение и внешний вид иконок соответствуют макетам.
_______________________
•действие согласно требованиям
•название кнопки соответствует логике;
•название правильно отображается на кнопке: не выходит за её границы и
выравнивается согласно макетам;
•при нажатии или наведении вид кнопки должен меняться, если это прописано в
требованиях.
_______________________
•нажатие вызывает одно действие;
•повторное нажатие не вызывает повторное действие;
•кнопки, которые не доступны для нажатия, не скрыты, а неактивны;
•нажатие на пространство между кнопками не вызывает никакого действия.
•при наведении меняется вид курсора;
•при нажатии вид меняется;
•уже нажатые ссылки отличаются от ненажатых, только если это описано в
требованиях;
•ссылки одинаковые по дизайну: нет случаев, когда одна ненажатая ссылка
выделена синим цветом, а другая — зеленая.

16. Вспомогательные элементы

При тестировании вёрстки стоит проверить:
Надпись, метка (label)
поясняет значения
элементов: например, чекбоксов.
•не должно быть ошибок орфографии или пунктуации;
•если надпись поясняет элемент выбора данных, она должна быть выровнена по
одному краю.
Всплывающая
подсказка (hint) — текст,
который появляется при
наведении на элемент и
подсказывает его значение.
•для каждого элемента всплывает корректная надпись согласно требованиям;
•если у подсказки есть скролл, то она должна прокручиваться;
•не должна перекрывать свой элемент.
Плейсхолдер (placeholder)
— указатель, где нужно
заполнять форму; или
подсказка внутри формы.
Плейсхолдер должен
исчезать, если кликнуть по
полю или начать вводить
данные.
•в поле внешне отличается от данных, которые вводит пользователь;
•не выходит за границы поля ввода;
•все плейсхолдеры веб-приложения выглядят одинаково.
_________________
•текст в плейсхолдере исчезает, если кликнуть по полю или начать вводить данные;
•плейсхолдер появляется, если очистить поле или убрать из пустого поля фокус.

17. Формы

— это компонент страницы для получения
информации от пользователя, состоящий из
различных элементов.
Цель — пользователь должен совершить в вебприложении определённое действие и понять что это
действие совершено.
• Формы проверяют целиком, например, форма не
отправится, пока не заполнены все поля.
• Сначала позитивные проверки, затем негативные.
• Если в форме есть данные, которые зависят друг от
друга и меняют сценарий прохождения, нужно это
учитывать.

18. 4. Средства тестирования верстки.

• тестирование внешнего вида –
соответствии макету;
• кроссбраузерность;
• валидность кода;
• тестирование
адаптированности страниц;
• скорость загрузки;
• проверка орфографии;
• независимость блоков
• структура каталогов.

19. Проверка соответствия макету

Помочь быстро сравнить макет со страницей могут различные
инструменты, например, расширение PerfectPixel by
WellDoneCode, путем наложения полупрозрачного макета на
итоговое решение
Блоки должны
совпадать идеально
с макетом, для текста
могут существовать
допустимые зазоры в
3-5 рх.

20. Проверка соответствия макету

Расширение
Page Ruler
Redux
позволяет
линейкой
измерить как
всю страницу
в целом, так и
отдельно
взятый ее
элемент.

21. Проверки цветов

• Color Zilla –
проверка
цветовой схемы

22. Проверка шрифтов

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

23. Проверка орфографии

Орфограф
Артемия Лебедева
В Орфограф мы вводим
адрес своей странички,
после чего все
неизвестные или
неправильно написанные
слова выделяются цветом,
который мы сами
выбираем.
https://languagetool.org/ru/

24. Валидация

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

25. Валидация html

Валидация html - validator.w3.org/.
Наличие предупреждений (Warning)
при проверки возможно.
Ошибок не должно быть.

26. Скорость загрузки

• Google Page Speed Insights. Один
из самых популярных SEOинструментов для анализа сайтов.
• SpeedTest.me. Сервис, который
показывает, как загружается сайт в
разных регионах мира.
• ToolsPingdom.com. Инструмент
помогает провести анализ сайта и
причин низкой скорости загрузки.
• WebPageTest. Здесь для проверки
нужно выбрать локацию и браузер
• gtmetrix https://gtmetrix.com/

27. 4.Клиент-серверная архитектура

Архитектура – это способ организации приложения.
Клиент, сервер и интернет — элементы клиентсерверной архитектуры:
• клиент отвечает за взаимодействие с
пользователем
• сервер — за логические операции,
вычисления и хранение данных
• интернет (сеть) — за связь клиента и
сервера.

28. WEB-приложение

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

29. Фронтенд и бэкенд 

Фронтенд и бэкенд
— две части одного и того же веб-приложения
Фронтенд (frontend)
— видимая часть приложения, с ней
пользователь
— это код, который обрабатывается на
стороне клиента.
Бэкенд (backend)
— скрытая часть приложения,
отвечающая за логику, вычисления,
хранение данных.
— это код, который работает на
удалённом сервере.

30. URL Унифицированный указатель ресурса (от англ. Uniform Resource Locator) 

URL Унифицированный указатель
ресурса (от англ. Uniform Resource Locator)
— система унифицированных адресов электронных ресурсов, или
единообразный определитель местонахождения ресурса.
— используется как стандарт записи ссылок на объекты
в Интернете (Гипертекстовые ссылки во «всемирной паутине»).
— для обозначения электронного адреса используют
аббревиатуру «URL» по ГОСТ Р 7.0.5-2008.

31. DNS

Браузер инициирует запрос к DNS-серверу (Domain Name
System — система доменных имён).
DNS-сервер возвращает браузеру IP-адрес.
IP-адрес — это уникальный идентификатор сервера, на
котором находится нужная информация.
Доменное имя — это адрес
веб-приложения, под
которым оно
зарегистрировано в
интернете.
Доменное имя состоит из
символов, которые
присвоили приложению в
системе доменных имён
(DNS).

32. Структура URL

• Схема – протокол передачи данных
• Путь (path) — месторасположение ресурса.
• Параметры запроса (query) — дополнительные параметры вида ключ=значение. Перечисляются
после знака ? и разделяются через &.
• Фрагмент текста (fragment), или якорь (anchor) — дополнительный указатель, он позволяет сразу
попасть в нужную часть веб-страницы: например, к заголовку или абзацу в тексте.

33. Протоколы HTTP и HTTPS

• протокол HTTP не обеспечивает защиту передаваемых данных. Любая личная
информация может быть перехвачена злоумышленниками
• HTTP работает по порту 80, а HTTPS ― по порту 443
• сайты с этими протоколами по-разному отображаются в поисковых системах. Так
как HTTP не шифрует данные, то поисковые системы считают этот протокол
небезопасным и оповещают об этом пользователя
SSL (secure sockets layer — уровень защищённых cокетов) представляет собой криптографический
протокол для безопасной связи.
С версии 3.0 SSL заменили на TLS (transport layer security — безопасность транспортного уровня), но
название предыдущей версии прижилось, поэтому сегодня под SSL чаще всего подразумевают TLS.

34. Структура HTTP-запроса

• Запрос — это сообщение фронтенда к бэкенду для совершения
определённых действий с данными, например, отправить,
сохранить или изменить их.
Состав запроса:
• стартовая строка,
• заголовки,
• тело сообщения - это данные,
которые передаёт фронтенд.
Метод (method) указывает действие для бэкенда
GET
Запросить данные по определённому
адресу (тело отсутсвует)
POST
Отправить данные
PUT
Изменить данные
DELETE
Удалить данные

35. Структура HTTP-запроса

• Заголовки запроса (Request Headers) — дополнительная информация от
фронтенда бэкенду.
Различают:
• общие заголовки (general headers) - дополнительная информация о клиенте;
Connection
Параметр состояния соединения между клиентом и сервером
Upgrade-Insecure-Requests
Параметр сообщает, что клиент предпочитает зашифрованный ответ
• заголовки запроса (request headers) - дополнительная информация о клиенте;
Host
Доменное имя ресурса
User-agent
Информация об окружении: название и версия
браузера, название и версия ОС
Accept-language
Допустимые языки в ответе
• заголовки сущности (entity headers).
Content-type
Тип передаваемых данных: текст, изображение, аудио, видео
Content-length
Длина контента в байтах

36. Структура HTTP-ответа

Включает:
• строку состояния (версия протокола, код состояния, текст состояния),
• заголовки (дополнительная информация о бэкенде и типе данных для фронтенда.),
Общие заголовки содержат параметры, передаваемые
как в запросе, так и ответе.
Заголовки ответа позволяют серверу передавать об
ответе дополнительную информацию, которую нельзя
поместить в строку состояния.
Например:
Server — какое ПО использует сервер, чтобы обработать
запрос и сформировать ответ,
Location — точное указание местоположения ресурса.
Заголовки сущности задают характеристики
контента в теле.
Например, Content-Type — тип данных в ответе.
• тело сообщения
(результат выполнения запроса).

37. 5.DevTools 

5.DevTools
Tools for Web Developers —
инструменты разработчика,
доступны в браузерах.
В Chrome — «Просмотреть код». Или используй
сочетание клавиш: для Windows — Ctrl+Shift+i
Во вкладке Network (Сеть) просматривают запросы
фронтенда и ответы бэкенда.

38. DevTools Сеть 

DevTools Сеть
• Настройки
• Фильтры
• Скорость загрузки
• Список запросов и
ответов

39. DevTools Сеть

Сначала открываем DevTools, а только потом нажимаем кнопочку рассчитать

40. Изменения в веб-приложениях

ИНТЕРФЕЙС
Два вида интерфейсов:
• графический пользовательский интерфейс — GUI
(Graphical User Interface — «графический пользовательский
интерфейс»)
• интерфейс командной строки — CLI
(Command Line Interface — «интерфейс командной строки»)
ЛОГИКА
ФРОНТЕНДА
Программный код, который написал фронтенд-разработчик по
требованиям, которые определяют как элементы интерфейса
реагируют на действия пользователя:
• элементы меняют состояние
• элементы проверяют что-либо(валидация)
• выполнение операций на стороне фронтенда
ЛОГИКА
БЭКЕНДА
Программный код, который написал бэкенд-разработчик.
• проверка, что данные из запроса фронтенда соответствуют
требованиям (валидация API)
• выполнение операций и вычислений на стороне бэкенда.

41. 6.Кроссплатформенное тестирование

Платформы — типы устройств, с которых
пользователь работает с приложением.
Платформы бывают двух типов:
• Десктопная — компьютеры и ноутбуки.
• Мобильная — смартфоны и планшеты.
• Приложение адаптируется под разные платформы для удобства
пользователей. Дизайнеры разрабатывают разные макеты под разные
платформы.
• Тестировщики сравнивают интерфейс с разными макетами и тестируют
отдельно

42. Кроссплатформенное тестирование

Осуществляются проверки на:
• соответствие пользовательского интерфейса макету;
• функциональность работает так, как описано в требованиях.
Набор ОС и устройств чаще всего прописан в требованиях к
разрабатываемому приложению
Если нет, то ищем:
• у менеджера,
• локальная статистика приложения,
• статистика региона,
• глобальная статистика.

43. Кроссбраузерное тестирование

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

44. Кроссбраузерное тестирование

Кроссбраузерное тестирование нужно
проводить, если были доработки или
изменения в вёрстке.
Изменение
Где тестировать
Вёрстка
Во всех поддерживаемых браузерах
Логика
В одном поддерживаемом браузере
Логика и вёрстка
- Логику — в одном из поддерживаемых браузеров
- Вёрстку — во всех поддерживаемых браузерах

45. Кроссбраузерное тестирование

Где тестировать?
Браузеры и их версии для
тестирования указаны в
требованиях
Если нет, то узнать:
• у менеджера,
• локальная статистика,
• глобальная статистика

46. Кроссбраузерное тестирование

Некоторые браузеры используют один и тот же движок,
т.е. логика отображения у них одинаковая
Браузерный движок — это программа внутри браузера,
которая отображает веб-страницы и её элементы.
Спецефические баги возникают только в одном браузере
и не воспроизводятся в других.
Движки, их разработчиков и обладателей:
• Blink: Google
• Gecko: Mozilla
• WebKit: Apple
• EdgeHTML: Microsoft

47. Сервисы для кроссбраузерного тестирования

Тестирование возможно без установки браузеров и наличия
различных устройств. Для этого существует ряд сервисов:
• LambdaTest
• Cross Browser Testing
• BrowserStack
• Sauce Labs
• Browserling
и др.
https://crossbrowsertesting.com/freetrial

48. Тестирование адаптивности

При разработке веб-приложения создают 2 версии: десктопная и
мобильная, при этом их делают адаптивными, поскольку устройств
много.
Адаптивность — это способность приложения подстраиваться под
экраны с разными разрешениями.
Разрешение экрана — это размер изображения на экране в пикселях.

49. Тестирование адаптивности

2 подхода к верстке под разные разрешения:
респонсивный дизайн (респонсив) адаптируется к ширине экрана в
любой его точке. Такую вёрстку ещё называют «отзывчивой» или
«резиновой» — макет тянется во все стороны без резких скачков в
изображении.
•адаптивный дизайн (адаптив) используются специально заданные
точки — брейк-поинты, которые дизайнер задаёт на макете, а
разработчик расставляет в коде. Когда ширина экрана приближается к
каждой из них, то дизайн перестраивается под новую ширину.

50. Тестирование адаптивности

Проверяется как верстка подстраивается под устройства с разными
разрешениями и изменение окна браузера и соответствует ли это макетам.
Где проверяем?
- Разные устройства(смартфоны,
планшеты, ПК)
Toggle Device Toolbar (встроен в
DevTools) — имитирует разрешения и
ориентацию экрана мобильных устройств.
Некоторые действия проверить в DevTools нельзя (например,
как на вёрстку влияет встроенная клавиатура)

51. Матрица поддерживаемых окружений

52. Cookie

7. Технологии хранения данных
Cookie
- это одна из технологий хранения данных Вебприложения
Cookie (куки, печенье) — данные, которые хранятся на
устройстве пользователя. Эти данные приходят с
сервера и сохраняются на компьютере или
смартфоне, а когда используешь приложение
повторно — снова передаются на сервер.

53. Cookie

Куки — это небольшие текстовые файлы. Их можно
просматривать прямо в браузере.

54. Cookie

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

55. Просмотр файлов Cookie

• DevTools (Ctrl+Shift+i)
• кладка Application
(Приложение)
• → «Storage»
(Хранилище)
• → «Cookies» (Файлы
куки)
• → URL приложения.

56. Local Storage

— хранилище данных, которое
встроено в браузер. Оно отличается
от кук: данные из Local Storage не
передаются на сервер, их использует
только клиентская часть
приложения, они не пропадают даже
при обновлении страницы.

57. Просмотр Local Storage

• DevTools (Ctrl+Shift+i)
• кладка Application
(Приложение)
• → «Storage» (Хранилище)
• → «Local Storage» (Локальное
хранилище)
• → URL приложения.
• Очистить: URL выпадающий
список, Clear (Сбросить)

58. Кэш

• Кэш (Cache Storage) — это
данные веб-страниц.
• Они сохраняются на компьютере,
когда ты открываешь
изображения, аудио-, видео-,
CSS-, HTML-, JS-файлы.
• При повторном открытии
страница загрузится быстрее:
браузер возьмёт файлы из кэшхранилища, а не с сервера.

59. 8. Анализаторы трафика

• Сниффер (от англ. sniff — нюхать), или
анализатор трафика — приложение,
которое перехватывает данные (трафик),
передающиеся по сети.
• Это особый инструментарий,
позволяющий тестировщикам
перехватывать и анализировать
запросы, которые проходят через них.

60. Анализатор трафика

•Взаимосвязь между действиями пользователя и отправкой
запроса.
•Быстрее тестировать: со сниффером не нужно перенастраивать
бэкенд, чтобы получить конкретный ответ от него. Можно просто
подменить запрос в инструменте и получить нужный на клиенте
результат.
•Локализовать ошибку. Сниффер позволяет просматривать
запросы и ответы, которые не видны пользователю при обычной
работе.
•Тестировать клиент и сервер раздельно. Например, когда клиент
уже написан, а бэкенд — ещё нет. Тогда нужно настроить

61. Charles

— инструмент для
мониторинга HTTP/HTTPS
трафика. Программа
работает как прокси-сервер
между приложением и
сервером этого приложения.
Charles записывает и
сохраняет все запросы,
которые проходят через к
нему телефон и позволяет их
редактировать.

62. Charles

63. Charles

• ручное изменение ответа от бэкенда, используя Breakpoints для
остановки запроса. Его останавливают и редактировать
содержимое. Чтобы завершить запрос, пользователь должен дать
команду продолжить запрос.
• автоматическая подмена. В Charles есть несколько инструментов,
которые помогут выполнить эту задачу: В Charles есть несколько
инструментов, которые помогут выполнить эту задачу: Rewrite и
Map Local.

64. Посмотреть-почитать

• Простыми словами о «фронтенде» и «бэкенде»: что это такое и как они
взаимодействуют
https://tproger.ru/translations/frontend-backend-interaction/
• Справочник по кодам статуса HTTP
https://yandex.ru/support/webmaster/error-dictionary/http-codes.html
• Обзор всех инструментов разработчика Chrome DevTools
https://habr.com/ru/company/simbirsoft/blog/337116/
• 5 мощных инструментов для кросс-браузерного и визуального тестирования
макетов
https://dev-gang.ru/article/5-moscznyh-instrumentov-dlja-kross-brauzernogo-i-vizualnogotestirovanija-maketov-6oqogc9gje/
• Браузер != Браузерный движок
https://habr.com/ru/post/349512/

65. Посмотреть-почитать

Тестирование верстки
https://quality-lab.ru/blog/layout-testing/
PerfectPixel by WellDoneCode
https://www.welldonecode.com/perfectpixel/
Color Zilla
https://www.colorzilla.com/
Орфограф Артемия Лебедева
https://www.artlebedev.ru/orfograf/
Скорость загрузки сайта: как проверить и увеличить
https://www.ashmanov.com/education/articles/skorost-zagruzki-sajta/
validator.w3.org/
https://gtmetrix.com/
https://languagetool.org/ru/

66. Посмотреть-почитать

• Тестирование трафика с помощью fiddler и charles
https://testmatick.com/ru/testirovanie-trafika-s-pomoshhyu-fiddler-i-charles/
• Charles: незаменимый тул в арсенале QA-инженера
https://habr.com/ru/company/redmadrobot/blog/269109/
• Charles
https://www.charlesproxy.com/download/
После установки и первого запуска необходимо установитьс сертификат
бузопасности Help → SSL Proxying → Install Charles Root Certificate.
• Fiddler
https://www.telerik.com/fiddler