DevTools: Анализ бага, используя Network tab
Ғылым және технология
В этом видео мы разберем, как использовать 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
Пікірлер: 50
Cпасибо за реальный пример отслеживания откуда растут ноги у бага. Сколько видео было просмотрено до этого и ваше первое, которое оказалось действительно полезным
@ladybug-qa
3 ай бұрын
Спасибо за комментарий! ☺️ Рада, что видео вам понравилось
Здравствуйте! Спасибо большое, что делитесь своим опытом, и за подобное видео с конкретным примером. Для меня, это супер информативно и полезно для понимания, по сравнению, например, с объяснением просто на словах. Было бы круто побольше таких уроков!👏👍👍
@ladybug-qa
4 ай бұрын
Не всегда удается «отловить» баг на продакшене какого-то продукта, что бы показывать реальные примеры. Но по возможности буду дополнять серию таких видео
Супер, Людмила, спасибо!!! Очень рад за начинающих тестировщиков, которые могут увидеть реальный наглядный пример. В ютюбе есть много роликов про дэвтулы, где рассказы типа: ну это нетворк, здесь мы можем увидеть хэдэры, да мы можем хоть до посинения смотреть на них, начинающим тестировщикам нужно знать как с помощью какой-либо табы локализовать баг или как подготовить тестовые условия. Спасибо моему разработчику, который научил меня использовать девтулс по назначению
@ladybug-qa
4 ай бұрын
Полностью согласна! Очень мало практической информации о применении DevTools. Но чтобы показать примеры, нужно найти баг, а это не так просто на продакшене 🙈 Меня тоже девелопер учил пользоваться девтулз, а в прошлой команде программисты удивлялись, что тестировщик может и статус реквеста посмотреть, и текст ошибки найти 😂😂
Хороший урок, спасибо . Еще интересно было , просмотреть разбор самого ДОМ дерева, и изменение кода.
@ladybug-qa
Ай бұрын
Рада, что видео понравилось! 😊
Супер, хотело бы больше таких видео
@ladybug-qa
4 ай бұрын
Не всегда легко найти баги на готовых действующих продуктах, но когда буду что-то замечать, буду записывать видео ☺️
Спасибо за пример! Очень доступно. Наглядно демонстрируешь «как» нужно проводить анализ.
@ladybug-qa
14 күн бұрын
🤗🤗🤗
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 ☺️
Полезно
@ladybug-qa
4 ай бұрын
Спасибо за комментарий! Это мотивирует ☺️
Спасибо!
@ladybug-qa
3 күн бұрын
🤗🤗🤗
Very informative and useful content. ✍Thank you so much! 🙂
@ladybug-qa
4 ай бұрын
Glad it was helpful! And thank you for the comment! 🤗
Great video and very useful! Thank you for sharing your experience ❤
@ladybug-qa
4 ай бұрын
Thanks for the comment! Glad, it was useful! 🤗
классно, как база
@ladybug-qa
4 ай бұрын
Спасибо за комментарий! Да, именно для базовых знаний я записала это видео, чтобы было более наглядно, как использовать dev tools
Теперь на странице появиласт нотификация: "Notify me". Видимо, исправили баг :-)
@ladybug-qa
4 ай бұрын
Может моё видео посмотрели 😂😂
Спасибо, то что надо! Вот бы увидеть от Вас серию коротких видео по локализации багов веб приложений с использованием девтулс и постмана. Как начинающий тестировщик понимаю необходимость в правильном названии репорта на русском языке. От такого профи как вы, хотелось бы услышать как можно назвать такой баг репорт. «активна кнопка добавления в корзину недоступного товара» - будет хорошим названием ? Спасибо! ❤
@ladybug-qa
3 күн бұрын
Я понятия не имею, как составлять баг репорты на русском. Всегда работала только с англ языком. Но я бы написала «кнопка «Добавить в корзину» активна для недоступного товара». Смысл тот же, но мне на слух так легче понять, чем ваш вариант, когда предложение начинается с прилагательного
Спасибо за видео. Невнимательно, наверно, я смотрела, но почему в корзине размеры М, в итоге, оказались?
@ladybug-qa
4 ай бұрын
Это потому что я перед тем, как снимать видео, «игралась» и проверяла доступность размеров. И М тогда был доступен. Когда начала снимать видео, корзину не почистила и поэтому там остались ранее добавленные товары
А есть ли смысл писать в описании баг репорта, что через dev tools отображается ошибка и приложить скриншот с dev tools страницей и log files ?
@ladybug-qa
14 күн бұрын
Конечно! Скриншот можно приложить, но более полезно будет скопировать текст ошибки и вставить в баг репорт. Лог файл я прикрепляю, если девелоперы просят, но есть команды, в которых лог файл - это обязательный атрибут бага
А можно несколько самых частых или наоборот заковыристых ошибок так разобрать? Уж очень полезно
@ladybug-qa
Ай бұрын
Я бы с радостью, но ошибки на продакшене не так легко находить, чтобы снимать их на видео. Ну а свой рабочий продукт я снимать не могу
Не обязательно, что запросы и вывод в консоли, полученные до воспроизведения бага, не имеют отношения к проблеме
@ladybug-qa
14 күн бұрын
Да, согласна, но если никаких ошибок не было «до» финального шага, то я сторонник чистить консоль, чтобы видеть только релевантные запросы для последнего шага, приводящего к ошибке
Що це за скааарб? 😍 Отримала насолоду від відео, а потім ще сама поклікала і дивно, але тільки на цьому товарі знайшла цю помилку 😳 наскільки я зрозуміла вся проблема в тому самому «result : true» - цей рядок є по дефолту у всіх розмірів, хоча у тих, що «out of stock» не має бути цього рядка 🤔 як ви знаходите такі дефекти? Дуже цікаво)) Ну і чекаю і теоретичне відео про response/request, і практичне відео про вкладку «network» і все інше 😌
@ladybug-qa
4 ай бұрын
Клас! Дуже приємно, що відео викликало зацікавленність і ви самостійно ще поклацали сайт 🤗 Знаходити дефекти на існуючих сайтах не легко і спеціально я це не роблю, бо можна так і день витратити і нічого не знайти :) конкретно цей баг просто випадково натрапився і був дуже доречний ☺️
@lucy_bb
4 ай бұрын
@@ladybug-qa доречі як добре, що я вночі все поклацала, бо зранку вже бага не було на сайті 😎 Ще раз дякую за відео і з нетерпінням чекаю нові
@ladybug-qa
4 ай бұрын
@@lucy_bb о, цікаво! Я не перевіряла сьогодні :) але бачу, що для інших товарів недоступні розміри сірі та недоступні, щоб обрати. Швидко вони пофіксили :)
Есть вопрос: а не должны ли мы тестировать на последней версии сайта? а у вас браузер обновлён, но не перезапущен) Хотя с другой стороны не все пользователи могут обновляться
@ladybug-qa
4 ай бұрын
Это и есть последняя версия сайта :) это production для H&M, новее версия - это только на их тестовом инвайроменте, но к нему есть доступ только у сотрудников IT отдела :) Что касается последней версии браузера, то, как вы правильно заметили, сайт должен работать для всех пользователей на любых браузерах, и их версиях
@vyacheslavpotapov4766
4 ай бұрын
@@ladybug-qaя оговорлся ,версия браузера. в правом верхнем углу у хрома
@ladybug-qa
4 ай бұрын
@@vyacheslavpotapov4766 да, есть ошибки, зависящие от версии браузера, но не думаю, что этот баг относится к этому типу. Конечно, как часть анализа бага можно было попробовать другой браузер или другую версию. Но конкретно для этой ошибки, очень маленькая вероятность, что баг зависел от браузера
Судя по тому что в консоли нет ошибок, то это такой функционал. А с точки зрения Юзер Экспириенса - то не хорошо: 1) нет отображения остатков товара при загрузке страницы (сделали бы автоматический запрос в базу), 2) нет внятной понятной нотификашки об отсутствии товара (на 2 сек чёрная маленькая реально еле уловима взглядом. Явная не доработка продактов!
@ladybug-qa
4 ай бұрын
То, что в консоли нет ошибок - это не говорит об отсутствии ошибки.И все же это была ошибка, так как на следующий день я уже не могла воспроизвести этот баг и для других товаров недоступные цвета были disabled 🤷♀️
@IgorV007
4 ай бұрын
@@ladybug-qa А, на других товарах было видно доступность товара, это всё меняет) Тогда точно баг!
@ladybug-qa
4 ай бұрын
@@IgorV007 а сейчас для того товара, что на видео, нет ни одного доступного размера. Все размеры серые и некликабельные. Так что, что-то все же пошло не так у H&M в тот вечер, когда я записывала видео :)
@IgorV007
4 ай бұрын
@@ladybug-qa Могу конечно ошибаться, но судя по тому что при попытке добавить товар приходила ерор нотификашка, значит бек отрабатывал и давал корректный ответ по остаткам. А то что сразу не было видно при загрузке страницы, скорее всего не уходил запрос с фронта. Т.е. баг был на фронте! Или как вариант, товар был в резерве (другой пользователь оформлял покупку и т.п.) и остаток отдался при загрузке страницы, а потом при добавлении его уже не было в остатке. Так бывает в онлайн магазинах) Всё опять же зависит от проекта и как настроен клиент-сервер)
@ladybug-qa
4 ай бұрын
@@IgorV007 полностью с вами согласна! Не работая на этом продукте, можно только гадать, что там пошло не так. Но да, мне тоже кажется, что это проблема фронтенда была