DevTools Google

Ctrl Shift I
Тестирование адаптивной верстки
В меню инструмента разработчика нажать на выпадающий список, появится возможность
выбора положения окна разработчика. Doc Side
1. Адаптация под различные разрешения экранов.
Toggle Device Toolbar
С противоположной стороны есть выбор устройства, для которого нужно проверить
отображение сайта. мобильная версия или десктопная.
Responsive позволяет задать разрешение экрана
Вместо него можно выбрать устройство с помощью Edit
Курсор меняется на тачпад и эмулирует поведение мобильных устройств. Также можно
поменять ориентацию экрана.
Online с помощью данной вкладки мы можем эмулировать качество сигнала.
Во вкладке Console представлены сбои и ошибки, некоторые из них можно открыть и
посмотреть в каком файле и на какой строке ошибка:
TypeError: Cannot read property 'length' of undefined at s.check (d-5ee41f14.js:5) at
(index):339 at (index):448
2. Network ( упрощенная версия снифера трафика, мониторинг запросов Fiddler)
Status
1** - информационные уведомления
2** - успешный статус запроса
3** - перенаправление запроса
4** - ошибка на стороне клиента
5** - ошибка на стороне сервера.
pending – выполняющийся запрос, если какой-то запрос долго висит в таком статусе,
значит данные, которые он подтягивает имеют большой объем, либо не может связаться с
сервисом, предоставляющим эти данные.
Если планируем добавить в багрепорт можн встать на запрос и выбрать в списке опцию
скопировать адрес или ответ.
Также можно скопироват всю сессию и выгрузить в формате HAR. после этого можно
очистить всю сессию во вкладке Network и загрузить файл HAR для просмотра.
Copy as a fetch
Type – информация о типе загруженного документа, тип выполняемого файла.
можно нажать на файл и просмотреть его выбрав в списке “Open in new tab”
Initiator – фал и номер строки, который инициировал данный запрос
Size – размер файла
Time – время на обработку запроса
Сортировать можно по любому столбцу, кликнув на его название.
Также возможна сортировка по типу обрабатываемых документов + можно скрыть все
ссылки Hide data URLs.
Также в этой вкладке есть эмуляция подключений: Online
Чтобы проверить скорость загрузки при открытом devtools можно кликнуть правой
кнопкой мыши на перезегрузку и выбрать способ, жесткую перезагрузку или жесткую
перезагрузку с очисткой кеша.
3. Elements
Код страницы и стили.
В меню девтулс можно нажать на стрелку, это позволит исследовать код интересующего
элемента основной страницы . во вкладке стилей найти элемент по характеристикам и
изменить его.
во вкладке HTML можно на интересующем элементе нажать на троеточие и выбрать
скопировать вставить, так можно оценить каким образом будут отображаться слишком
длинные строки. позволит оценить элемент бес использования сторонних сервисов для
генерации данных.
4. Performance (отвечает за производительность)
отметить чек-боксы Screenshots Memory и нажмем на запись (черая точка слева в меню)
в результате операции запускается профайлинг, т.е. выполняется перезагрузка страницы и
в это время составляются метрики о том, какая нагрузка осуществляется на систему.
Можно нажать на красный значок или на кнопку Stop, что прервать операцию или
дождаться ее завершения.
Summary показывает общее время, потраченное на загрузку каких-либо элементов.
Idle – бездействие.
выше в строке main можем посмотреть какие слои были загружены. какие изображения
отображались, какие запросы выполнялись и за какой промежуток времени. в строке
Network можно посмотреть какие запросы были выполнены.

можно запустить запись профайлинга и перезагрузить страницу, также возможно

выгрузить профайл, очистить и загрузить.
если страница медленно грузится, можно выгрузить профайл и приложить в багрепорт.
5. Application (информация о хранимых элементов)
Содержит информацию о хранилищах данных Storage, локальком и сессионном.
информацию о куки (т.е. авторизации, например).
 6. Animation (зайти в настройки и добавить)
