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

  • @alenadelon9154
    @alenadelon91543 ай бұрын

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

  • @ladybug-qa

    @ladybug-qa

    3 ай бұрын

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

  • @user-kx3qs8do6o
    @user-kx3qs8do6o4 ай бұрын

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

  • @ladybug-qa

    @ladybug-qa

    4 ай бұрын

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

  • @viten100
    @viten1004 ай бұрын

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

  • @ladybug-qa

    @ladybug-qa

    4 ай бұрын

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

  • @user-vy8ff1rk1l
    @user-vy8ff1rk1l2 ай бұрын

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

  • @ladybug-qa

    @ladybug-qa

    Ай бұрын

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

  • @Amarillia31
    @Amarillia314 ай бұрын

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

  • @ladybug-qa

    @ladybug-qa

    4 ай бұрын

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

  • @user-pm1tx2gb8g
    @user-pm1tx2gb8g22 күн бұрын

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

  • @ladybug-qa

    @ladybug-qa

    14 күн бұрын

    🤗🤗🤗

  • @nataliab.223
    @nataliab.2233 ай бұрын

    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

    @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 ☺️

  • @maximpopov8279
    @maximpopov82794 ай бұрын

    Полезно

  • @ladybug-qa

    @ladybug-qa

    4 ай бұрын

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

  • @MissFireVocal
    @MissFireVocal5 күн бұрын

    Спасибо!

  • @ladybug-qa

    @ladybug-qa

    3 күн бұрын

    🤗🤗🤗

  • @olga_k1345
    @olga_k13454 ай бұрын

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

  • @ladybug-qa

    @ladybug-qa

    4 ай бұрын

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

  • @annamay_us
    @annamay_us4 ай бұрын

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

  • @ladybug-qa

    @ladybug-qa

    4 ай бұрын

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

  • @unicoxr5tj417
    @unicoxr5tj4174 ай бұрын

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

  • @ladybug-qa

    @ladybug-qa

    4 ай бұрын

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

  • @marinanikitina7768
    @marinanikitina77684 ай бұрын

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

  • @ladybug-qa

    @ladybug-qa

    4 ай бұрын

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

  • @user-md3nx2mk1g
    @user-md3nx2mk1g3 күн бұрын

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

  • @ladybug-qa

    @ladybug-qa

    3 күн бұрын

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

  • @mariadanilova9816
    @mariadanilova98164 ай бұрын

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

  • @ladybug-qa

    @ladybug-qa

    4 ай бұрын

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

  • @katerynase
    @katerynase18 күн бұрын

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

  • @ladybug-qa

    @ladybug-qa

    14 күн бұрын

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

  • @tmbmari68
    @tmbmari68Ай бұрын

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

  • @ladybug-qa

    @ladybug-qa

    Ай бұрын

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

  • @kyoto5407
    @kyoto540721 күн бұрын

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

  • @ladybug-qa

    @ladybug-qa

    14 күн бұрын

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

  • @lucy_bb
    @lucy_bb4 ай бұрын

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

  • @ladybug-qa

    @ladybug-qa

    4 ай бұрын

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

  • @lucy_bb

    @lucy_bb

    4 ай бұрын

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

  • @ladybug-qa

    @ladybug-qa

    4 ай бұрын

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

  • @vyacheslavpotapov4766
    @vyacheslavpotapov47664 ай бұрын

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

  • @ladybug-qa

    @ladybug-qa

    4 ай бұрын

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

  • @vyacheslavpotapov4766

    @vyacheslavpotapov4766

    4 ай бұрын

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

  • @ladybug-qa

    @ladybug-qa

    4 ай бұрын

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

  • @IgorV007
    @IgorV0074 ай бұрын

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

  • @ladybug-qa

    @ladybug-qa

    4 ай бұрын

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

  • @IgorV007

    @IgorV007

    4 ай бұрын

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

  • @ladybug-qa

    @ladybug-qa

    4 ай бұрын

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

  • @IgorV007

    @IgorV007

    4 ай бұрын

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

  • @ladybug-qa

    @ladybug-qa

    4 ай бұрын

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

Келесі