Как получить дочерние элементы пользовательских элементов HTML?

#javascript #html #web-scraping #puppeteer

Вопрос:

Я пишу скребок с кукловодом, и мне нужно заполнить поля формы, построенной с помощью Aura js. Проблема в том, что я не могу добраться до полей ввода и пароля, потому что они находятся внутри пользовательского элемента:

 <lightning-input class="input sfdc_usernameinput slds-form-element" data-aura-rendered-by="116:0" lightning-input_input-host=""><span lightning-input_input="" data-aria="" class="slds-assistive-text"></span><label lightning-input_input="" for="input-5" class="slds-form-element__label slds-no-flex slds-assistive-text">Username</label>
    <div lightning-input_input="" class="slds-form-element__control slds-grow">
        <input lightning-input_input="" type="text" id="input-5" aria-invalid="false" placeholder="Username" class="slds-input">
    </div>
</lightning-input>

И когда я пытаюсь:

 await page.type('#input-5', 'myusername');

это приводит к ошибке:

Error: No node found for selector: #input-5

Это подтверждается, если я попробую document.getElementById(‘#input-5’) в консоли браузера.

Так как же мне получить эти данные?

ПРАВКА: Добавление скриншота, который показывает, что здесь происходит: разметка с дочерними элементами, но без доступа к ним.

1. Вы уверены, что это потому, что они находятся внутри пользовательского элемента, а не потому, что вы пытаетесь получить его до полной загрузки DOM?

2. @JamesHill подтвердил, как я уже писал, что это происходит даже с консолью браузера (поэтому, когда страница полностью загружена)

Ответ №1:

Элемент, который вы ищете, инкапсулирован в теневой DOM, что делает их скрытыми от обычных методов запроса DOM.

Вы все еще можете запросить их таким образом:

 document.querySelector("lightning-badge").shadowRoot.querySelector('#input-5')

Пример: на этой демо-странице Aura я могу получить текст значка lightning с этим кодом:

 document.querySelector("lightning-badge").shadowRoot.textContent

«Начальная позиция»

Этот запрос, конечно, может быть выполнен и в page.evaluate методе с кукловодом.