如何單擊自定義元素（webcomponent）內的元素？

Question

我需要單擊 shadow root 中的一個按鈕，而我不能只編寫一個查詢來做到這一點。 有沒有辦法做到這一點？

根據 puppeteer 文檔，我只能將字符串選擇器傳遞給 click 方法： https ://pptr.dev/#?product=Puppeteer&version=v2.1.1&show=api-pageclickselector- options

你可以看到我需要點擊的按鈕： https : //patterns.axa.ch/iframe.html?id=components-molecules-cookie-disclaimer--cookie-disclaimer （請注意，當你點擊它，你必須清除存儲。最好只使用一個私人窗口。）

Answer 1

我找到了一種對我有用的方法，但很笨拙。 只需在瀏覽器上下文中使用原生HTMLElement.click()方法（page.evaluate...）。 您可以直接在目標上觸發事件。

如果您有更好的想法，請分享！

await page.evaluate(() => {
  const acceptButton = document.querySelector('axa-cookie-disclaimer').shadowRoot.querySelector('axa-button');
  acceptButton.click();
});