Кукловод недопустимый селектор

#puppeteer

#кукловод

Вопрос:

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

Кажется, я не могу заставить селектор работать. Я щелкаю правой кнопкой мыши в поле ввода и копирую селектор с помощью Chrome dev tools, и я получаю #company-legal-name > span > ng-transclude > wf:textfield > div > input

Но если я помещу это в консоль

 document.querySelector('#company-legal-name > span > ng-transclude > wf:textfield > div > input')

Я получаю эту ошибку

 VM637:1 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#company-legal-name > span > ng-transclude > wf:textfield > div > input' is not a valid selector.
at <anonymous>:1:10

Я пробовал много разных вещей, но он никогда не может найти селектор. Страница, похоже, находится в angular, если это имеет значение. К сожалению, я не могу связать страницу, поскольку она заблокирована для пользователей, не являющихся администраторами.

PS:

 document.getElementById('#company-legal-name')

ВОЗВРАТ null

Ответ №1:

wf:textfield недопустимый селектор CSS, следовательно, вы получаете синтаксическую ошибку:

 > document.querySelector('wf:textfield')
SyntaxError: 'wf:textfield' is not a valid selector

тогда как без wf: это принято:

 >document.querySelector('textfield')
null

У меня также есть сомнения по поводу ng-transclude селектора, который, как я предполагаю, должен быть именем тега (Angular?).

1. Спасибо, Стефан, сейчас я не получаю никаких ошибок, но я все еще получаю null.. Есть идеи?

2. Не могли бы вы, может быть, разобрать и прикрепить HTML-документ к вашему вопросу? Он должен содержать только узлы в пути, который вы хотите сопоставить / выбрать. Пожалуйста, помните, что CSS-селектор A > B работает, B только если является прямым A дочерним элементом .a > .b , т.е. <A class="a"><B class="b">...</B></A> будет соответствовать, но не <A class="a"><B><C class="b">...</C></B></A>

Ответ №2:

Вы получаете недопустимый селектор из-за двоеточия (:), в частности wf:textfield , который не является допустимым селектором для querySelector, даже если вы получаете его с помощью inspect element .
getElementById потребует от вас удаления хэша перед селектором #

Решение: Удалите поврежденный фрагмент ( wf:textfield ) и напишите так,

#company-legal-name input

Похоже, мы также можем использовать input[name="input_2"] , как обсуждалось в комментариях.

1. Спасибо document.querySelector('#company-legal-name > span > ng-transclude > div > input') возвращает null! Есть идеи, как я извлекаю информацию из входных данных вместо получения null?

2. Что document.querySelector('#company-legal-name') возвращает?

3. imgur.com/PBBfBBB текста-заполнителя, который я ищу, нигде там нет

4. Почему бы вам не использовать input[name="input_2"] в качестве селектора? Это кажется очень разумным. Попробуйте #company-legal-name input и input[name="input_2"] , в зависимости от того, что сработает. Он просто должен быть уникальным, вот и все.