Customize and control devtools -> more tools -> Animation
обновляем страницу, наводим на интересующий элемент, появляется информация о
выполняемой анимации во вкладке.
проверить ошибку на момент наличия загрузки анимации, посмотреть замедленно.
можно отследить излишнюю аникацию.
7. Console в фаейфокс имеет следующие фичи:
console.time(“timer1”) начнет отсчет времени для отслеживания процесса
console.timeend(“timer1”) выдаст результат в миллисекундах .
document.designMode = ‘on' позволит править текст прямо на страницы, для оценки
отображения.
document.designMode = 'off’
во вкладке Network можно править запросы и повторно отправлять.
POSTMAN
Postman предназначен для проверки запросов с клиента на сервер и получения ответа от
бэкенда.
клиент  - это получатель сервера или тот, который запрашивает конкретную услугу в
системе типа сервера. В большинстве случаев клиент располагается на другом
компьютерном терминале, доступ к которому возможен по сети.  Большинство
клиентов - это простые приложения или даже целая сложная система, которая
получает доступ к определенным сервисам через сервер. Тонкий клиент
Это клиентская программа с минимальной функцией, которая использует только ресурсы,
предоставляемые хост-компьютером или сервером. Его работа довольно проста: отобразить
результаты, которые генерирует сервер. Все, что ему нужно, это сервер для выполнения
тяжелой подъема (который является обработкой). Тонких клиентов можно рассматривать как
услугу по отношению к клиентам через пользовательский интерфейс, который обслуживается
для них.

Толстый или толстый клиент

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

Веб-сайты работают либо на стороне клиента, либо на стороне сервера, причем клиентская
сторона обычно называется front-end, а серверная - back-end. Клиент этого веб-сайта сначала
обращается к веб-браузеру, а затем просматривает его. В большинстве случаев языки
кодирования, предназначенные для создания веб-сайтов, работают либо на сервере, либо на
стороне клиента, что в значительной степени зависит от того, как они работают.
Веб-сервер
По сути, это система, которая обрабатывает запросы получателя, а также предоставляет
различные формы содержимого веб-страниц через протокол HyperText Transfer Protocol
(HTTP) и отправляет файлы по протоколу FTP (File Transfer Protocol). Как только пользователь
вводит URL-адрес в адресной строке браузера, веб-сервер будет посылать запрос в то место,
где сохраняется домен. Затем запрашиваемая информация будет доступна и предоставлена
хост-сервером. Обработка и предоставление веб-страницы получателю (клиенту) является
основной функцией веб-страницы.

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

https://habr.com/ru/company/kolesa/blog/351250/
Открытый API rest countries https://restcountries.eu/
«Application Programming Interface» (интерфейс программирования приложений,
программный интерфейс приложения).  — служит интерфейсом между программами
и облегчает их взаимодействие. интерфейс, с помощью которого приложения общаются
друг с другом.

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

с API удалённого сервера. API — это составляющая часть сервера, которая получает запросы
и отправляет ответы.

Варианты построения API:

 REST не протокол, подход к построению API Пример реализации RESTful: JSON

через HTTP

REST расшифровывается как REpresentational State Transfer. Это был термин,

первоначально введен Роем Филдингом (Roy Fielding), который также был одним
из создателей протокола HTTP. Отличительной особенностью сервисов REST
является то, что они позволяют наилучшим образом использовать протокол HTTP.

SOAP протокол Пример реализации SOAP: XML поверх SOAP через HTTP

SOAP (Simple Object Access Protocol) является стандартизированным протоколом

передачи сообщений между клиентом и сервером. Обычно он используется совместно с
 HTTP(S), но может работать и с другими протоколами прикладного уровня (например,
SMTP и FTP).


 Специфика SOAP — это формат обмена данными. С SOAP это всегда SOAP-
XML, который представляет собой XML, включающий:
— Envelope (конверт) – корневой элемент, который определяет сообщение и
пространство имен, использованное в документе,
— Header (заголовок) – содержит атрибуты сообщения, например:
информация о безопасности или о сетевой маршрутизации,
— Body (тело) – содержит сообщение, которым обмениваются приложения,
— Fault – необязательный элемент, который предоставляет информацию об
ошибках, которые произошли при обработке сообщений. И запрос, и ответ
должны соответствовать структуре SOAP.

API социальных сетей - это вполне типичные примеры реализации REST API.

REST (RESTful) - это общие принципы организации взаимодействия

приложения/сайта с сервером посредством протокола HTTP. Особенность REST в
том, что сервер не запоминает состояние пользователя между запросами - в каждом
запросе передаётся информация, идентифицирующая пользователя (например,
token, полученный через OAuth-авторизацию) и все параметры, необходимые для
выполнения операции.

