Поиск элементов
Для того, чтобы скрипт мог работать с каким-то элементом страницы, этот элемент сначала нужно найти. Для Этого в JavaScript есть несколько способов. Найденный элемент обычно присваивается переменной, и в дальнейшем, через эту переменную сркипт обращается к элементу и производит с ним какие-то действия.
Поиск по id
Найденный элемент мы присвоили переменной block и вывели переменную в консоль. Откройте консоль браузера, в ней должен быть указан элемент.
Поиск по классу
Метод getElementsByClassName() позволяет найти все элементы, относящиеся к определённому классу.
Добавим на страницу элементы и зададим им класс. Часть элементов разместим внутри блока, который мы создали ранее. Другую часть создадим вне блока. Смысл этого будет понятен чуть позднее. Теперь страница будет выглядеть так:
В строке 17 мы вывели в консоль весь массив, чтобы посмотреть, сколько в нём элементов, а в строке 18 мы обратились к конкретному элементу.
Теперь найдены только те элементы, которые расположены в блоке.
Поиск по тэгу
Метод getElementsByTagName() находит все элементы с конкретным тэгом. Он также возвращает псевдомассив с найденными элементами.
Поиск по селектору
Метод querySelectorAll() находит все элементы, соответствующие селектору. А метод querySelector() находит один элемент, который является первым на странице. Эти методы могут заменить все способы поиска элементов, рассмотренные ранее, ведь есть селектор по id, селектор по тэгу и многие другие.
Селекторы пишутся точно так же, как в CSS, только не забывайте ставить кавычки.
Теперь найдём не сам список, а его пункты. Для поиска элементов можно использовать любые селекторы. Мы используем составной селектор:
Данные методы также могут производить поиск не во всём документе, а внутри конеретного элемента.
В примере мы использовали только селекторы по тэгу. Попробуйте найти элементы страницы с использованием других селекторов.
Соседние элементы
Для найденного элемента можно найти соседей. Каждый элемент является объектом, и соседние элементы можно получить через свойства этого объекта. Свойство previousElementSibling содкржит предыдущий элемент, а свойство nextElementSibling содержит следующий элемент.
Найдём элемент, следующий за блоком:
Свойства previousSibling и nextSibling тоже содержат соседей, но они учитывают не только элементы, но и другие узлы.
Перед первым абзацем идёт текст «Блок с id». Найдём этот текстовый узел. Абзац содержится в нескольких псевдомассивах, созданных нами в примерах, в том числе, в массиве art. Обратимся к нему через этот массив:
Дочерние элементы
Свойство children содержит массив с дочерними элементами.
Найдём дочерние элементы блока:
Свойство childNodes содержит не только элементы, но и другие узлы. Найдём все узлы, которые находятся в блоке:
Коприрование материалов сайта возможно только с согласия администрации
Организация поиска по веб-странице на 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.
Прежде, чем начнем писать код, давайте отвлечемся и сперва обсудим, как все должно работать. Т.е. по сути пропишем план действий. Итак, нам надо, чтоб при вводе текста в поле шел поиск по странице, но нельзя затрагивать теги и атрибуты. Т.е. только текстовые объекты. Как этого достичь — уверен есть много способов. Но сейчас будем использовать регулярные выражения.
Итак, следующее регулярное выражение будет искать только текст след. вида: «>… текст.
Как открыть поиск в коде элемента
Что пишут в блогах
В этом видео Крутов рассказал про инструменты 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 в тест-коде, вновь и вновь прогоняя тесты, чтобы увидеть, что сработает. Эта функция инструментов разработчика позволяет экспериментировать с разными стратегиями локаторов, получая немедленные результаты!
Поиск и навигация по коду в VS 2010
Разработчики должны иметь возможность легко искать, ориентироваться и понимать код, в котором работают. Мы изучили юзабилити и пришли к выводу, что разработчик проводит много времени читая, пересматривая и исследуя существующий код, вместо написания нового кода.
Редактор VS 2010 добавляет новые возможности, который позволяют более продуктивно искать и ориентироваться в коде, а также проще понимать, как код используется в проекте.
Поиск и навигация в исходном коде ASP.NET MVC
Для данной статьи я буду использовать исходный код ASP.NET MVC фреймворка, у которого много тысяч строк кода, для демонстрации некоторых новых возможностей в поиске и навигации у VS 2010. Если у вас установлена VS 2010 Beta 2, вы можете загрузить ASP.NET MVC фреймворк.
Вы обнаружите, что производительность, ниже представленных возможностей, реально высокая, не смотря большой кусок кода в несколько тысяч строк. Все возможности, которые я опишу, уже интегрированы в VS 2010 и работают для всех проектов на C# или VB.
Поддержка “Navigate To”
Очень важно для маленьких или больших проектов иметь возможность быстро искать и перемещаться по коду.
Visual Studio 2010 теперь поддерживает новое горячее сочетание клавиш (Ctrl+запятая), при нажатии на которое открывается новое окно “Navigate To”, которое позволяет быстро находить типы, файлы, переменные и члены в вашем проекте и перемещаться к их объявлению.
Благодаря выдачи результатов по ходу ввода запроса, “Navigate To” дает прирост в поиске через UI:
Наберите еще несколько букв, и вы увидите автоматически отфильтрованный список, который соответствует запросу “controller”:
Вы можете использовать полосу прокрутки для перемещения по результату поиска или использовать альтернативу — нажимать Tab и далее пользоваться стрелочками, если не хотите отрывать руки от клавиатуры. Список “Navigate To” включает в себя все типы результатов, которые соответствуют поисковому запросу, включая имена типов, методов, свойств, файлов и объявление полей
Выбор любого результата со списка, откроет нужный исходный файл в VS 2010 (если он еще не открыт) и перекинет вас в нужное место кода, подсвечивая релевантное имя.
Нечеткие возможности поиска
Поле поиска в “Navigate To” умеет делать хитрые вещи, оно позволяет смекалисто отфильтровывать и искать, не зная толком имени вещи, которую вы ищите. Это позволяет фильтровать ваши поиски и получать информацию в реальном времени, во время набора.
Чтобы опробовать данную возможность, давайте сначала будем искать слово “cache”. Обратите внимание, результат включает в себя не только элементы, которые начинаются со слова “cache”, но и любые элементы, которые содержат слово “cache”:
Мы можем добавлять несколько слов в поле поиска для дальнейшего отфильтровывания результатов. Например, ниже, я отфильтровываю список по элементам, которые содержат оба слова “cache” и “action” в имени:
Например, написав “AMS” вы увидите результат ниже (только те типы и члены, которые содержат слова, которые начинаются с А, затем с M, потом с S):
Окно “Navigate To” позволяет вам быстро фильтровать и перемещаться по коду, используя минимум нажатий и избавляет вас от использования мышки, открытия Solution Explorer и нажатия непосредственно на файл.
View Call Hierarchy
Конечно иметь возможность быстрой навигации и поиска по коду — это замечательно, но иметь возможность просматривать, как используется код — это ведь еще лучше! VS 2010 представляет новую возможность — “View Call Hierarchy”, которая позволяет быстро обнаружить места в коде, с которых вызываются ваши методы или свойства и передвигаться по дереву вызовов, не запуская или отлаживая, при этом, приложение.
Для использования данной возможности, просто выделите имя метода или свойства в коде, нажмите Ctrl+K, Ctrl+T или правой кнопкой и выберите “View Call Hierarchy” с контекстного меню:
Это откроет новое окно инструмента “Call Hierarchy”, которое по умолчанию появляется под редактором кода. Ниже, вы можете увидеть, как “Call Hierarchy” отображает два метода в нашем проекте, которые вызывают метод ViewPage.RenderView(), выделенный выше.
Далее мы можем углубляться иерархию первого метода “RenderViewAndRestoreContentType”, чтобы увидеть очередь вызова:
Для виртуальных методов/свойств вы можете также можете вызывать окно иерархии, чтобы увидеть, что показывает подкласс и перегрузить их.
Двойное нажатие на любом члене в окне “Call Hierarchy” откроет соответствующий исходный файл и переместит в нужное место в коде.
Это позволит вам быстро перемещаться по коду и лучше понимать отношения между классами и методами во время работы.
D VS 2010, когда вы выделяете или подсвечиваете переменные / параметры / объявление поля в редакторе кода, все места с ними автоматически подсвечиваются для вас в редакторе. Это позволяет легко определить, где и как переменная или параметр используется.
Например, когда мы выделяем в редакторе параметр “controllerContext”, передаваемый в метод ControllerActionInvoker.GetParameterValue() ниже, его четыре места использования в данном методе также подсвечиваются:
Если я выделю локальную переменную в методе, все места ее использования также автоматически подсветятся:
Если подсвечено несколько мест использования, вы можете перемещаться по ним, используя Ctrl-Shift- ↑ и Ctrl-Shift-↓
Как найти нужный фрагмент кода в плагине или шаблоне
Здравствуйте. Периодически нужно найти и откорректировать какой-то фрагмент кода, но искать его на хостинге по всем папкам и файлам очень долго. Есть ли какой-то более быстрый способ поиска?
В этой заметке я вам покажу: как найти нужный блок в исходном коде и в каком файле он вызывается.
Как пример возьмем вот этот блок: 
Что мы знаем о этой странице?
В вордпресс ее выводит плагин WP-Recall. А сама страница выводится шорткодом productlist с атрибутом type=slab
Инспектируем:
В браузере жмем F12. Открывается консоль разработки. В верхнем углу, слева, в этой панели кнопка «Инспектировать» (иконка курсор с прямоугольником) жмем по ней и тыкаем на искомый элемент на странице: 
— ок. Имя дива мы знаем. Это product-metas
Теперь плагин WP-Recall (ведь именно он выводит этот контент в нашем случае) копируем на ПК, и ищем по всем файлам этого плагина (ctrl + shift + F в notepad++)
Находим: 
три файла. Один — таблица стилей. Два — темплейты. Этот блок я выводил шорткодом slab. Значит мой вариант — файл product-slab.php
Буквально за 2 минуты мы нашли то что искали. Это даже быстрей чем написать свой вопрос на форуме.
Удачного вам обучения юные вебмастера, веб программисты и просто те, кто настраивает себе свой персональный блог. Эти простые основы помогут вам быстро разобраться в внутреннем устройстве плагинов.
p.s. один знающий товарищ написал:
Всё, что выше написал коллеги касается файлов темы, но не движка или плагинов, потому как корректировать их код ненужно и может быть опасно.
но есть случаи не для правки (мой ответ):
не всегда чтобы что-то найти ищут именно для изменения. Мне часто надо просто глянуть исходники и найти за что зацепиться чтобы решить свою задачу — т.к. у 99% плагинов нет технического описания их api. Вот и изучаю самостоятельно.
т.е. так я могу найти нужную мне функцию (чтобы вывести какой либо блок в произвольном месте, или посмотреть аргументы функции и зависимости), посмотреть есть ли в ней хуки и фильтры или посмотреть кто же еще вызывает эту функцию.
