#devtools #инструменты
Chrome DevTools: тестирование под разными гео

Как сделать?
1. Открыть ДевТулзы в Хроме
2. Вызвать командное меню (Press Command+Shift+P (Mac) и Control+Shift+P (остальные) или три точки и Run command)
3. Выбрать Show Sensors
4. В Geolocation можно выбрать готовую геолокацию/ввести координаты/Location unavailable

Зачем понадобится при тестировании?
- фича или её часть зависят от гео пользователя
- сервис или его часть связаны с определением местоположения пользователя относительно чего-то/кого-то
- фича зависит от таймзоны/локали пользователя
- интерфейс приложения зависит от гео

Подробнее можно прочитать тут.

О других способах тестирования с разными гео и для разных целей есть инфа здесь.

#devtools #инструменты
Тестирование accessibility: Lighthouse

Что понимается под accessibility?
Web accessibility, or eAccessibility, is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed.
То есть речь идёт о доступности вебсайта для людей с ограниченными возможностями и в условиях ограничения параметров сети.

Какие есть способы проверки?
Крутая статья по теме тут.
В ней говорится о разных параметрах, которые можно проверить, (альты у картинок, контрастность текста, ховер при монохроме, язык страницы) и инструментах, которыми стоит воспользоваться. Об одном из таких инструментов я уже писала - это Web Developer.
В конце статьи огромный список источников информации по теме (огроменный!).

Отдельно про Lighthouse
В Chrome DevTools есть встроенный инструмент Lighthouse, в котором есть Аудит доступности.
Описание проверяемых параметров есть здесь.
Важно:
- запускать Лайтхаус лучше в инкогнито (чтобы на результатах не сказался кэш)
- 1) выбираем нужный отчёт - Accessibility, 2) выбираем девайс (Desktop/Mobile), 3) запускаем аудит (Generate report)
- при аудите есть опция троттлинга (вкл/выкл есть в настройках Лайтхауса (нижняя шестерёнка))

#devtools #инструменты
Chrome DevTools > Network: Инвертирование фильтра

Речь пойдёт о полезном чек-боксе в Нетворке, про который многие не знали, - Invert.

Напомню, что вот тут я писала о разнообразии фильтров в Нетворке (если коротко, то искать можно не только по части url).
В связке с этим пригодится чек-бокс Invert, который отобразит все запросы, кроме удовлетворяющих условиям фильтра.

Пример: ввести в поле фильтра "status-code: 404" и отжать чек-бокс Invert. Итого: будут выведены все запросы, кроме запросов со статус-кодом 404.

#devtools #инструменты
DevTools update (Chrome 99 и 100)

С опозданием, но всё же хотелось бы рассказать про доработки в Девтулзах этих версий.

1. Теперь можно троттлить web socket запросы. Выбираем запрос - открываем Messages - выбираем параметры троттлинга (как обычно в панели)
2. Панель Reporting API перестала быть экспериментальной. Говорят, может анализировать запросы - на предмет security violations, deprecated API calls и всякого другого. Как вкрутить и заставить работать, описано тут.
3. Доработки Рекордера и ещё доработки. Писала о нём тут.
4. Доработки панели Перформанс. Теперь отдельно отображают Partially presented frames.

Остальное не показалось мне сильно полезным для тестирования, но вот вам ссылки на полный список изменений версий 99 и 100.

Бонус: говорят, могут быть проблемки из-за 100-ой версии Хрома и ФаерФокса. Подробности здесь

#devtools #инструменты
Chrome DevTools: с чего начать, если раньше не пользовался

1. В первую очередь стоит обратить внимание на Elements, Console, Network, Application и Device Toolbar.

2. Понять для чего может понадобиться каждая из вкладок:

Elements - тут DOM (объектная модель документа), можно найти элемент на странице по локатору, а можно выбрать элемент на странице и посмотреть соответствующий ему фрагмент в DOM.

