webdriverio/query-selector-shadow-dom

nested shadow-root (open) is not clickable

naveenmadd opened this issue · 6 comments

naveenmadd commented

Steps to reproduce this issue
using latest puppeteer-core(2.0.0 version)
tried to use the SelectorDeep & SelectorAllDeep from query-selector-shadow-dom, i'm getting the btn.click() is not visible or HTMLelement while trying to click the Default button on the pop-up as shown in figure-1 & figure-2 is it's DOM view with nested shadow-root where icon="paper-dropdown-menu:arrow-drop-down"

tried to use the SelectorAllDeep from query-selector-shadow-dom, i'm getting thebtn is not clickable function
@Georgegriff please help me, what i'm missing here

image
image

Georgegriff commented

Can you provide your puppeteer code? As a code snippet showing how you are using the library e.g. puppeteerCommands(...querySelectorShadowDom.querySelectorDeep(yourSelector)) with that I might be able to help

Georgegriff commented

Can you provide your exact arguments passed to the library icon="paper-dropdown-menu:arrow-drop-down on its own is not a valid CSS selector [icon="paper-dropdown-menu:arrow-drop-down] would be

naveenmadd commented

const btn = await page.waitForFunction(() => {
const btn = querySelectorShadowDom.querySelectorDeep("#menuButton > div > paper-input > iron-icon");
return btn;
});
await btn.click();

Georgegriff commented

#13 might explain the issue @naveenmadd

Georgegriff commented

const btn = await page.waitForFunction(() => {

const btn = querySelectorShadowDom.querySelectorDeep("#menuButton > div > paper-input > iron-icon");
return btn;
}).asElement();
await btn.click();

Might work

Georgegriff commented

Issue resolved in #13

Will update examples where required