Всё взаимодействие с сервером сводится к 4 операциям (4 - это необходимый и

достаточный минимум, в конкретной реализации типов операций может быть
больше):
1. получение данных с сервера (обычно в формате JSON, или XML)
2. добавление новых данных на сервер
3. модификация существующих данных на сервере
4. удаление данных на сервере

Операция получения данных не может приводить к изменению состояния сервера.

Для каждого типа операции используется свой метод HTTP-запроса:

1. получение - GET
2. добавление - POST
3. модификация - PUT
4. удаление - DELETE

Т.е. :

GET-запрос /rest/users - получение информации о всех пользователях

GET-запрос /rest/users/125 - получение информации о пользователе с id=125
POST-запрос /rest/users - добавление нового пользователя
PUT-запрос /rest/users/125 - изменение информации о пользователе с id=125
DELETE-запрос /rest/users/125 - удаление пользователя с id=125
Импортировать запрос Impost-> Past Raw text можем скопировать запрос из network
плейлист по Postman:
https://www.youtube.com/watch?v=QG8O-Zou0qI&list=PLZqgWWF4O-
zhpYUPLjpe2yfg93s1olElm
1. Навигация в Postman
headerbar – шапка программы
создать новое (запрос, коллекцию, окружение/среда)
Import позволяет импортировать ранее созданные документы,
Runner для запуска раннера, который и производит тестирование наших запросов,
Tab открывает новую вкладку, новое окно постмана или раннера,
панель работы со вкладками, которые можно дублировать, удалять и т.д.
переключение между Workplace
приглашение участников
кнопка обновления статуса,
кнопка для работы с прокси-серверами,
настройки,
уведомления,
возможность поделиться своими API с коммьюнити постмана,
менеджер аккаунта,
возможность купить аккаунт,
кнопка окружение, выбор окружения, в котором вы работаете,
кнопка просмотра и редактирования переменных окружения,
менеджер окружения для создания нового.
внизу кнопка поиска,
кнопка вызова консоли,
выбор варианта отображения с билда на браузерную модель,
скрыть сайдбар,
варианты отображения с одной колонки в 2 и т.д.

sidebar – меню слева

фильтр для поиска запроса,
 история запросов,
коллекции историй запросов, которые мы создавали,
APIs
builder – основная рабочая область
2. Создание запроса, работа в builder
в коллекции или на вкладке +, выбираем метод из списка, указываем URL, нажимаем Save и
отправляем запрос.

во вкладке Body представлен ответ в JSON-формате.

Params

Для запроса можем указать параметры и их значения, которые добавляются в URL-запроса после
вопросительного знака.

параметры можно копировать и изменять после вставки.

Authorization

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

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

3. Headers

заголовки, в этом разделе также есть скрытые, содержит инфу о метаданных из запроса.

4. Body

в теле мы передаем какую-то информацию. например, если запрос подразумевает ввод данных в
форму. нужно выбрать form-data / эти данные заполняются в Body.

для шифрованных данных выбирается тип x-www-curl-encoded

raw сырой формат данных, самый популярный сейчас rest Api и формат передачи JSON

post запрос имеет тело запроса, например, логин пароль передают постзапросом

binary способ передать файл

5. Graph QL

3. Работа с коллекциями в Postman и Markdown

Коллекции позволяют настраивать запросы и переменные в рамках тестирования одного API,

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

Создать коллекцию можно в сайдборе, нажав на New collection.

При создании коллекции указать заголовок, описание или Description можно заполнить с
помощью языка разметки Markdown

# заголовок первого уровня

### заголовок второго уровня

* уровни списка можно делать с помощью табуляции и *

описание коллекции можно править после сохранения и просматривать.

вкладка авторизации позволяет указать токен или ключ для выполнения запросов

вкладка pre-request scripts позволяет добавить скрипты, выполняемые предварительно, перед

запросами

вкладка Tests идентично, выполняется после запроса

вкладка Variables для описания переменных

4. Переменные в Postman

Переменные в постмане бывают нескольких уровней.

1. Создаем окружение, кнопка «глаз» рядом с No Environment -> add

