как найти в коде сайта нужный элемент
Как найти в коде сайта нужный элемент
Что пишут в блогах
В этом видео Крутов рассказал про инструменты Moon и Moon Cloud. Обсудили новые фичи: поддержка Selenium 4, Playwright, Cypress.
29-30 октября в Москве пройдет международная конференция по тестированию SQA Days!
Продолжу хвастаться статусом книги.
Онлайн-тренинги
Конференции
Heisenbug 2021 Moscow
Большая техническая конференция для тестировщиков
5-7 октября 2021, онлайн
Что пишут в блогах (EN)
Разделы портала
Про инструменты
Автор: Кристин Джеквони (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, можно увидеть, что это элемент
Мы знаем, что нам нужен пятый ряд в теле таблицы, поэтому поищем tbody tr:nth-child(5). Выдача сократилась до нужного ряда. Теперь найдем нужный
Это хороший CSS-селектор, но можно ли его сократить? Попробуйте убрать «tbody» из поиска. Оказывается, элемент отлично находится и по запросу tr:nth-child(5) td:nth-child(1).
Теперь мы знаем хороший способ найти нужный элемент через CSS, но что будет, если в таблицу добавят новую строку, или строки находятся в случайном порядке? Как только строки изменятся, мы уткнемся в неправильный элемент. Куда лучше искать точный текст. CSS этого не позволяет, поэтому попробуем найти элемент через XPath.
Удалите содержимое поисковой строки. Начнем с поиска тела таблицы. Введите в поиск //tbody и нажмите Enter. Наведясь на подсвеченную секцию DOM, вы увидите, что на странице подсветилась вся таблица целиком.
Внутри тела таблицы находится строка с нужным элементом, поэтому теперь поищем //tbody/tr. Мы получим десять результатов – десять рядов таблицы.
Мы знаем, что нам нужно выбрать специфический
Но его, как и наш CSS-селектор, можно сократить. Попробуйте убрать оттуда “tbody” и “tr”. Оказывается, что все, что нам нужно для XPath – это //td[contains(text(), “Iuvaret4”)].
Без этого полезного поиска мы бы перепробовали кучу разных комбинаций CSS и XPath в тест-коде, вновь и вновь прогоняя тесты, чтобы увидеть, что сработает. Эта функция инструментов разработчика позволяет экспериментировать с разными стратегиями локаторов, получая немедленные результаты!
Поиск элементов документа в JavaScript
В этой статье мы рассмотрим какие в JavaScript существуют методы для выбора элементов на странице, и как с ними работать.
Методы JavaScript для выбора DOM элементов
Работа со страницей так или иначе связана с манипулированием DOM элементами. Но перед тем, как это делать их сначала нужно получить.
Их отличие сводится в различии количества возвращаемых DOM элементов. Первый ( querySelectorAll ) возвращает все найденные элементы, а второй ( querySelector ) – только первый из них.
querySelectorAll – поиск элементов по CSS селектору
querySelectorAll – применяется, когда нужно найти все элементы по CSS селектору внутри страницы или определённого элемента.
В приведённом коде css_selector – это строка, содержащая CSS селектор, в соответствии с которым необходимо осуществить поиск элементов.
Узнать количество элементов в коллекции можно с помощью свойства length :
Обратиться к определённому элементу в коллекции можно по его индексу. Индексы начинаются с 0.
Перебрать коллекцию выбранных элементов можно с помощью цикла for:
Перебор элементов посредством цикла for. of:
Примеры
1. Выполним проверку существование элементов с атрибутом data-toggle=»modal» :
querySelector – выбор элемента по CSS селектору
В приведённом коде selector – это строка, содержащая CSS селектор, в соответствии с которым необходимо найти элемент.
В качестве результата метод querySelector возвращает ссылку на объект типа Element или null (если элемент не найден).
Примеры
2. Выполнить поиск элемента по классу nav :
3. Обратиться к элементу
, находящемуся в теге
4. Проверить наличие элемента с классом modal на странице:
«Старые» методы для выбора элементов
К данной категории относятся методы, которые сейчас практически не применяются для поиска элементов. Их в основном можно встретить в «старом» коде.
getElementById – получение элемента по значению id
Указания значения id необходимо выполнять с учётом регистра, т.к., например, main и Main – это разные значения.
Например, получим элемент, имеющий в качестве id значение pagetitle :
Действие метода getElementById можно очень просто выполнить с помощью querySelector :
getElementsByClassName – получение списка элементов по именам классов
Метод getElementsByClassName позволяет искать элементы не только по одному имени класса, но и по нескольким, которые должны быть у элемента.
Например, выберем элементы на странице у которых имеются классы btn и btn-danger :
Функция getElementsByClassName позволяет искать элементы не только внутри всего документа, но и в конкретном элементе.
Выполнить эту задачу с помощью querySelectorAll можно более эффективно:
getElementsByTagName – получение элементов по имени тега
Метод getElementsByTagName предназначен для получения коллекции элементов по имени тега.
Этот пример через querySelectorAll можно решить так:
getElementsByName – получение элементов по значению атрибута name
Метод getElementsByName может применяться, когда вам нужно выбрать элементы, имеющие атрибут name с указанным значением.
Например, выбрать все элементы на странице с name=»phone» :
Реализовать это с querySelectorAll можно следующим образом:
getElementsBy* и живые коллекции
В этом примере получим элементы li находящиеся в #list и выведем их количество в консоль. Затем через 5 секунд программно добавим ещё один элемент li в #list и ещё раз возвратим их количество в консоль.
Как вы видите, эта коллекция элементов является живой, т.е. она автоматически изменяется. Сначала в ней было 2 элемента, а после того, как мы на страницу добавили ещё один подходящий элемент, в ней их стало 3.
Как вы видите количество элементов в коллекции не изменилось.
Если вам нужно обновить статическую коллекцию элементов после изменения DOM, то метод querySelectorAll нужно вызвать ещё раз.
Итого
В JavaScript можно выделить 6 основных методов для выбора элементов на странице.
Дополнительные материалы
matches – проверка на соответствие элемента CSS селектору
Чтобы обеспечить поддержку данного метода большим количеством браузеров можно использовать следующий полифилл:
closest – поиск ближайшего предка по CSS селектору
closest – это метод, который позволяет найти ближайшего предка для элемента в соответствии с указанным селектором. При этом поиск предков начинается с самого элемента, для которого данный метод вызывается и если он будет ему соответствовать, то closest вернёт сам этот элемент.
В качестве результата метод closest возвращает найденный DOM-элемент или null (если соответствующий элемент найден не был).
contains – проверка наличия одного элемента внутри другого
contains – это метод, посредством которого можно проверить существование одного элемента внутри другого.
Задачи
Имеется страница. В ней следует выбрать:
Как найти нужный фрагмент кода в плагине или шаблоне
Здравствуйте. Периодически нужно найти и откорректировать какой-то фрагмент кода, но искать его на хостинге по всем папкам и файлам очень долго. Есть ли какой-то более быстрый способ поиска?
В этой заметке я вам покажу: как найти нужный блок в исходном коде и в каком файле он вызывается.
Как пример возьмем вот этот блок: 
Что мы знаем о этой странице?
В вордпресс ее выводит плагин WP-Recall. А сама страница выводится шорткодом productlist с атрибутом type=slab
Инспектируем:
В браузере жмем F12. Открывается консоль разработки. В верхнем углу, слева, в этой панели кнопка «Инспектировать» (иконка курсор с прямоугольником) жмем по ней и тыкаем на искомый элемент на странице: 
— ок. Имя дива мы знаем. Это product-metas
Теперь плагин WP-Recall (ведь именно он выводит этот контент в нашем случае) копируем на ПК, и ищем по всем файлам этого плагина (ctrl + shift + F в notepad++)
Находим: 
три файла. Один — таблица стилей. Два — темплейты. Этот блок я выводил шорткодом slab. Значит мой вариант — файл product-slab.php
Буквально за 2 минуты мы нашли то что искали. Это даже быстрей чем написать свой вопрос на форуме.
Удачного вам обучения юные вебмастера, веб программисты и просто те, кто настраивает себе свой персональный блог. Эти простые основы помогут вам быстро разобраться в внутреннем устройстве плагинов.
p.s. один знающий товарищ написал:
Всё, что выше написал коллеги касается файлов темы, но не движка или плагинов, потому как корректировать их код ненужно и может быть опасно.
но есть случаи не для правки (мой ответ):
не всегда чтобы что-то найти ищут именно для изменения. Мне часто надо просто глянуть исходники и найти за что зацепиться чтобы решить свою задачу — т.к. у 99% плагинов нет технического описания их api. Вот и изучаю самостоятельно.
т.е. так я могу найти нужную мне функцию (чтобы вывести какой либо блок в произвольном месте, или посмотреть аргументы функции и зависимости), посмотреть есть ли в ней хуки и фильтры или посмотреть кто же еще вызывает эту функцию.
Как быстро находить нужный участок кода в файлах шаблонов и плагинов.
Хотите вы этого или нет, но рано или поздно вам придется залезть в ваши файлы WordPress и править их под свои нужды. Существует так же вариант привлечения программистов, но каждая такая просьба будет стоять вам денег, в большинстве случаев приличных денег за простую работу занимающую мало времени. Ради сохранения ваших средств, которые можно потратить на продвижения вашего сайта, а не на программиста, я научу вас быстро находить нужные участки кода в файлах плагина или темы.
Если вы не являетесь автором своего шаблона, или же забыли где именно находятся те или иные элементы, тогда специально для вас приведен вариант поиска сразу по всем файлам.
Для чего нужен быстрый поиск по файлам php, CSS, html?
Большинство из вас обратившись к данной статье уже знают зачем им нужна такая функция, поиска по всем файлам одновременно, если же вы зашли суда случайно тогда приведу вам типичные примеры, подходящие под данную тему.
Вам может понадобиться найти:
Любую другую вашу проблему связанную с поиском элементов в не известном файле решит руководство представленное ниже.
Как искать участки кода в файлах?
Для начала работы нам нужно скачать и установить быстрый и полезный редактор Notepad++ который можно скачать по этой ссылке.
После установки, заходим в редактор и открываем необходимые нам файлы, я возьму файлы темы Twenty Fourteen, вы же можете использовать свои.
Для того что бы открыть все файлы темы нужно выделить их все и перетащить в окно редактора.
Файлы перенесены, в общем мы могли этого и не делать, но в дальнейшем так будет быстрее их редактировать.
Файлы в редакторе? Отлично, теперь вызываем окно поиска нажатием клавиш Shift + Ctrl + F, нам откроется следующее:
В примере я указал название класса, для обозначения пометки автора статьи в публикациях, это может понадобиться при удалении ссылок на страницы автора, которые создают дубли страниц.
В поле “Папка” указываем папку с темой в которой находятся наши файлы. После этого нажимаем на кнопку “Найти всё”.
При корректном введении параметра внизу экрана вам отобразиться список файлов в которых употребляется этот класс и строчки кода, для быстрого поиска.
В моем случае это два файла, находящиеся по указанному зеленым цветом адресу. Сам класс подсвечивается красным цветом, найти который можно при помощи горизонтальной прокрутки.
После определения директории файла и линии в которой используется параметр, можно переходить к правке.
Для наглядности, определим еще и “злокачественный” тег bloginfo, при вызове которого создаются запросы к БД.
Наверное вы будете удивлены количеством вызовов этой функции, которую можно с легкостью сделать статичной, без замедления движка.
И того минимум на 8 обращений к базе данных, с каждой загрузки страницы, каждого пользователя можно избежать если правильно подкорректировать код шаблона.
Таким вот нехитрым и очень простым способом мы научились работать сразу с несколькими файлами одновременно. Если вам понравился этот урок тогда вы можете посмотреть другие полезные руководства для начинающих пользователей WordPress.
При возникновении каких либо трудностей пишите в комментариях, попробуем помочь или же если вы знаете более быстрый способ искать нужную информацию в файлах, так же с удовольствием ознакомлюсь.
Организация поиска по веб-странице на JavaScript (без jQuery)
Пару дней назад получил тестовое задание от компании на вакансию Front-end dev. Конечно же, задание состояло из нескольких пунктов. Но сейчас речь пойдет только об одном из них — организация поиска по странице. Т.е. банальный поиск по введенному в поле тексту (аналог Ctrl+F в браузере). Особенность задания была в том, что использование каких-либо JS фреймворков или библиотек запрещено. Все писать на родном native JavaScript.
(Для наглядности далее буду сопровождать всю статью скринами и кодом, чтоб мне и вам было понятнее, о чем речь в конкретный момент)
Поиск готового решения
Первая мысль: кто-то уже точно такое писал, надо нагуглить и скопипастить. Так я и сделал. За час я нашел два неплохих скрипта, которые по сути работали одинаково, но были написаны по-разному. Выбрал тот, в коде которого лучше разобрался и вставил к себе на старничку.
Если кому интересно, код брал тут.
Почему скрипт работал некорректно?
Все просто. Скрипт работает следующим образом. Сперва в переменную записываем все содержимое тега body, затем ищем совпадения с регулярным выражением (задает пользователь при вводе в текстовое поле) и затем заменяем все совпадения на следующий код:
А затем заменяем текущий тег body на новый полученный. Разметка обновляется, меняются стили и на экране подсвечиваются желтым все найденные результаты.
Вы уже наверняка поняли, в чем проблема, но я все же объясню подробней. Представьте, что в поле поиска ввели слово «div». Как вы понимаете, внутри body есть множество других тегов, в том числе и div. И если мы всем к «div» применим стили, указанные выше, то это уже будет не блок, а непонятно что, так как конструкция ломается. В итоге после перезаписи разметки мы получим полностью сломанную веб-страницу. Выглядит это так.
Было до поиска: 
Просмореть полностью
Стало после поиска: Просмореть полностью
Как видите, страница полностью ломается. Короче говоря, скрипт оказался нерабочим, и я решил написать свой с нуля, чему и посвящается эта статья.
Итак пишем скрипт с нуля
Как все у меня выглядит.
Сейчас нас интересует форма с поиском. Обвел ее красной линией.
Давайте немного разберемся. Я это реализовал следующим образом (пока чистый HTML). Форма с тремя тегами.
Первый — для ввода текста;
Второй — для для отмены поиска (снять выделение);
Третий — для поиска (выделить найденные результаты).
Итак, у нас есть поле для ввода и 2 кнопки. JavaScript буду писать в файле js.js. Предпложим, что его вы уже создали и подключили.
Первое, что сделаем: пропишем вызовы функции при нажатии на кнопку поиска и кнопку отмены. Выглядеть будет так:
Давайте немного поясню что тут и зачем нужно.
Полю с текстом даем id=«text-to-find» (по этому id будем обращатсья к элементу из js).
Кнопке отмены даем такие атрибуты: type=«button» onclick=«javascript: FindOnPage(‘text-to-find’,false); return false;»
— Тип: button
— При нажатии вызывается функция FindOnPage(‘text-to-find’,false); и передает id поля с текстом, false
Кнопке поиска даем такие атрибуты: type=«button» onclick=«javascript: FindOnPage(‘text-to-find’,true); return false;»
— Тип: submit (не кнопка потому, что тут можно юзать Enter после ввода в поле, а так можете и button использовать)
— При нажатии вызывается функция FindOnPage(‘text-to-find’,true); и передает id поля с текстом, true
Вы наверняка заметили еще 1 атрибут: true/false. Его будем использовать для определения, на какую именно кнопку нажали (отменить поиск или начать поиск). Если жмем на отмену, то передаем false. Если жмем на поиск, то передаем true.
Окей, двигаемся дальше. Переходим к JavaScript
Будем считать, что вы уже создали и подключили js файл к DOM.
Прежде, чем начнем писать код, давайте отвлечемся и сперва обсудим, как все должно работать. Т.е. по сути пропишем план действий. Итак, нам надо, чтоб при вводе текста в поле шел поиск по странице, но нельзя затрагивать теги и атрибуты. Т.е. только текстовые объекты. Как этого достичь — уверен есть много способов. Но сейчас будем использовать регулярные выражения.
Итак, следующее регулярное выражение будет искать только текст след. вида: «>… текст.