Иногда при тестировании или автоматизации тестирования веб приложения нам нужно посмотреть html код элемента который скрывается по клику либо исчезает по таймауту.
Например, мы хотим посмотреть xpath для pop-up или элементов внутри него на странице Google
При нажатии на инспектор - pop-up закрывается. Это происходит из-за потери фокуса на странице, однако теперь в DevTools есть решение этой проблемы.
Рассмотрим 2 способа.
Старый способ:
1) Через инспектор фокусируемся на родительском элементе (кнопка которая открывает выпадающий список/ pop-up).
2) Затем нужно кликнуть на этот элемент (кнопку) и посмотреть что меняется в инспекторе (это подсвечивается)
3) Теперь нужно поставить брейпоинт на изменяющемся элементе (выбираем элемент и правой кнопкой открываем выбор меню, затем Break on, затем attribute modifications)
4) Теперь при изменении атрибута включается дебагер и исполнение js кода останавливается.
5) Теперь можно посмотреть элементы внутри pop-up
Новый способ:
1) Через инспектор фокусируемся на родительском элементе (кнопка которая открывает выпадающий список/ pop-up).
2) Нам нужна вкладка стили (Styles)
3) На вкладке Styles кликнуть по кнопке :hov, а затем установить чекбокс Emulate a focused page
4) Можно смотреть элементы внутри pop-up
Пишите в комментариях какой способ вам нравится больше.
Поддержать блог можно лайком и комментарием. А если хочется сделать больше, можно кинуть монетку в совиное гнездо.
Если Вам интересно, что еще можно найти на канале QA Helper, прочитайте статью: Вместо оглавления. Что вы найдете на канале QA Helper - справочник тестировщика?
Не забудьте подписаться на канал, чтобы не пропустить полезную информацию: QA Helper - справочник тестировщика
Пишите в комментариях какой пункт было бы интересно рассмотреть более подробно.
Обязательно прочитайте: Что должен знать и уметь тестировщик
Также будет интересно почитать: Вопросы которые задают на собеседовании тестировщикам