Console - имеет 2 функции: просмотр логов и выполнение js скриптов. Можно выбрать различные уровни логирования: от ошибок до информационных сообщений.

Network - тут мы видим запросы и ответы на них. Можно выбрать типы запросов (fetch, media, img и тд), фильтровать по разным критериями (урл, тип, вес и тд), искать по телу ответа. Обратите внимание на то, какие данные есть у запросов (имя, метод, размер, хэдер, пэйлоад и тд), посмотрите в ответы (удобнее, через Превью).

Application - тут в первую очередь понадобятcя cookies и local, session storages.

Device Toolbar (иконка телефон+планшет) - в верхней панели. Позволяет симулировать разные девайсы.

3. Что нужно сделать/настроить сразу?
* в Console и Network включить Preserve log (это разные чекбоксы), чтобы не терять логи при переходах между страницами
* открыть DevTools до выполнения проверок. Если открыть после того, как ошибка произошла/запрос отправлен, в Network запросов не будет
* в Network выбрать нужный тип запросов и использовать фильтр, это поможет сократить время на поиск нужного
* в Network же снять галку с чекбокса show overview (нужно редко, а занимает большую часть DevTools)
* настроить расположение DevTools в этом же окне или в отдельном (тык на три точки и выбрать иконку)

4. Важно помнить, что:
* открытые DevTools уменьшают вьюпорт (если надо тестировать вёрстку, закройте их или откройте в отдельном окне)
* полезно ориентироваться не только в DevTools в Хроме, но и в других браузерах (там много общего, но есть и различия, которые стоит изучить заранее).

5. Ответы на все ваши вопросы про DevTools Хрома есть тут.

(простите, что тут нет картинок - они сжирают колво букв в сообщении)

#devtools #инструменты
DevTools update (Chrome 101)

А вот и свеженький апдейт Девтулзов!
Что нового:
* активно развивают Recorder: появилась возможность экспортировать и импортировать пользовательские флоу в формате json
* экспериментальное: 2 новых режима в Lighthouse: timespan (анализирует страницу на отрезке времени, как правило, включающем взаимодействие пользователя с ней) и snapshot (анализирует страницу после взаимодействия с ней в текущем состоянии).
Подробное описание всех трёх режимов (с плюсами, ограничениями и кейсами) можно найти здесь. Сейчас основным режимом является Navigation (анализирует загрузку страницы).

Прим. Не забудьте, что экспериментальные функции включаются отдельно - в Настройках DevTools - далее Эксперименты.

Прим2. У DevTools есть демо страница. На ней можно, например, сгенерить отчёты в новых режимах Lighthouse. Также её используют для теста Recorder.

Подробнее об этих и остальных улучшениях DevTools тут.

#инструменты #devtools
Старая добрая фича для работы с анимацией

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

Как найти инструмент для работы с анимацией: открыть Девтулзы в Хроме - нажать на три точки в верхней панели Девтузов - More tools - Animations.

Самое интересное тут - возможность замедленно воспроизвести анимацию.
Для этого: просмотрим анимацию (она запишется автоматически) - нажмём на play во вкладке анимации - выберем скорость в процентах - кликнем на запись нужной анимации. Результат прилагается, на нём наглядно видно, как отличается анимация при 100% и при 10%.

Подробная дока по вопросу тут.

#chrome #devtools #инструменты
Спасибо дорогому Хрому за доработанный поиск по DOM
(потихонечку к вам возвращаюсь)

В Chrome 107 стало возможным отключить поиск по DOM во время ввода (часто делало оч больно, так как надо было снова искать элемент, к которому пишешь локатор).

Ну так вот.
По дефолту элемент ищется как только введён очередной символ в поиске по elements.
Как включить поиск по нажатию Enter? Settings > Preferences > disable Search as you type.
Доку по вопросу можете найти тут.

Enjoy, дорогие. И берегите себя и свои нервишки

#chrome #devtools #инструменты
DevTools update (Chrome 107)

Только-только появился Хром 108, но там из интересного только дальнейшие доработки Рекордера. Так что поговорим побольше о полезностях Девтулзов 107-го Хрома.

Про более удобный поиск по Элементам уже говорили здесь.

Что ещё интересного?
* появилась возможность добавлять кастомные шорткаты (они же hotkeys) для Девтулзов (Settings > Shortcuts)

* помимо привычных шорткатов, появилась возможность добавить такой для light и dark themes (Settings > Shortcuts > Rendering). Это снова всё про эмуляцию предпочитаемой цветовой схемы. Правда чтобы шорткат исправно работал придётся держать открытой вкладку рендеринг (можно найти, например, через More tools).

* немного докрутили HAR-ы (теперь в них отображается полная инфа об initiator, раньше она часто терялась)

Подробнее обо всех доработках данной версии тут.

#chrome #devtools #инструменты
DevTools update (Chrome 108, 109)

Прям коротенечко (потому что ничего супер-интересного, но держим руку на пульсе) пройдёмся по апдейтам ДевТулзов.
1. Продолжаются доработки Recorder (улучшили локаторы, появились новые функции для работы со степами)
2. Добавили свеженькие шорткаты для Sources и автокомплита (по Ctrl + N, Ctrl + P на MacOS и по стрелке вправо)
3. Из экспериментального: улучшенный UI для работы с брейкпойнтами и включенный по дефолту pretty-print в Sources.

Подробности тут: 108 и 109

Кто о чём, а я всё про ДевТулзы

Специально для вас (наконец-то на ютюбе), мой доклад с осеннего Heisenbug - туть.

#chrome #devtools #инструменты
DevTools update (Chrome 110-112)

А вот и регулярный обзор фич ДевТулзов:

* Рекордер теперь поддерживает расширения не только для записи скриптов, но и для воспроизведения
* Реализованы тултипы для CSS-атрибутов (выглядит полезно, см скрин)
* Наконец-то (спасибо!!!) переделали отображение вложенных стилей (см видео)
* В рендеринг добавили опцию симуляции Reduced contrast
* встроенный Лайтхаус обновили до 10 версии. Что в нём нового-хорошего расписано тут
* ДевТулзы расширяют список event listener breakpoint (рассказывала в докладе, как они помогают локализовывать баги и находить локаторы)

Помимо этого, сделаны доработки UI/UX Перформанса, Рекордера, автокомплита в Консоли.

Подробнее тут: 110, 111, 112.

#web #devtools
Как сделать автозаполнение ваших веб-форм great again

Не могу не поделиться с вами этой находкой, потому что в ней прекрасно всё:
* экспериментальная фича ДевТулзов "Highlights a violating node or attribute in the Elements panel DOM tree" (пока только в Chrome Canary - про нестабильные версии браузеров писала тут)
* эта фича помогает бороться с кривым автозаполнением форм (что, согласитесь, бывает крайне бесяче) и повысить аксесабилити
* супер-модный дядька из Хрома рассказывает про неё на идеальном английском (заценить можно тут)

А что по сути?
1. Автофил -- предсказуемо, очень популярная фича (в 50%+ случаев, когда автозаполнение предлагается, его используют, а на формы с доступным автозаполнением реже забивают)
2. Как браузер понимает, что и куда подставлять? Благодаря атрибутам полей ввода (инпутов). Часто таких атрибутов нет/они некорректные/и так далее
3. Что добавили в ДевТулзы? Подсказки о том, что не так с вашими инпутами (см скрин: Elements > Issues)
4. Почему круто, что фича на ранней стадии разработки? Можно потыкать её и отправить фидбэк вот тута.
5. И, кстати, вот тут есть списочек атрибутов (когда-то у нас криво автозаполнялась форма и я его искала), а в видосе рассказывается ещё и про best practices.

Самые внимательные также найдут в видео потенциальные доработки UI автофилла (вместо уродливых менюшек на половину экрана смартфона).