создаем в окружении переменные, указываем значение (исходное или текущее)
Чтобы указать в запросе переменную нужно добавить название и в значение указать
название переменных в фигурной скобке {{person}}
У нас имеется коллекция запросов к разрабатываемым
сервисам. В коллекции адрес сервисов не указываются —
вместо них прописаны подстановки из
переменных: {{service_url}}. В
переменной {{service_url}} коллекции (эта возможность
доступна в бесплатной версии) указано значение по-
умолчанию (адрес демо-стенда, т.к. эту коллекцию могут
использовать все заинтересованные). Каждый в команде в
своём окружении указывает адрес своего сервера для отладки
сервисов. Таким образом достаточно в одном месте
переопределить значение переменной {{service_url}} и
работать с нужным сервисом.

Объекты variables, globals и environment объекта pm хранят
значения переменных из соответствующих scope-ов: из переменных
коллекции, из глобального scope и из переменных окружения.
Приоритеты получения переменной:
1. pm.environment содержит значения переменных, означенных
для окружения,
2. pm.variables содержит значения переменных, означенных для
коллекции,
 3. pm.globals содержит значения переменных, означенных в
глобальном окружении.

То есть в первую очередь переменная ищется в environment, далее

в variables и, в конце, в globals.
2. глобальные переменные универсальны для всех запросов, создть можно там же, нажав на
глаз. чем выше уровень у переменной тем ние ее приоритет. то есть если название
переменной совпадает с переменной среды или окружения то приоритетным будет
значение окружения а не глобальной
3. data переменная задаем внутри коллекции, может быть представлена файлом в
формате .csv со списком значений, которые поочередно будут добавляться в запрос.
подгружается к нам через раннер, предварительно переходим во вкладку запустить
коллекцию. какой то файл со значениями переменной можно подгрузить в окне раннера в
разделе Data -> Select File

когда запускаем коллекцию на проверку (run) можем в диалоговом окне передать какой-то файл

4. локальный уровень создается на уровне скрипта, который мы пишем как предусловие для
всей коллекции, выполняемое до запроса. у нее самый высокий приоритет при создании
проверок

5. Pre-Request Script можно работать с подсказками (шаблонами) в меню справа.

pm.variables.set("person", "111");
пример установка переменной и желаемого значения 111

ранее для окружения значение переменной person по умолчанию было задано 1

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

переменной person со значением 111

1 Создавать переменные на уровне окружения можно в Менеджере переменных (см headerbar)

2 Можно перейти во вкладку Global и создавать переменные в ней

3 Переменные коллекции мы создаем в сайдбаре перейдя в нужную коллекцию -> Edit collection
-> Variables по иерархии выше переменной окружения и ниже переменной глобальной

4 Переменные из файла в раннере (дата-переменные)

5 Локальный уровень скрипта

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

во вкладке Pre-Request Script написать console.log задать переменную

https://www.youtube.com/watch?v=hGmJMeE_ok0

6. Вкладка Tests
пример, как проверить что статус запроса 200
зайти в tests для нашего запроса и использовать подсказку в меню снипетов: Status code: status
code is 200

которая вставит следующий скрипт

pm.test("Status code is 200", function () {
    pm.response.to.have.status(200);
});

после этого запускаем запрос.

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

pm.test("Response time is less than 200ms", function () {
    pm.expect(pm.response.responseTime).to.be.below(200);
});
результат
PASSStatus code is 200
FAILResponse time is less than 200ms | AssertionError: expected 1420 to be below 200

проверили 1 запрос, переходим к созданию тестового пользовательского сценария и проверки

связки запросов

для этого

1 внедряем переменные

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

2 создание Workflow

постман может сказать, какой запрос после текущего выполнить.

внутри теста можем получить значение переменной и задать условите типа if (pm.expect…not.eql
(null)) {postman.setNextRequest (“Create a Playlist”); } else {postman.setNextRequest (null);}

3 запуск коллекции через Collection Runner

4 запуск тестов с Newman – консольная утилита постмана позволяет запускать коллекции через
консоль

экспортируем коллекцию выбрав опцию в выпадающем списке, экспорт произойдет в json файл,
который постман знает как запускать.

также необходимо экспортировать окружение или энвайромент с переменными. скачать можно

во вкладке manage environment

открываем командную строку

пишем название утилиты newman run S tab нажать допишет остальное –e S tab подставится
название среды и коллекции. нажимаем enter

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

7. Тестируем веб-сервисы практика

 Как тестировать API с помощью Postman, SoapUI. Отличия GET и POST
https://www.youtube.com/watch?v=VqjaDULOYOM