Поиск селекторов в браузере

Обновлено: 05.07.2024

Перейдем к самому интересному — подборке самых полезных и интересных, на наш взгляд, трюков и скрытых возможностей Chrome DevTools.

Верстка

1. Инспектируем анимацию

Меню анимаций в DevTools позволит вам замедлить все анимации на странице или подвигать “руками” конкретную анимацию.

2. Экспериментируем с цветами

Когда вы экспериментируете с цветами, вы можете использовать пипетку, чтобы выбрать любой элемент на странице или выбрать из палитры цветов, которые уже используются на странице. Или выбрать один из цветов material design.

3. Редактируем любой текст на странице

Допустим у вас есть текстовый блок на страницы и вы хотите узнать, как он будет выглядеть, если текст в нем изменится. Переключите документ в режим дизайна! Наберите в консоле document.designMode = 'on', аналогично работает document.body.contentEditable = true. После этого вы сможете редактировать все элементы имеющие текстовый контент.

4. Просмотр отрендеренных шрифтов

Иногда очень сложно сказать, какой шрифт на самом деле был отрендерен. В нижней части Computed вкладки панели инструментов, вы можете увидеть какой шрифт используется, даже если его названия нет в списке font-family.

5. Принудительные псевдоклассы для элементов

DevTools имеет функцию, которая имитирует применение псевдоклассов CSS, например такие как :hover и :focus на элементах, что упрощает их стилизацию. Она доступна из редактора CSS.

6. Изменение формата цвета

Используйте Shift + Клик на предварительном просмотре цвета, чтобы изменить формат: rgb, hsl и hex.

7. Редактор кривых безье для анимации

Вы можете легко изменить временные функции используя DevTools (например, значение свойства для animation-timing-function CSS свойств).

Возможности консоли

1. Вывести HTML элемент в представлении JS объекта

При чтении HTML, браузер генерирует DOM-модель. Если необходимо вывести элемент именно в виде JS объекта в консоль, проще всего для этого воспользоваться методом console.dir().

Иногда бывает полезно сгруппировать логи для упрощения работы с ними и меньшего засорения консоли. Для этого существуют методы console.group(), console.groupCollapsed() и console.groupEnd().

3.1. Вывод значений переменных в виде таблиц

Иногда намного удобнее и нагляднее работать с массивами или объектами в виде таблицы, а не в виде стандартного иерархического представления. Для вывода данных в виде таблице существует метод console.table().

3.2 keys(object) и values(object)

Keys() — возвращает массив имён свойств объекта.
Values() — возвращает массив, содержащий значения всех свойств указанного объекта.

4. Логирование времени выполнения кода

Представьте, что у вас есть две функции которые делают одно и тоже но их реализация различна. Как понять какая из них работает быстрее? Можно воспользоваться методами console.time() и console.timeEnd().

5. Профилирование

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

6.1. $(selector)

6.2. $$(selector)

Возвращает массив элементов, содержащих указанный селектор. Эта команда эквивалентна вызову document.querySelectorAll().

7. clear(), copy(object) и inspect(object/function)

Clear() — очистка всех записей в консоли.
Copy() — копирование в буфер обмена строкового представления указанного объекта.
Inspect() — открывает и выбирает указанный элемент или объект в соответствующей панели: Elements или Profiles.

Прочее

1. Продвинутая кнопка перезагрузки

(Работает только при открытом DevTools и только в браузере Google Chrome!)
По долгому нажатию на кнопку «Обновить страницу» (либо по правому клику) мы открываем специальное меню, которое предоставляет нам выбор:

Обычная перезагрузка (обновляются просроченные ресурсы).
Аппаратная перезагрузка (принудительная загрузка всех ресурсов сайта).
Очистка кэша и аппаратная перезагрузка.

2. Форматирование минифицированых исходников

Инструменты разработчика Chrome имеют встроенный «прихорашиватель» минимизированных исходных кодов к удобочитаемому виду. Кнопка находится в левом нижнем углу открытого в данный момент файла во вкладке Sources.

3. Отображение shadow DOM

Такие элементы как поля ввода и кнопки, браузеры, создают из других базовых элементов которые обычно скрыты. Тем не менее, вы можете перейти Settings -> General и включить Show user agent shadow DOM, для отображения этих базовых элементов во вкладке Elements. Это даст вам возможность оформлять их по отдельности.

4. Фильтрация и поиск

При работе с DOM, CSS, списком запросов на вкладке Network и т.д. зачастую мы видим перед собой большой список элементов, селекторов, свойств и так далее, в котором бывает сложно быстро найти интересующее нас значение. В таких случаях не стоит забывать про использование фильтрации и поиска которое присутствует на всех вкладках. Благодаря фильтрации мы будем отсеивать все варианты кроме подходящих под условия, а поиск позволит Вам быстро найти то что нужно, если Вы знаете ключевые «слова» для поиска. Как правило поле поиска скрыто и вызывается комбинацией Ctrl + F.

