Как нажать на элемент внутри пользовательского элемента (веб-компонент)?

Question

Мне нужно нажать кнопку внутри тени root, и я не могу просто написать запрос для этого. Есть ли способ сделать это?

Согласно документам кукловода, я могу передать только селектор строки методу щелчка: 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 (Обратите внимание, что этот баннер будет удален go при нажатии на него и что вы должны очистить хранилище. Лучше просто использовать личное окно.)

Answer 1

Я использую Chromium 82 и вообще не могу просматривать вашу кнопку на https://patterns.axa.ch/iframe.html?id=components-molecules-cookie-disclaimer--cookie-disclaimer.

Нажатие на кнопку в тени Root работает из коробки. Смотрите здесь демо https://lego.js.org/demo/index.html и его источники: https://github.com/Polight/lego/blob/master/demo/bricks/x-button.html

Я не уверен, в каком контексте это не работает для вас?

Answer 2

Я нашел способ, который работает для меня, но хакерский. Просто используйте собственный метод HTMLElement.click() в контексте браузера (page.evaluate ...). Вы можете напрямую запустить событие для цели.

Если у вас есть идея получше, пожалуйста, поделитесь!

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