#chrome #devtools #google
Что нового у Гугла?

Тут видосы и материалы с Google I/O 2023 (ежегодная конфа Гугла об их сервисах и продуктах) подвезли. Там как всегда много интересного, например:
* что нового у ChromeOS, web и mobile браузеров, Андроида (сможете рассказать своим разработчикам о новых фичах))
* WebDriver BiDi: The future of cross-browser automation (про историю UI-автотестов тут тоже есть)
* про Passkeys и Google Pay and Google Wallet (в тч про автотесты Гуглопея с тестовыми картами)
* How to test across all screen sizes
* Scalable UI testing solutions

Ну, и мне просто необходимо было пошарить с вами, как выглядели ДевТулзы в далёком 2008-ом)

#chrome #devtools #инструменты
DevTools update: редактирование хэдеров и содержимого респонсов (Chrome 115-117)

Из, наверное, самого интересного за последнее время в ДевТулзах появляются:
1) оверрайд хэдеров респонса (Хром 115)
2) оверрайд содержимого респонса (Хром 117, пока в нестабильной версии)

Override response headers

Network -> выбрать запрос -> Headers -> Response Headers -> по ховеру на хэдер появляется иконка редактирования -> можно изменить значение выбранного хэдера или добавить свой -> рефрешнуть страницу, чтобы изменения применились.

При первом оверрайде нужно будет выбрать папку для сохранения оверрайда и разрешить к ней доступ.

Изменённый запрос будет отмечен точкой рядом с запросом.

Зачем это всё?
Авторы фичи показывают её на примере CORS-error, которую можно обойти изменением значения хэдера Access-Control-Allow-Origin. Ну и мало что ещё нужно тестировщику поменять...

Override response content

Это поинтереснее, но пока не в проде.
На самом деле зумеры изобрели мок: меняешь чтонть в ответе (или в документе) и смотришь, как с этим справляется твой фронтенд.

Работать будет аналогично изменению хэдеров: выбрать запрос -> Override content -> отредактировали -> рефрешнулись.

Подробности и ограничения описаны тут и тут.

#chrome #devtools #инструменты
DevTools update
(Chrome 122-123)

1. Добавили фичу "Emulate a focused page"
для исследования элементов, отображаемых только при наведении курсора (в фокусе).
Emulate a focused page можно включить в Rendering или в Elements-Styles-:hov. Является глобальной настройкой, т.е. достаточно применить 1 раз на странице.

2. Опубликована подборка браузерных расширений для работы с Recorder.

3. В Нетворке в Статусе упавшего запроса теперь по дефолту отображается подробный failure reason.

4. В Нетворке навели красоту и появилось больше опций для копирования запроса.

5. Шок (для меня), что теперь в Device mode можно указывать позицию (posture) устройства -- Continuous или Folded. Если вы тоже пропустили эту магия, вот тут можно найти подробности.

6. Совсем модные теперь могут выбрать динамическую тему для ДевТулзов. Подробности здесь.

P.S. В Chrome 123 спрятали Easter egg. Ищите 💫

#chrome #автоматизация #devtools
Хром про тестирование

Хоть Хром и кэп, но иногда стоит повторить то, что уже известно, услышать от кого-то другого, изложить другими словами.
Это я всё к тому, что команда Хрома неплохо и планомерно пишет про подходы к тестированию. Вдруг именно этого вам и не хватало

"...sees quality not as a burden, but as an investment. "

* Implement testing in your enterprise with Chrome
* Tools from Chrome for frictionless, automated testing
* Learn Testing. An in-depth course on software testing
* Fun & Powerful: Intro to Chrome DevTools (прям вапще база ДевТулзов)


Если хочется чего-то более продвинутого и интересного, уже известная вам Наталья Петровская 25 мая проведёт тренинг по майнд-мапам. Cамая первая версия с Подлодки живёт тут, а теперь будет целый день практики и инфы, проверенной на международных конфах и существенно доработанной.