IsmagilovQA · January 5, 2022 14:52
diff --git a/gistfile1.txt b/gistfile1.txt
 COURSE [Chrome Dev Tools]

 Arsbatyrov.ru/chrome/main ->
 https://playground.learnqa.ru/chrome/#
 Открыть dev tools -> Command+Option+i


 Вкладка Elements
 Теги
 < tag>
 </a>  - закрывающий элемент
 <input /> , <img /> - поле для ввода, тег картинки не имеет закрывающего тега

 Атрибуты
 href  - URL или URI ссылки
 <a href=“google.com”>Ищи сам</a>
 src - ссылка на картинку
 <img src=“/img/chrome.png”/>
 class - класс, к которому относится элемент

 Структура
 <html> - это подвид XML
 	<head>…</head> - инфо для браузера и индексирующих ботов
 	<body>…</body> - инфо для пользователя
 </html>

 правая мышь и выбрать Edit text  -> если мы хотим изменить что-то (для проверки длины строк или правильного отображения)
 Command + F -> найти текст, CSS selector или XPath в HTML документе

 CSS стили можно добавить в 3 местах:
 1. В HTML доке между тегами <style>…</style>
 2. Внутри атрибута  <img style=…/>
 3. Отдельно <link rel=“stylesheet” href=“/css/style.css”>

 Как сделать невидимым элемент:
 1. Opacity = 0 (сделает прозрачным)
 2. Свойство display = none
 3. Задать нулевой размер (высоту или ширину = 0)
 4. Вынести за границы экрана
 Искать во вкладке Styles (CSS). 
 В этой вкладке есть поле Filter где можно отфильтровать по нужным свойствам.
 Перечеркнутый CSS стиль означает что есть более приоритетный стиль (частный) к этому элементу и применяет именно он.


 Построение локаторов (селекторов) - ссылки на элемент в HTML. (CCS / XPath)
 Как найти локатор?
 1. CSS - При инспектировании элемента мы можем увидеть CCS локатор в сплывающем окне (h1.text-center) 
 2. CSS - Правой мышью -> Copy -> Copy selector (body > div.container > div.header_wrapper > div > div > h1). Удобно посмотреть последовательность всех родительских элементов
 3. XPath - Правой мышью на элементе -> Copy -> Copy XPath (/html/body/div[2]/div[1]/div/div/h1)

 По правой мышки мы можем:
 1. Добавлять и изменять атрибуты
 2. Edit as HTML
 3. Удалить элемент
 4. Копировать элементы HTML, CSS, XPath
 5. Спрятать элемент (сделать невидимым)
 6. Force state (эмулировать состоянии элемента)
 7. Break on - для дебага HTML структуры
 8. Expand recursively/ Collapse children (открывает/закрывает автоматом дерево с вложениями)
 9. Scroll into view - скролить к этому элементу (показывает на экране)
 10. Focus - фокусируется на элементе


 Вкладка Console
 Работает с языком javascript. Javascript исполняется в браузере

 JS ошибки могут быть при:
 1. Загрузка страницы
 2. Выполнение AJAX-запроса к серверу (который происходит без перезагрузки страницы)
 3. Взаимодействие пользователя со страницей (клик и пр)
 4. Выполнение JS события по таймауту

 В консоле будут отображаться JS ошибки. Они могут быть с дефолтным текстом или с текстом который написал программист.

 removeLoader = function () {} - у JS разраьотчика модно спросить как наз функция кот отвечает за отображение/ пропадания блока и потом прописать в консоли чтобы она не пропадала/появлялась. Так проверяется например быстро меняющийся контент.

 Default levels -> уровни логирования.
 Кликнув на шестеренку можно:
 1. hide network (скрыть XHR инфо - AJAX запрос на сервер)
 2. Preserve log - отвечает за сохранение всего лога при релоад страницы
 3. Selected context only - для дебага, отображает только события при введении команд в консоли
 4. Group similar - группирует одинаковые сообщения
 5. Log XML HTTPRequests - логирование AJAX запросов на сервер (завязан на Hide network по сути тоже самое)
 6. Eager evaluation - показывает результат команды до того как мы его исполним
 7. Autocomplete from history - подсказка если уже ранее вводил этот код

 Create live expression (иконка глаза) который будет исполняться 4 раза в секунду. Например выводить текущее время: console.log(new Date). После перезагрузки будет работать. Также можно использовать для вызова функции чтобы словить быстро пропадающие элементы (emoveLoader = function () {} ).

 Поле Filter поможет найти связанные ошибки по общему слову.

 Show console sidebar - поможет посмотреть сгруппированные по видам сообщения.


 Вкладка source
 Вкладка Pages - Источники при загрузки сайта. Откуда приходит контент(видео, картинки и пр.), CSS файлы, JS и т.д.
 В CSS мы можем менять стили на лету и видеть эти изменения сразу же.
 С парвой стороны панель - дебагер для отладки JS кода.
 Вкладка Filesystem - добавить папки и файлы которые будет видны из браузера и доступны для всех (редко применяется и не стоит туда пердавать пароли и прочую конф. инфо).
 Вкладка Overrides - позволяет вносить изменения в дев тулс и сохранять эти изменения, например локально что то изменять и сохранять, при этом при перезагрузки страницы не будут потеряны эти изменения. Полезно когда нужно протестировать что-то (изменить локально) а доступа к исходникам нет (CSS, JS или HTML).
 Вкладка Content scripts - покажет код экстеншенов браузера (плагины) если они у нас есть.
 Вкладка Snippets - можно сохранить снипет - файл с JS кодом который будет доступен на всех страницах для исполнения. Полезно когда мы используем часто какой то JS скрипт, который выключает/включает отображение чего-то и удобно все такие удобные куски кода сохранят в снипете для частого использования. Пример:
 + -> console.log("I am here”)-> Command+S-> правая мышь-> run


 Вкладка Network. HTTP
 Отображает работу страниц с сервером. Любой обмен данными. Можно проанализировать запрос отправляемых данных, код ответа с сервера и полученные данные. Также можно исполнить запрос на сервер в обход нашего сайта изменив какие данные.
 Вкладка All - отображает запросы всех видов
 XHR -  использует запросы HTTP/s напрямую к веб серверу и загружает данные ответа сервера напрямую в вызывающий скрипт. По сути это основные запросы которыми обменивается клиент и сервер
 JS и CSS  - запросы для загрузки файлов JS и CSS
 Img и Media - запросы к картинкам и медиа файлам
 Font - запросы для скачивания кастомных шрифтов
 Doc - запросы на момент инициализации связи сервера и клиента (запрос при вводе в адресную строку и нажимая ентер)
 WS - запросы которые идут по web sockets (передача данных в режиме реального времени).

 Правой мышкой по хедеру можно выставить нужную инфо для отображения (например добавить инфо method - Get, Post и пр.)

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


 Вкладка Network. AJAX. XSS уязвимости
 AJAX запросы - загрузка данных в ходе работы приложения (когда страница уже загружена, AJAX запрос может подгружать данные все время или по потребности). Это удобно чтобы не перегружать страницу повторно, а догружать нужные данные без перезагрузки
 XSS - cross site scripting - внедренный JS код который может вскрыть уязвимость, например некоторые инъекции могут воровать пользовательские данные (в поле ввода можно послать JS скипа который браузер может распознать как настоящий код а не просто текст пользователя). Пример:
 <script>(“XSS is here!”)</script>. Если разработчик предусмотрел необходимые проверки, то это код будет экранирован и восприниматься просто как текст.
 Если на стропе клиента есть защита, то можно также проверить, что на стороне сервера она тоже есть. Для этого используется curl с модифицируемым http запросом и вредным скриптом, который отсылается через консоль. Для этого правой мышью на запросе-> copy curl (for bash). И уже в курле подменяется message на XSS скипа (в --data параметре).

 Правой мышью на запросе - можно очистить куки и кэш, сохранять запросы, копировать отдельно хедеры и пр.
 Disable cache чекбокс - чтобы не работать с устаревшими данными
 Preserve log - сохраняет логи между перезагрузками
 Online/Offline/3G - эмуляция соединения
 TimeLine - можно на таймлайне выделить период для отображения запросов только внутри этого периода времени.


 Вкладка Performance
 Нужно чтобы найти узкое место в производительности. Чтобы начать работу нужно включить рекорд - провести нужные манипуляции с сайтом - выкл рекордер -> проанализировать результат.
 Loading - время загрузки
 Scripting - время работы скриптов
 Rendering - время расположения слоев и блоков
 Painting - раскрашивание слоев и блоков
 Idle - бездействие (простой, например ожидание ответа от сервера)

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

 После сбора или выявления проблемных мест в статистике, можно сохранить результат и передать деву на анализ и исправление - для этого нужно нажать Save profile (иконка со стрелочкой вниз). Разработчик может сделать Load profile (стрелочка вверх) и проанализировать в чем проблема.

 Также можно проверить сайт в условиях ограниченного интернета (или вообще потеря интернета) и CPU -> шестеренка справа-> и выбираем показатели network и CPU.


 Вкладка Application
 Нужна для отображения внутренней информации нашего веб приложения, где приложение хранит инфо о пользователе.
 Cookies - самый распространенный способ хранения инфо о пользователе. Это по сути небольшие текстовые файлы в которых браузер записывает данные с посещенных вами сайтов, по сути запоминают пользователя, чтобы не переспрашивать логин и пароль уже посещенного сайта. Имею имя, значение, срок жизни, домен. Главная отличительная черта - его значение всегда передается на сервер.

 Еще один способ хранения инфы это Session storage и Local storage.
 Local storage не передает свои значения на сервер (статистика например, которую не нужно передавать на сервер)
 Session storage - хранит инфо только для текущей вкладки и также не передает данные на сервер.
 XSS инъекции также можно передавать для куки, локал и сесион стораджей (но они не так распространены, так как требуют чтобы юзер сам подложил себе эти скрипты каки-либо способом).

 При нажатии на Clear Storage мы можем скопом выбрать что удалить.

 Еще один способ хранения данных это Cache. Данные для него формируются автоматически браузером. Он также не передается на сервер и хранится ограниченное время.

 IndexedDB и Web SQL - хранение данных во внешних базах данных. Редко применяется для хранения клиентских данных.

 Всю по настоящему важную инфо стоит хранить на стороне сервера.


 Вкладка Security
 Можно проверить безопасное ли соединение и найти незащищенное соединение.
 Нужно обращать внимание на то что помечено красным. Возможно есть проблемы с тем что не установлен SSL сертификат (на сервере должен быть установлен этот сертификат что означает по сути цифровую подпись сайта.)б которое обеспечивает шифрованное соединение между пользователем и сайтом. Также SSL сертификат подтверждает подлинность сайта.

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


 Вкладка Device Bar
 Нужна для отображения и проверки сайта на мобильных размерах, проверка верстки.
 Для выбора большего количества девайсов нужно перейти в меню(справа в тевтоном тулз три точки)->devices-> тут выбрать или добавить свой кастовый девайс с нужными размерами.

 Реcпонсив -> Сверху и сбоку есть серая панель, нажав на которую или потянув можно поставить нужный размер для проверки респонсива.

 Также в меню можно выставить скорость соединения с интернетом. Изменить или добавить можно в меню -> more tools -> network conditions.

 Также можно эмулировать некоторые сенсоры - акселерометр и GPS геолокацию. Menu-> more tools -> Sensors

 Также можно подключить Андройд устройство и отображать его у нас в дев тулсе. Подключаем устройство через кабель - settings -> more tools -> remote devices (в settings должна стоять галочка discover USB devices). Теперь мы можем на устройстве перейти в браузер и ввести нужный URL и после этого нужно нажать на кнопку Inspect. По сути мы работаем в dev tools только через реальный девайс.


 Network conditions
 Menu-> More tools -> Network conditions
 По параметру User-Agent сервер определяет особенности веб клиента. С помощью этого параметра можно проверить что Гугл или Яндекс бот (googlebot) нормально индексирует сайт.

 Также здесь можно включить network  throttling  (замедление интернета), также можно добавить кастомый профиль.
	COURSE [Chrome Dev Tools]

	Arsbatyrov.ru/chrome/main ->
	https://playground.learnqa.ru/chrome/#
	Открыть dev tools -> Command+Option+i


	Вкладка Elements
	Теги
	< tag>
	</a> - закрывающий элемент
	<input /> , <img /> - поле для ввода, тег картинки не имеет закрывающего тега

	Атрибуты
	href - URL или URI ссылки
	<a href=“google.com”>Ищи сам</a>
	src - ссылка на картинку
	<img src=“/img/chrome.png”/>
	class - класс, к которому относится элемент

	Структура
	<html> - это подвид XML
	<head>…</head> - инфо для браузера и индексирующих ботов
	<body>…</body> - инфо для пользователя
	</html>

	правая мышь и выбрать Edit text -> если мы хотим изменить что-то (для проверки длины строк или правильного отображения)
	Command + F -> найти текст, CSS selector или XPath в HTML документе

	CSS стили можно добавить в 3 местах:
	1. В HTML доке между тегами <style>…</style>
	2. Внутри атрибута <img style=…/>
	3. Отдельно <link rel=“stylesheet” href=“/css/style.css”>

	Как сделать невидимым элемент:
	1. Opacity = 0 (сделает прозрачным)
	2. Свойство display = none
	3. Задать нулевой размер (высоту или ширину = 0)
	4. Вынести за границы экрана
	Искать во вкладке Styles (CSS).
	В этой вкладке есть поле Filter где можно отфильтровать по нужным свойствам.
	Перечеркнутый CSS стиль означает что есть более приоритетный стиль (частный) к этому элементу и применяет именно он.


	Построение локаторов (селекторов) - ссылки на элемент в HTML. (CCS / XPath)
	Как найти локатор?
	1. CSS - При инспектировании элемента мы можем увидеть CCS локатор в сплывающем окне (h1.text-center)
	2. CSS - Правой мышью -> Copy -> Copy selector (body > div.container > div.header_wrapper > div > div > h1). Удобно посмотреть последовательность всех родительских элементов
	3. XPath - Правой мышью на элементе -> Copy -> Copy XPath (/html/body/div[2]/div[1]/div/div/h1)

	По правой мышки мы можем:
	1. Добавлять и изменять атрибуты
	2. Edit as HTML
	3. Удалить элемент
	4. Копировать элементы HTML, CSS, XPath
	5. Спрятать элемент (сделать невидимым)
	6. Force state (эмулировать состоянии элемента)
	7. Break on - для дебага HTML структуры
	8. Expand recursively/ Collapse children (открывает/закрывает автоматом дерево с вложениями)
	9. Scroll into view - скролить к этому элементу (показывает на экране)
	10. Focus - фокусируется на элементе


	Вкладка Console
	Работает с языком javascript. Javascript исполняется в браузере

	JS ошибки могут быть при:
	1. Загрузка страницы
	2. Выполнение AJAX-запроса к серверу (который происходит без перезагрузки страницы)
	3. Взаимодействие пользователя со страницей (клик и пр)
	4. Выполнение JS события по таймауту

	В консоле будут отображаться JS ошибки. Они могут быть с дефолтным текстом или с текстом который написал программист.

	removeLoader = function () {} - у JS разраьотчика модно спросить как наз функция кот отвечает за отображение/ пропадания блока и потом прописать в консоли чтобы она не пропадала/появлялась. Так проверяется например быстро меняющийся контент.

	Default levels -> уровни логирования.
	Кликнув на шестеренку можно:
	1. hide network (скрыть XHR инфо - AJAX запрос на сервер)
	2. Preserve log - отвечает за сохранение всего лога при релоад страницы
	3. Selected context only - для дебага, отображает только события при введении команд в консоли
	4. Group similar - группирует одинаковые сообщения
	5. Log XML HTTPRequests - логирование AJAX запросов на сервер (завязан на Hide network по сути тоже самое)
	6. Eager evaluation - показывает результат команды до того как мы его исполним
	7. Autocomplete from history - подсказка если уже ранее вводил этот код

	Create live expression (иконка глаза) который будет исполняться 4 раза в секунду. Например выводить текущее время: console.log(new Date). После перезагрузки будет работать. Также можно использовать для вызова функции чтобы словить быстро пропадающие элементы (emoveLoader = function () {} ).

	Поле Filter поможет найти связанные ошибки по общему слову.

	Show console sidebar - поможет посмотреть сгруппированные по видам сообщения.


	Вкладка source
	Вкладка Pages - Источники при загрузки сайта. Откуда приходит контент(видео, картинки и пр.), CSS файлы, JS и т.д.
	В CSS мы можем менять стили на лету и видеть эти изменения сразу же.
	С парвой стороны панель - дебагер для отладки JS кода.
	Вкладка Filesystem - добавить папки и файлы которые будет видны из браузера и доступны для всех (редко применяется и не стоит туда пердавать пароли и прочую конф. инфо).
	Вкладка Overrides - позволяет вносить изменения в дев тулс и сохранять эти изменения, например локально что то изменять и сохранять, при этом при перезагрузки страницы не будут потеряны эти изменения. Полезно когда нужно протестировать что-то (изменить локально) а доступа к исходникам нет (CSS, JS или HTML).
	Вкладка Content scripts - покажет код экстеншенов браузера (плагины) если они у нас есть.
	Вкладка Snippets - можно сохранить снипет - файл с JS кодом который будет доступен на всех страницах для исполнения. Полезно когда мы используем часто какой то JS скрипт, который выключает/включает отображение чего-то и удобно все такие удобные куски кода сохранят в снипете для частого использования. Пример:
	+ -> console.log("I am here”)-> Command+S-> правая мышь-> run


	Вкладка Network. HTTP
	Отображает работу страниц с сервером. Любой обмен данными. Можно проанализировать запрос отправляемых данных, код ответа с сервера и полученные данные. Также можно исполнить запрос на сервер в обход нашего сайта изменив какие данные.
	Вкладка All - отображает запросы всех видов
	XHR - использует запросы HTTP/s напрямую к веб серверу и загружает данные ответа сервера напрямую в вызывающий скрипт. По сути это основные запросы которыми обменивается клиент и сервер
	JS и CSS - запросы для загрузки файлов JS и CSS
	Img и Media - запросы к картинкам и медиа файлам
	Font - запросы для скачивания кастомных шрифтов
	Doc - запросы на момент инициализации связи сервера и клиента (запрос при вводе в адресную строку и нажимая ентер)
	WS - запросы которые идут по web sockets (передача данных в режиме реального времени).

	Правой мышкой по хедеру можно выставить нужную инфо для отображения (например добавить инфо method - Get, Post и пр.)

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


	Вкладка Network. AJAX. XSS уязвимости
	AJAX запросы - загрузка данных в ходе работы приложения (когда страница уже загружена, AJAX запрос может подгружать данные все время или по потребности). Это удобно чтобы не перегружать страницу повторно, а догружать нужные данные без перезагрузки
	XSS - cross site scripting - внедренный JS код который может вскрыть уязвимость, например некоторые инъекции могут воровать пользовательские данные (в поле ввода можно послать JS скипа который браузер может распознать как настоящий код а не просто текст пользователя). Пример:
	<script>(“XSS is here!”)</script>. Если разработчик предусмотрел необходимые проверки, то это код будет экранирован и восприниматься просто как текст.
	Если на стропе клиента есть защита, то можно также проверить, что на стороне сервера она тоже есть. Для этого используется curl с модифицируемым http запросом и вредным скриптом, который отсылается через консоль. Для этого правой мышью на запросе-> copy curl (for bash). И уже в курле подменяется message на XSS скипа (в --data параметре).

	Правой мышью на запросе - можно очистить куки и кэш, сохранять запросы, копировать отдельно хедеры и пр.
	Disable cache чекбокс - чтобы не работать с устаревшими данными
	Preserve log - сохраняет логи между перезагрузками
	Online/Offline/3G - эмуляция соединения
	TimeLine - можно на таймлайне выделить период для отображения запросов только внутри этого периода времени.


	Вкладка Performance
	Нужно чтобы найти узкое место в производительности. Чтобы начать работу нужно включить рекорд - провести нужные манипуляции с сайтом - выкл рекордер -> проанализировать результат.
	Loading - время загрузки
	Scripting - время работы скриптов
	Rendering - время расположения слоев и блоков
	Painting - раскрашивание слоев и блоков
	Idle - бездействие (простой, например ожидание ответа от сервера)

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

	После сбора или выявления проблемных мест в статистике, можно сохранить результат и передать деву на анализ и исправление - для этого нужно нажать Save profile (иконка со стрелочкой вниз). Разработчик может сделать Load profile (стрелочка вверх) и проанализировать в чем проблема.

	Также можно проверить сайт в условиях ограниченного интернета (или вообще потеря интернета) и CPU -> шестеренка справа-> и выбираем показатели network и CPU.


	Вкладка Application
	Нужна для отображения внутренней информации нашего веб приложения, где приложение хранит инфо о пользователе.
	Cookies - самый распространенный способ хранения инфо о пользователе. Это по сути небольшие текстовые файлы в которых браузер записывает данные с посещенных вами сайтов, по сути запоминают пользователя, чтобы не переспрашивать логин и пароль уже посещенного сайта. Имею имя, значение, срок жизни, домен. Главная отличительная черта - его значение всегда передается на сервер.

	Еще один способ хранения инфы это Session storage и Local storage.
	Local storage не передает свои значения на сервер (статистика например, которую не нужно передавать на сервер)
	Session storage - хранит инфо только для текущей вкладки и также не передает данные на сервер.
	XSS инъекции также можно передавать для куки, локал и сесион стораджей (но они не так распространены, так как требуют чтобы юзер сам подложил себе эти скрипты каки-либо способом).

	При нажатии на Clear Storage мы можем скопом выбрать что удалить.

	Еще один способ хранения данных это Cache. Данные для него формируются автоматически браузером. Он также не передается на сервер и хранится ограниченное время.

	IndexedDB и Web SQL - хранение данных во внешних базах данных. Редко применяется для хранения клиентских данных.

	Всю по настоящему важную инфо стоит хранить на стороне сервера.


	Вкладка Security
	Можно проверить безопасное ли соединение и найти незащищенное соединение.
	Нужно обращать внимание на то что помечено красным. Возможно есть проблемы с тем что не установлен SSL сертификат (на сервере должен быть установлен этот сертификат что означает по сути цифровую подпись сайта.)б которое обеспечивает шифрованное соединение между пользователем и сайтом. Также SSL сертификат подтверждает подлинность сайта.

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


	Вкладка Device Bar
	Нужна для отображения и проверки сайта на мобильных размерах, проверка верстки.
	Для выбора большего количества девайсов нужно перейти в меню(справа в тевтоном тулз три точки)->devices-> тут выбрать или добавить свой кастовый девайс с нужными размерами.

	Реcпонсив -> Сверху и сбоку есть серая панель, нажав на которую или потянув можно поставить нужный размер для проверки респонсива.

	Также в меню можно выставить скорость соединения с интернетом. Изменить или добавить можно в меню -> more tools -> network conditions.

	Также можно эмулировать некоторые сенсоры - акселерометр и GPS геолокацию. Menu-> more tools -> Sensors

	Также можно подключить Андройд устройство и отображать его у нас в дев тулсе. Подключаем устройство через кабель - settings -> more tools -> remote devices (в settings должна стоять галочка discover USB devices). Теперь мы можем на устройстве перейти в браузер и ввести нужный URL и после этого нужно нажать на кнопку Inspect. По сути мы работаем в dev tools только через реальный девайс.


	Network conditions
	Menu-> More tools -> Network conditions
	По параметру User-Agent сервер определяет особенности веб клиента. С помощью этого параметра можно проверить что Гугл или Яндекс бот (googlebot) нормально индексирует сайт.

	Также здесь можно включить network throttling (замедление интернета), также можно добавить кастомый профиль.