Devtools для тестировщика | devtools QA | применение на практике

В этом видео вы узнаете, как максимально эффективно использовать инструменты DevTools в роли тестировщика. Мы сосредоточимся только на ключевых вкладках, которые часто применяются при тестировании веб-приложений, без лишней информации, чтобы вы могли быстро освоиться и применять полученные знания на практике.
Ссылка на второе видео с дополнением: • Devtools для тестировщ...
Donate на поддержку канала:
карта сбер - 2202 2068 4325 7309
0:00 Начало(вкладка Network)
0:50 Как составить запрос в Postman с помощью Devtools
3:18 Проверка запроса API graphql
4:48 Как определить на чьей стороне ошибка(фронт или бэк)
6:14 Вкладка Console
7:26 Инспектор элементов
8:49 Определение области нажатия
10:06 Фишка при работе с вкладкой Elements
10:42 Инструмент для тестирования на разных разрешения экрана
11:22 Пример бага
11:49 Еще один пример бага
12:26 Замедление интернет-соединения
13:10 Cookie
13:23 Вкладка Security
14:07 Вкладка Lighthouse
#тестировщик #qa #devtools #it

[@igormihaylenko3089]

Блин круто !!! Действительно без воды из-за чего концентрация на получения инфы не теряется и всё понятно, Пожалуйста продолжай снимать в том же духе !!!!!!

[@user-ef5fr7mt8x]

Ну я б не стал такие хвалебные оды петь, я не много понял

[@xbizydown]

Супер классное видео, которое мне очень помогло в понимании того как что и зачем. Спасибо большое!

[@vladimiringiniar1775]

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

[@qa_tech]

Согласен, нужно было добавить и этот вариант. Думаю что для новичков главное это понимание, что именно они делают, используя вариант ctrl+C & ctrl+V вряд ли будет понятно что именно скопировали.

[@vitaliilysenko9790]

Очень полезно было про то, как узнать где ошибка - на front-end или на back-end. Было бы не плохо сделать отдельное видео об этом и привести различные примеры, так сказать углубиться в подробности.

[@qa_tech]

на канале есть несколько видео с поиском и разбором дефектов, kzbin.info/www/bejne/fpW3i6Wtap6Um8U

[@IgorV007]

За одно короткое видео узнал больше, чем за все другие вместе взятые, спасибо)

[@user-eb6db8xh5x]

Прошу продолжайте выпуск видео! Очень информативно без воды!

[@valeriebazlov2295]

Продолжайте такие практические примеры, очень было полезно посмотреть, спасибо!

[@HamZieJam]

Дружище,спвсибо тебе,это лучшее видео по Дев тулс,без воды и много полезной информации.Обычно вообще коментарии не пишу,но тут вырожаю огрумную благодарность!Пожалуйста продожлай делать видео,очень полезные!

[@antolioletto7248]

Интересное видео, интересно было бы более углубленно рассказали про особенности панели разработчика / devtools, типо что из себя представляет все окна где применяется, в каких ситуациях, про степень критичности, крос платформенность и её особенности и какие части ошибки возникают, чем больше задумываешься тем больше вопросов!

[@miss_justice_]

+

[@minicopim]

одно видео более информативное - нежели пол курса где-нибудь в онлайн школе. Спасибо

[@DukeNukem1995]

Четко и без воды👌👌

[@user-ie2gp5lp6n]

Годно. Подчерпнул для себя много новой информации как начинающий тестер. Спасибо!

[@riseofkingdoms6183]

Очень круто объяснил, реальная практика теперь могу часами сидеть практиковать копить портфолио, это как реальный опыт.

[@-lr1rq]

Просто кайф. Без лишней воды. Спасибо!

[@First_black_List]

Добрый день. Не останавливайтесь и продолжайте снимать, пожалуйста. Раскрывайте как можно больше и дельтесь опытом. У Вас определенно качественный контент. Отдельное спасибо за данное видео. Да сейчас по сути весь ютуб стал премиум и монетизировать что-то довольно сложно. Но поверьте когда как не сейчас собирать аудиторию. А это всё, надеюсь лишь временно.)

[@alangaliakberov3577]

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

[@friendlyfire1432]

Лучшее видел на эту тему. Спасибо. Чётко и без воды.

[@sergber93]

Спасибо, очень практическая инфа!Такого не хватало, почти везде поверхностная теория.

[@AutomationCraft]

комментарий в поддержку канала!🔥

[@egoregor943]

Отличное видео. Побольше бы таких с примерами)

[@user-ny9mr5ye1x]

Спасибо! Отличное познавательное видео, буду следить за Вашим каналом)

[@user-bn8xe3tf1r]

Супер! Спасибо!

[@kirillkirillov1317]

Это самое лучшее видео про девтулз для тестировщика, которое я видел)

[@krisv999]

Прекрасное видео, огромное спасибо за объяснения и наглядные примеры!

[@thecutestkitties9989]

Моему восторгу нет предела. ты лучший!

[@nikitaagafonov6283]

Спасибо большое за труд!

[@honkai3360]

Большое спасибо! Это лучшее видео по DevTools на русском)

[@mrsalem8118]

Круто, спасибо!

[@ccy5273]

Большое спасибо, а то уде устал смотреть 40 минутные видео в которых по-факту ничего не сказали

[@irinakishueva726]

Спасибо! Очень полезно👍

[@user-my8en4eu3y]

Крутое видео, спасибо! Очень полезно

[@user-ol4nt8db5d]

Спасибо. Полезно

[@Rustam_Bikmukhametov]

Спасибо за крутые видео на канале! все четко и без воды! капитальный красавчик! подписка, лайки, колокольчики все дела))

[@qa_tech]

😁 спасибо за поддержку канала

[@dmtconst3633]

Круто! Хороший контент!!!

[@eenziti9402]

Ну и по возможности больше видео про тестирования фронт енд и бек энд

[@fromsweden]

Надо Мише показать, сколько у него багов на сайте, может эпл воч подарит 🤣

[@vladislavvasilevskiy2650]

Спасибо за ролик. Подскажи, стоит ли заводить дефект на такой эррор? Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

[@qa_tech]

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

[@eenziti9402]

Обьясни пожалуйста, не понятно что они означают эти консольные ошибки, ну есть и есть, они везде есть, что они означают и на что влияют?

[@oleksandrpozhidayev5399]

Годно!;)

[@Diadema566]

Я не поняла - вы через постмен попытались добавить два товара? Что делает basket.count?

[@qa_tech]

С помощью Postman получал товары из корзины выполняя запрос basket

[@tatianaglushkova7600]

Вопрос по вкладке Network. Как определять какие Headers являются обязательными, если составляешь запрос самостоятельно в Postman и смотришь в Request headers в девтулсах?Пробую методом добавления, пока не придет статус 200. Но ведь API нужно тестировать, а не считать, что она по умолчанию правильно работает. Спасибо.

[@qa_tech]

Не обязательно заморачиваться с обязательными и не обязательными headers, на видео только пример. Есть более простой способ, который к сожалению не указан в видео: 1) перейти в вкладку "Network" 2) нажать правой кнопкой мышки по интересующему запросу 3) навести курсор на пункт "Copy" 4) в выпадающем списке выбрать "copy as fetch" 5) в итоге в буфер обмена будет скопирован API запрос, со всеми headers. По поводу тестирования API, всё верно API необходимо тестировать, а не угадывать, но для этого необходимо знать требования которые предъявлены к этому API. На видео пример, когда нет никакой документации к API, и запрос составляем для нужд тестирования, то есть сохраняем к примеру его к себе в коллекцию для дальнейшего использования. Надеюсь ответил на ваш вопрос.

[@tatianaglushkova7600]

@@qa_tech Очень хорошо ответили, полно. Спасибо вам большое-пребольшое! Буду пробовать, как вы сказали.

[@qa_tech]

Добавил второе видео про devtools, с дополнительными способами экспорта запросов в Postman.

[@tatianaglushkova7600]

@@qa_tech Ураааа!!

[@user-if7qk7ed9d]

А почему ПОСТ запрос, ты же в постмане смотришь сколько товаров в корзине, должно же быть GET или я что-то не понимаю(

[@qa_tech]

В HTTP, GET-запросы предназначены для получения ресурса от сервера, а POST-запросы - для отправки данных на сервер для обработки. Однако, в некоторых случаях, POST-запросы используются для получения данных, и это не является ошибкой или неправильным использованием протокола. Вот несколько причин, почему это может быть сделано: 1. **Безопасность**: GET-запросы отправляют данные в URL-адресе, что может быть небезопасно, если данные содержат конфиденциальную информацию. POST-запросы отправляют данные в теле запроса, что делает их более безопасными. 2. **Ограничения на длину URL**: GET-запросы имеют ограничение на длину URL, которое зависит от браузера и сервера. POST-запросы не имеют таких ограничений, поэтому они могут быть использованы для отправки больших объемов данных. 3. **Формат данных**: POST-запросы могут отправлять данные в различных форматах, таких как JSON, XML, или multipart/form-data, что делает их более гибкими, чем GET-запросы, которые ограничены URL-кодированными данными. 4. **Серверная логика**: В некоторых случаях, серверная логика может требовать, чтобы данные были отправлены в теле запроса, а не в URL-адресе. Например, если сервер использует сложную логику для обработки запросов, он может ожидать, что данные будут отправлены в теле запроса. 5. **RESTful API**: В RESTful API, POST-запросы могут быть использованы для создания новых ресурсов на сервере. В этом случае, данные отправляются в теле запроса, а не в URL-адресе. 6. **Кэширование**: GET-запросы кэшируются браузером и прокси-серверами, что может привести к проблемам с обновлением данных. POST-запросы не кэшируются, поэтому они могут быть использованы, когда данные должны быть получены в реальном времени. В целом, использование POST-запросов для получения данных не является неправильным, если это необходимо для обеспечения безопасности, гибкости или серверной логики. Однако, в большинстве случаев, GET-запросы являются более подходящим выбором для получения данных.

[@Exitoso12]

А если у меня не получилось 2 товара в Body. Сделал все тоже самое вышла цифра 1

[@qa_tech]

Скорее всего вы увеличили количество одного вида товара, необходимо добавить второй товар. К примеру, два ноутбука разных моделей

[@asadflow1245]

А почему ты просто curl не скопировал из браузера и не вставил в постман?

[@qa_tech]

Забыл добавить в этом видео, добавил это в дополнительном ролике kzbin.info/www/bejne/nYa1iWVrpK1mh7c

[@asadflow1245]

@@qa_tech тогда с меня лайк, подписка, колокольчик)

[@qa_tech]

@@asadflow1245 спасибо)

[@Diadema566]

Как вы поняли, что эти хедеры обязательные?

[@qa_tech]

попробовал отправить запрос без них) а вообще на вашем проекте должно быть описание API и требования , на которые вы должны ссылаться при тестировании API

[@Diadema566]

@@qa_tech ПОняла, спасибо. А вы где-то встречали проекты с актуальным свагером и подробными описаниями?)))

[@qa_tech]

@@Diadema566 да, на данный момент работаю на таком проекте, API дока актуальная + требования на все запросы, для всех полей

[@Exitoso12]

Во 2 примере тоже ошибка вышла, Invalid request body

[@qa_tech]

Посмотрите второе видео на канале про devtools, там показан более простой способ формирования запроса в Postman с помощью импорта cUrl из devtools

[@Exitoso12]

@@qa_tech спасибо , попробую

[@Exitoso12]

@@qa_tech Тут не понятно что копировать в body . Во вкладке полезная нагрузка надо скопировать содержимое?

[@qa_tech]

@@Exitoso12 body пустое, вся информация в headers. Попробуй сделать через cURL, то "Правой кнопкой по запросу, который необходимо вытянуть в Postman, дальше выбрать Copy - > Copy as Curl (bash). В Postman нажать import и CTRL + V"

[@Exitoso12]

@@qa_tech Да через curl(bash) получилось , спасибо . Хотел этим способом тоже попробовать правильно сделать