DevTools: Анализ бага, используя Network tab

Рет қаралды 1,809

5 ай бұрын

В этом видео мы разберем, как использовать Dev Tools (Network tab) для анализа бага. Посмотрим на запросы (request) и ответы (response) и разберем, какая информация нам может быть полезна для анализа
=======================
МОИ КУРСЫ НА Udemy:
========================
👩‍🏫 Postman - www.udemy.com/course/postman-... (промокод всегда - это текущий месяц на англ + 2024. Например, AUGUST2024, SEPTEMBER2024...)
👩‍🏫 Git & GitHub - www.udemy.com/course/git-gith... (промокод всегда - это текущий месяц на англ + 2024. Например, AUGUST2024, SEPTEMBER2024...)
========================
ДРУГИЕ ПОЛЕЗНЫЕ ВИДЕО:
========================
🔵 Полный курс по написанию локаторов для web-элементов:
🟡 Плейлист с разборами резюме: • Серия 1. Разбор резюме...
🔵 Сериал про собеседование на позицию Senior Manual QA: • Эпизод 1 из 8: Собесед...
========================
КАК ПОДДЕРЖАТЬ КАНАЛ:
========================
🥰 Подписка на канал, комментарий и лайк - это лучшая поддержка и благодарность за полезности, которыми я делюсь
😍 Распространение информации о моем канале в любых тематических группах - очень большая помощь в развитии моего канала
========================
МОИ КОНТАКТЫ:
========================
⭐ Instagram: / ladybug.qa.courses
⭐ LinkedIn: / lucy-iterman-qa
#тестирование #тестированиепо #bug #devtools #qa #qainterview

Пікірлер: 51

@StanislavRodionov-zr9mg 3 күн бұрын

спасибо большое за этот пример, в голове чуть больше сформировался пазл по использованию этого инструмента)❤

@alenadelon9154 3 ай бұрын

Cпасибо за реальный пример отслеживания откуда растут ноги у бага. Сколько видео было просмотрено до этого и ваше первое, которое оказалось действительно полезным

@ladybug-qa 3 ай бұрын

Спасибо за комментарий! ☺️ Рада, что видео вам понравилось

@user-kx3qs8do6o 5 ай бұрын

Здравствуйте! Спасибо большое, что делитесь своим опытом, и за подобное видео с конкретным примером. Для меня, это супер информативно и полезно для понимания, по сравнению, например, с объяснением просто на словах. Было бы круто побольше таких уроков!👏👍👍

@ladybug-qa 5 ай бұрын

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

@viten100 5 ай бұрын

Супер, Людмила, спасибо!!! Очень рад за начинающих тестировщиков, которые могут увидеть реальный наглядный пример. В ютюбе есть много роликов про дэвтулы, где рассказы типа: ну это нетворк, здесь мы можем увидеть хэдэры, да мы можем хоть до посинения смотреть на них, начинающим тестировщикам нужно знать как с помощью какой-либо табы локализовать баг или как подготовить тестовые условия. Спасибо моему разработчику, который научил меня использовать девтулс по назначению

@ladybug-qa 4 ай бұрын

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

@user-vy8ff1rk1l 3 ай бұрын

Хороший урок, спасибо . Еще интересно было , просмотреть разбор самого ДОМ дерева, и изменение кода.

@ladybug-qa Ай бұрын

Рада, что видео понравилось! 😊

@user-pm1tx2gb8g 28 күн бұрын

Спасибо за пример! Очень доступно. Наглядно демонстрируешь «как» нужно проводить анализ.

@ladybug-qa 20 күн бұрын

🤗🤗🤗

@nataliab.223 4 ай бұрын

Super, will be grateful if you can do more videos like this on how to use the tools in practice. Thank you Lucy.

@ladybug-qa 3 ай бұрын

It’s not that easy - to find the real example of issue that could be used to demonstrate the usage of DevTools but if I do find more, I will record it ☺️