5. Come to the Dark Side

Просто потому что темная сторона круче (:

А если серьезно, темная тема убережет ваши глаза от лишнего напряжения, если основной цвет разрабатываемой или отлаживаемой страницы темный, как в моем случае. Включить можно вначале страницы настроек DevTools.

Как найти нужный элемент по XPath или CSS-селекторам в Firefox можно узнать здесь.

Консоль разработчика открывается командой Ctrl+Shift+I (или меню правой кнопки Просмотреть код)

Консоль нужна нам затем, чтобы задавать XPath-запросы и указывать CSS-селекторы нужных элементов страницы.

Допустим, что нас интересует форма запросов Яндекса. Найти форму можно, указав на нее мышью и выбрав в меню правой кнопки Просмотреть код:

Или XPath-запросом в консоли вида $x("запрос") . В нашем случае это: $x("/html/body/div/div")[1]

Форма запроса является вторым элементом списка div'ов, содержащихся в <div role="main"> .

CSS-селекторы задаются командой $$("селектор") . Например, форма запроса на странице Яндекса находится как

Обратите внимание на подсказку внизу вкладки Elements. Не нужно подбирать путь по селекторам или Xpath, Яндекс.Браузер сам подскажет его нам, позволит скопировать:

и подсветит соответствующий элемент на странице

Дмитрий Храмов
Компьютерное моделирование и все, что с ним связано: сбор данных, их анализ, разработка математических моделей, софт для моделирования, визуализации и оформления публикаций. Ну и за жизнь немного.

Данную тему мы уже раскрывали на вебинаре, который проводил наш преподаватель, но решили дополнить чуть текстом (да и многим, как оказалось, так удобнее). В общем представляем статью на тему «Селекторы CSS», которую Павел Попов прорабатывал в рамках нашего курса «Автоматизация в тестировании».

Каждый курс или статья для начинающих автоматизаторов рассказывает об удобном и универсальном средстве поиска элементов Web-страницы, как XPath. Данный вид локаторов на элемент был создан в 1999 году для указания на элементы в XML файлах. С помощью встроенных функций XPath стал очень популярным инструментом поиска элементов на Web-странице. Если HTML код вашего приложения выглядит как-то так:

и вы не можете найти достойный XPath для кнопки “Нажми меня”, не стоит сразу бежать в сторону разработчика с просьбой о помощи. Есть отличная возможность воспользоваться CSS селектором, он будет выглядеть так:

Принято считать, что в CSS селекторах все завязано на классы. Это не совсем так, но если Web приложение использует “оптимизатор” или “обфускатор” HTML кода, и выглядит вот так:

(все названия css классов уменьшены с помощью оптимизатора)

, то получить короткий CSS селектор не удастся — как правило, после каждого нового билда css классы меняются на новые. Но все равно, CSS селектор может оказаться проще и в этом случае: css: form button[type=‘submit’] , вместо XPath: //form//button[@type=‘submit’]

Допустим, что оптимизаторы HTML у нас не установлены и разработчики не планируют его использовать на проекте (проверьте этот факт!).

Как вы могли уже догадаться, символ. используется вместо слова class и будет искать вхождение данного класса в любом элементе, в независимости от количества классов у этого элемента.

css для элемента button: .button_submit , при этом класс .wrapper_button указывать необязательно, но если он нужен для указания на наш класс, мы можем его добавить сразу после указания первого css класса: css: .button_submit.wrapper_button . Порядок классов роли не играет, поэтому их можно поменять местами:

Следующим незаменимым помощником в поиске HTML элементов являются Теги. Написать css селектор, указывающий на тег button очень просто, тем более, что он уже был написан в этом предложении. CSS селектор для button –

И ничего больше указывать вам не требуется, если ваша цель — это привязка к тегу. Совмещая теги и классы получаем::

и это также является css селектором к нашему элементу.

Помимо тегов, атрибуты также помогают уникально идентифицировать элемент на странице. Часто разработчики создают дополнительные атрибуты вместо добавления новых “айдишников”, например, могут создавать дополнительные атрибуты data-id или auto-id у каждого элемента, с которым планируется дальнейшее действие. К примеру, разработчики могут добавить атрибут data-id к нашей кнопке button. Тогда к атрибутам с помощью css селектора можно обратиться через фигурные скобки: [data-id=‘submit’] . Дополнительно, вы можете не указывать значение атрибута после знака равно [data-id] . Такой селектор найдет вам все элементы, у которого существует атрибут data-id с любым значением внутри. Вы также можете указать атрибут class для поиска нашей кнопки: [class=‘button_submit’] , но в CSS, как вы уже знаете, можно полениться и написать так: .button_submit . Соединять все вместе также достаточно просто:

Но это большая удача, если нам удается находить элемент, используя селектор с указанием только одного элемента, как, например, использовать атрибут [data-id] который однозначно находит один элемент на странице. Очень часто нам приходится использовать предков элемента, чтобы найти потомка. И это в CSS тоже возможно сделать достаточно просто:

и знак > позволяет найти элемент исключительно у предка внутри. Но писать все элементы ненужно, так как в CSS есть возможность поиска во всех потомках, этот символ — пробел “ “ . Используя данный указатель мы можем быстро найти элемент внутри формы:

Было: css: form > div > div > div > button.button_submit
Стало: css: form button,button_submit

Удобно также находить следующего “родственника” через предыдущего. Дополним наш пример еще одним span :

[data-id=‘link’] + button найдет button , у которого выше на один уровень есть родственник с атрибутом data-id=”link” . Этим указателем можно пользоваться, когда у предыдущего элемента есть id или уникальный атрибут, а у элемента, который находится следующим после нужного, таких идентификаторов нет. Итак, с помощью символа + css селектор найдет следующего родственника.

Дополнительно вы можете собирать “паровозик” из следующих элементов с использованием указателя +, но не советую это делать из-за возможного изменения местонахождения элементов.

Не стоит упускать вариант поиска по части атрибута. Делается это просто: button[class*=‘submit’] — из длинного названия класса button_submit мы берем только правую часть submit и добавляем к знаку = символ *. Также можно найти по слову cell из значения класса: div[class*=‘cell’] .

Есть еще одна особенность css селекторов, которая позволит найти вам все ссылки или расширения файлов, это ^= и $= , но такая задача стоит не так часто, как поиск по вхождению значения у атрибута.

Немного о том, как найти потомков с одним и тем же тегом у предка. Начнем, как всегда, с примера:

Как найти второй div > у div >? Варианта два:

Но в чем различие между этими двумя селекторами? Дополним пример:

css 1 вариант: div > div:nth-of-type(2)
css 2 вариант: div > div:nth-child(2)

Теперь эти селекторы ведут на два разных элемента. Прежде чем идти далее, попробуйте догадаться, какой селектор ведет на какой элемент?

первый селектор будет указывать на строчку номер 2, тогда как второй селектор будет указывать на строчку номер 3. nth-child ищет второй div , который является потомком родителя . Второй у элемента это третья строка. В свою очередь nth-of-type ищет второй элемент у родителя , который должен являться тегом , это строка номер два.

Есть правило, которое позволяет упростить работу с селекторами в ситуации, когда вам нужно найти конкретный элемент: использовать nth-of-type везде, где это возможно. Если вы разобрались с примером выше, рекомендую вам всегда обращать внимание на количество одинаковых элементов у предка, используя nth-child , и тогда вам будет неважно, куда поместят ссылку : наверху, между или внизу блока, всегда селектор div:nth-child(2) будет все равно указывать на нужный элемент – второй элемент div внутри блока.

Была опущена еще одна функция поиска элемента по id. Вы уже знаете, что поиск по любому из атрибутов осуществляется с использованием указания квадратных скобок [attribute=“value”] и для нашего случая мы можем найти элемент так [id=“value”] . А что если есть существует более быстрый способ поиска по id элемента?

Используя все приобретенные навыки попробуйте написать селектор для кнопки

Будем рады увидеть ваши комментарии и варианты в комментариях тут или обсудить это на очередном открытом уроке, который пройдёт у нас 13-го марта.

Что пишут в блогах

Автоматизация рутины. Скачиваем файлы через bash
Панбагон. 12 часов — опасное время
Оффер сразу после курса для тестировщиков с нуля. Что бывает, если выйти из зоны комфорта
Мои 12 недель в году. Часть 17 (переезд, ДР и пневмония)
Как тестировщику с небольшим опытом подготовиться и сдать экзамен ISTQB FL: интервью
Метрики в тестировании: какие выбрать и что делать, когда они становятся KPI?
Александр Александров про тренды и технологии тестирования, про влияние Covid19 на рынок QA
Зачем тестировщикам HTML и CSS и что о них нужно знать
Войти в айти после 30: с мороза на теплую и уютную «удаленку»
Ручное тестирование: что нужно знать, чтобы стать мануальным тестировщиком

Онлайн-тренинги

Что пишут в блогах (EN)

Agile Testing Days 2021 - My Heart Is Full
Balancing the Speaker Circuit
Agile Testing Days 2021 – Part 1
Automate for yourself first
I’m now a Developer Advocate!
Keeping the Customer Satisfied
Lessons Learned in Finding Bugs
Workshop on Built-in Quality at the Agile Testing Days
Increasing Understanding of Modern (Exploratory) Testing
The George Foreman Heuristic for Quality

Разделы портала

Про инструменты

Автор: Кристин Джеквони (Kristin Jackvony)
Оригинал статьи
Перевод: Ольга Алифанова

Недавно я прошла этот отличный курс по поиску веб-элементов от Эндрю Найта в Test Automation University. Вдобавок к полезному синтаксису доступа к элементам, я также выучила еще один способ с пользой применить инструменты разработчика!

Один из самых раздражающих моментов UI-автоматизации заключается в попытке выяснить, как найти на странице элемент без идентификатора автоматизации. Возможно, вы знаете, что если открыть инструменты разработчика в Chrome, то можно кликнуть правой клавишей на элемент страницы, выбрать Inspect, и этот элемент подсветится в DOM. Это полезно, но тут скрыто нечто еще более полезное: там есть строка поиска, позволяющая вам увидеть, правильно ли сработает локатор, который вы планируете использовать в тесте. Разберем на конкретном примере, как использовать этот ценный инструмент.

Откройте эту страницу – часть проекта Дейва Хэффнера "Welcome to the Internet", где можно попрактиковаться в поиске веб-элементов. На странице Challenging DOM есть таблица с элементами, которые трудно найти. Мы попробуем найти элемент таблицы с текстом “Iuvaret4”.

Для начала откроем инструменты разработчика. Самый простой способ это сделать – кликнуть правой кнопкой по одному из элементов на странице и выбрать "Inspect". Инструменты разработчика откроются справа или внизу страницы, и секция Elements будет отображать DOM.

Теперь откроем панель поиска. Кликните в любом месте секции Elements, и нажмите Ctrl+F. Внизу секции откроется панель поиска с текстом “Find by string, selector, or XPath”.

Мы воспользуемся этим инструментом для поиска элемента "Iuvaret4" через CSS. Кликните правой кнопкой по этому элементу в таблице и выберите Inspect. Элемент подсветится в DOM. Изучая DOM, можно увидеть, что это элемент <td> (данные таблицы), часть элемента <tr> (строка таблицы). Давайте посмотрим, что будет, если ввести tr в строку поиска и нажать Enter. Вернется 13 элементов. Сбоку от поисковой панели можно нажимать на кнопки "вверх" и "вниз", чтобы подсвечивать каждый найденный элемент. Первый tr в результатах – всего лишь часть слова "demonstrates". Следующий – часть заголовка таблицы. Все прочие tr – части тела таблицы, и там же находится и нужный нам элемент. Введем в поиск запрос tbody tr и нажмем Enter. Выдача сократилась до 10 результатов – рядов тела таблицы.

Мы знаем, что нам нужен пятый ряд в теле таблицы, поэтому поищем tbody tr:nth-child(5). Выдача сократилась до нужного ряда. Теперь найдем нужный <td>-элемент. Это первый элемент в ряду, поэтому если искать tbody tr:nth-child(5) td:nth-child(1), поиск выдаст только нужный нам элемент.

Это хороший CSS-селектор, но можно ли его сократить? Попробуйте убрать "tbody" из поиска. Оказывается, элемент отлично находится и по запросу tr:nth-child(5) td:nth-child(1).

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

Удалите содержимое поисковой строки. Начнем с поиска тела таблицы. Введите в поиск //tbody и нажмите Enter. Наведясь на подсвеченную секцию DOM, вы увидите, что на странице подсветилась вся таблица целиком.

Внутри тела таблицы находится строка с нужным элементом, поэтому теперь поищем //tbody/tr. Мы получим десять результатов – десять рядов таблицы.

Мы знаем, что нам нужно выбрать специфический <td>-элемент тела: элемент, содержащий “Iuvaret4”. Поэтому введем в поиск запрос //tbody/tr/td[contains(text(), “Iuavaret4”)]. Мы получим нужный нам результат, а также XPath-выражение, которым можем пользоваться.

Но его, как и наш CSS-селектор, можно сократить. Попробуйте убрать оттуда “tbody” и “tr”. Оказывается, что все, что нам нужно для XPath – это //td[contains(text(), “Iuvaret4”)].

Без этого полезного поиска мы бы перепробовали кучу разных комбинаций CSS и XPath в тест-коде, вновь и вновь прогоняя тесты, чтобы увидеть, что сработает. Эта функция инструментов разработчика позволяет экспериментировать с разными стратегиями локаторов, получая немедленные результаты!

Читайте также: