如何使用 Puppeteer 为输入填充“Shadow Root（已关闭）”？

Question

我一直在尝试使用 Puppeteer 填充 Shadow-Root 中的这个输入 (#inputEmail)

下面是 HTML 的样子：

<login-form id="form"></login-form>
#shadow-root (closed)
    <span id="reauth-email" class="reauth-email"></span>
    <div class="form-group">
        <label>Email</label>
        <input type="text" id="inputEmail" name="" class="form-control" tabindex="1" placeholder="email@example.com" value="" autocomplete="off" autofocus="true" required="">
        <label id="inputEmailTooltip" class="error" style="display: none">Required Field</label>
    </div>
<login-form id="form"></login-form>

我在 Puppeteer 上尝试过这样的事情：

const input = await $(page, `form::id(#inputEmail)`);

并得到错误'form::id(#inputEmail)' is not a valid selector.

我也试过

const emailInput = document.querySelector('#form').shadowRoot.querySelector('#inputEmail')

并得到以下错误

    const emailInput = document.querySelector('#form').shadowRoot.querySelector('#inputEmail')
                       ^

ReferenceError: document is not defined

我如何使用 Puppeteer 或任何库（如 puppeteer-shadow-selector）定位此输入？

Answer 1

我无法确认，但您应该可以使用内置的 pierce 选择器：

await page.type('pierce/#inputEmail', 'myemailvalue');