@MissFireVocal 10 күн бұрын

Спасибо!

@ladybug-qa 8 күн бұрын

🤗🤗🤗

@Amarillia31 4 ай бұрын

Супер, хотело бы больше таких видео

@ladybug-qa 4 ай бұрын

Не всегда легко найти баги на готовых действующих продуктах, но когда буду что-то замечать, буду записывать видео ☺️

@olga_k1345 5 ай бұрын

Very informative and useful content. ✍Thank you so much! 🙂

@ladybug-qa 5 ай бұрын

Glad it was helpful! And thank you for the comment! 🤗

@annamay_us 5 ай бұрын

Great video and very useful! Thank you for sharing your experience ❤

@ladybug-qa 5 ай бұрын

Thanks for the comment! Glad, it was useful! 🤗

@marinanikitina7768 4 ай бұрын

Теперь на странице появиласт нотификация: "Notify me". Видимо, исправили баг :-)

@ladybug-qa 4 ай бұрын

Может моё видео посмотрели 😂😂

@maximpopov8279 4 ай бұрын

Полезно

@ladybug-qa 4 ай бұрын

Спасибо за комментарий! Это мотивирует ☺️

@unicoxr5tj417 5 ай бұрын

классно, как база

@ladybug-qa 5 ай бұрын

Спасибо за комментарий! Да, именно для базовых знаний я записала это видео, чтобы было более наглядно, как использовать dev tools

@user-md3nx2mk1g 9 күн бұрын

Спасибо, то что надо! Вот бы увидеть от Вас серию коротких видео по локализации багов веб приложений с использованием девтулс и постмана. Как начинающий тестировщик понимаю необходимость в правильном названии репорта на русском языке. От такого профи как вы, хотелось бы услышать как можно назвать такой баг репорт. «активна кнопка добавления в корзину недоступного товара» - будет хорошим названием ? Спасибо! ❤

@ladybug-qa 8 күн бұрын

Я понятия не имею, как составлять баг репорты на русском. Всегда работала только с англ языком. Но я бы написала «кнопка «Добавить в корзину» активна для недоступного товара». Смысл тот же, но мне на слух так легче понять, чем ваш вариант, когда предложение начинается с прилагательного

@mariadanilova9816 4 ай бұрын

Спасибо за видео. Невнимательно, наверно, я смотрела, но почему в корзине размеры М, в итоге, оказались?

@ladybug-qa 4 ай бұрын

Это потому что я перед тем, как снимать видео, «игралась» и проверяла доступность размеров. И М тогда был доступен. Когда начала снимать видео, корзину не почистила и поэтому там остались ранее добавленные товары

@tmbmari68 Ай бұрын

А можно несколько самых частых или наоборот заковыристых ошибок так разобрать? Уж очень полезно

@ladybug-qa Ай бұрын

Я бы с радостью, но ошибки на продакшене не так легко находить, чтобы снимать их на видео. Ну а свой рабочий продукт я снимать не могу

@kyoto5407 27 күн бұрын

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

@ladybug-qa 20 күн бұрын

Да, согласна, но если никаких ошибок не было «до» финального шага, то я сторонник чистить консоль, чтобы видеть только релевантные запросы для последнего шага, приводящего к ошибке

@katerynase 23 күн бұрын

А есть ли смысл писать в описании баг репорта, что через dev tools отображается ошибка и приложить скриншот с dev tools страницей и log files ?

@ladybug-qa 20 күн бұрын

Конечно! Скриншот можно приложить, но более полезно будет скопировать текст ошибки и вставить в баг репорт. Лог файл я прикрепляю, если девелоперы просят, но есть команды, в которых лог файл - это обязательный атрибут бага

@lucy_bb 5 ай бұрын

