Как проверить мультиселект Kendo?

Question

Я разрабатываю автоматизацию для страницы, в которой есть выпадающий список множественного выбора kendo.

Обычно я использую инструмент инспектора Chrome для определения Xpath элементов, к которым я обращаюсь.

Однако я попадаю в ловушку-22 (или, точнее, принцип неопределенности), когда пытаюсь осмотреть мультиселектор Kendo. Я следую процедуре: *

1. Предварительные условия: 1a) браузер открыт для страницы, содержащей мультиселект Kendo 1b) Chrome инспектор активен

2. Нажмите на панель поиска Kendo Multiselect. Это приводит к расширению выпадающего списка возможных элементов множественного выбора (каждый из которых имеет свой собственный флажок). Это своего рода гибридный список флажков, встроенный в выпадающий список. Очень удобно для конечного пользователя.

3. Теперь, когда список расширен, я хочу исследовать, скажем, DOM в третьем элементе списка или вокруг него. Моя конечная цель - определить Xpath для этого третьего элемента списка множественного выбора. Нет проблем ... У меня есть расширенный список, и все, что мне нужно сделать, это нажать на значок селектора элемента в окне инспектора Chrome, а затем указать на третий элемент в окне браузера.

Но не так быстро ....

Вот в чем проблема ... как только я нажимаю на иконку селектора элемента в окне инспектора Chrome, список множественного выбора сворачивается (!) И, конечно, вместе с этим DOM обновляется соответствующим образом и элемент Я надеялся проверить даже нет в DOM из-за обновленного состояния списка множественного выбора.

4а. В качестве возможного обходного пути я попытался использовать горячую клавишу, эквивалентную нажатию на значок селектора элемента инспектора Chrome (Ctrl-Shift- C). Это сработало только частично: хотя список множественного выбора не развалился, я не смог выяснить , где в DOM, результирующее совпадение находилось в результате - потому что, как только я прокручиваю вверх / вниз или выполняю любые другие при работе с мышью или клавиатурой список множественного выбора dang рушится.

WTF?

Полагаю, мне нужен какой-то способ изолировать щелчки мыши в окне инспектора Chrome от инспектора окно. Я не сталкивался с этим требованием в прошлом, поэтому понятия не имею, как поступить.

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

Answer 1

Возможно, вам повезет больше, если щелкнуть правой кнопкой мыши на элементе и выбрать «проверить». Хотя множественный выбор может рухнуть, вы все равно сможете перехватить элемент в DOM. (Я предполагаю, что Kendo для jQuery?)

Если у вас есть только один MultiSelect на вашей странице, это дает вам:

$(".k-animation-container .k-list-container.k-popup li:nth-child(3)");

Если вы можете редактировать код, временно установив autoClose в false может помочь вам. Вы также можете привязать к различным событиям выставления Kendo и поместить туда некоторый отладочный код.

Последний трюк состоит в том, чтобы перехватить узел в инспекторе DOM, в данном случае div.k-animation -контейнер, который должен быть прямым потомком тела, и щелкнуть правой кнопкой мыши> сломать> модификации атрибута. Это может сделать паузу в вашем коде слишком часто, но это хороший инструмент, чтобы иметь его за поясом, если вам это нужно.

Answer 2

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

Однако я нашел простое решение. Я использовал окно инспектора, которое было прикреплено к окну браузера. По-видимому, это приводит к тому, что действия клавиатуры и мыши распределяются как между окном браузера, в котором находится инспектор, так и окном инспектора.

Но когда я отсоединяю инспектора, я могу нажать, например, на кнопку выбора значок element-in-the-page-to-inspect-it, не вызывающий каких-либо действий на проверяемой странице, в том числе множественный выбор. Теперь я могу навести курсор на каждый из элементов мультиселекции и проверить их отдельно.

Answer 3

Открыв Dev Tools на вкладке Sources, откройте окно MultiSelect и нажмите F8. Это приостановит все, и все станет серым.

Теперь вы можете переключиться на вкладку Элементы в Dev Tools и делать все, что хотите, и ничего на странице не изменится.

Когда вы готово, снова нажмите F8 или нажмите кнопку «Воспроизвести» на вкладке «Источники» в Dev Tools.