Що це за скааарб? 😍 Отримала насолоду від відео, а потім ще сама поклікала і дивно, але тільки на цьому товарі знайшла цю помилку 😳 наскільки я зрозуміла вся проблема в тому самому «result : true» - цей рядок є по дефолту у всіх розмірів, хоча у тих, що «out of stock» не має бути цього рядка 🤔 як ви знаходите такі дефекти? Дуже цікаво)) Ну і чекаю і теоретичне відео про response/request, і практичне відео про вкладку «network» і все інше 😌

@ladybug-qa 5 ай бұрын

Клас! Дуже приємно, що відео викликало зацікавленність і ви самостійно ще поклацали сайт 🤗 Знаходити дефекти на існуючих сайтах не легко і спеціально я це не роблю, бо можна так і день витратити і нічого не знайти :) конкретно цей баг просто випадково натрапився і був дуже доречний ☺️

@lucy_bb 5 ай бұрын

@@ladybug-qa доречі як добре, що я вночі все поклацала, бо зранку вже бага не було на сайті 😎 Ще раз дякую за відео і з нетерпінням чекаю нові

@ladybug-qa 5 ай бұрын

@@lucy_bb о, цікаво! Я не перевіряла сьогодні :) але бачу, що для інших товарів недоступні розміри сірі та недоступні, щоб обрати. Швидко вони пофіксили :)

@vyacheslavpotapov4766 5 ай бұрын

Есть вопрос: а не должны ли мы тестировать на последней версии сайта? а у вас браузер обновлён, но не перезапущен) Хотя с другой стороны не все пользователи могут обновляться

@ladybug-qa 5 ай бұрын

Это и есть последняя версия сайта :) это production для H&M, новее версия - это только на их тестовом инвайроменте, но к нему есть доступ только у сотрудников IT отдела :) Что касается последней версии браузера, то, как вы правильно заметили, сайт должен работать для всех пользователей на любых браузерах, и их версиях

@vyacheslavpotapov4766 5 ай бұрын

@@ladybug-qaя оговорлся ,версия браузера. в правом верхнем углу у хрома

@ladybug-qa 5 ай бұрын

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

@IgorV007 5 ай бұрын

Судя по тому что в консоли нет ошибок, то это такой функционал. А с точки зрения Юзер Экспириенса - то не хорошо: 1) нет отображения остатков товара при загрузке страницы (сделали бы автоматический запрос в базу), 2) нет внятной понятной нотификашки об отсутствии товара (на 2 сек чёрная маленькая реально еле уловима взглядом. Явная не доработка продактов!

@ladybug-qa 5 ай бұрын

То, что в консоли нет ошибок - это не говорит об отсутствии ошибки.И все же это была ошибка, так как на следующий день я уже не могла воспроизвести этот баг и для других товаров недоступные цвета были disabled 🤷‍♀️

@IgorV007 5 ай бұрын

@@ladybug-qa А, на других товарах было видно доступность товара, это всё меняет) Тогда точно баг!

@ladybug-qa 5 ай бұрын

@@IgorV007 а сейчас для того товара, что на видео, нет ни одного доступного размера. Все размеры серые и некликабельные. Так что, что-то все же пошло не так у H&M в тот вечер, когда я записывала видео :)

@IgorV007 5 ай бұрын

@@ladybug-qa Могу конечно ошибаться, но судя по тому что при попытке добавить товар приходила ерор нотификашка, значит бек отрабатывал и давал корректный ответ по остаткам. А то что сразу не было видно при загрузке страницы, скорее всего не уходил запрос с фронта. Т.е. баг был на фронте! Или как вариант, товар был в резерве (другой пользователь оформлял покупку и т.п.) и остаток отдался при загрузке страницы, а потом при добавлении его уже не было в остатке. Так бывает в онлайн магазинах) Всё опять же зависит от проекта и как настроен клиент-сервер)

@ladybug-qa 4 ай бұрын

@@IgorV007 полностью с вами согласна! Не работая на этом продукте, можно только гадать, что там пошло не так. Но да, мне тоже кажется, что это проблема фронтенда была