Do we have a way to choose an option from drop down ?

[alpriya87]

I have list of options and i wanted to choose one of it :

would we be able to do it with deepquery selector ?
If yes, how is that ?

[Georgegriff]

There are many ways in which a drop-down can be implemented, you'd need to be more specific. Are you able to work with the developer that wrote the component they might have some ideas.

For the most part working with shadow Dom CSS selectors with this library and normal CSS selectors is not that different.

[alpriya87]

Ok, i tried few ways that i read from -
Option 1:
await this.page.evaluate(() => {
querySelectorShadowDom.querySelectorDeep("#ink-select option:nth-child(6)").selected = true;
})
The above chooses the correct selection however, programmatically the results are not displayed. I tried an enter after the above like this :

await this.page.evaluate(() => {
querySelectorShadowDom.querySelectorDeep("#ink-select option:nth-child(6)").selected = true;
})
await this.keyboard.press('Enter')

But not effective.

Option 2:
I used the click mentioned in this repository

const relOption = (await this.page.waitForFunction(() => {
const relOption = querySelectorShadowDom.querySelectorDeep("#ink-select option:nth-child(6)");
})).asElement();
await relOption.click();

There is an id - ink-select however, it is not recognizing

both the above did not work.
If you can help, that would be helpful. I'm totally new to puppeteer.

[alpriya87]

here is the screen shot for the same:

I'm trying to choose Released from the option

[alpriya87]

Hi,
I'm kind of struck with this not able to choose the value frm drop down:
I tried click example that you have provided in this git location and the below code.

const a = await this.page.evaluateHandle(() => {
querySelectorShadowDom.querySelectorDeep("#ink-select option:nth-child(3)").selected=true;
});

Both doesnt work. Can you please help?
What is happening is that the drop down is choosen with the above code however, the result is not displayed. Because it is not enacting the exact click when we choose the drop down. When i manually choose a drop down results are displayed.

Any advice on the above will greatly help !! @Georgegriff

[Georgegriff]

I'm sorry to hear you're having issues your approach seems correct, maybe this example might give some ideas https://github.com/Codeception/CodeceptJS/blob/f6c25b020c7055edbce31d17f58d050bb1358398/lib/helper/Puppeteer.js#L1227 ( this example is complex appreciate).

I think you might benefit from using a more high level testing tool than puppeteer, unfortunately shadow Dom support isn't great for most tools yet...

However

I'm working on a more complete testing solution with shadow Dom, it's not ready yet, but I intend to start recommending CodeceptJS and playwright, I will have an official release soon but it might be something you might want to consider. I talk about my approach here:https://github.com/Georgegriff/query-selector-shadow-dom/blob/master/plugins/codeceptjs
This is experimental, but you may get on better with something like this

[Georgegriff]

Closing due to inactivity

On the puppeteer front there have been some developments, with some new experimental apis:

I have released experimental support for the feature which can be shown here
https://github.com/Georgegriff/query-selector-shadow-dom/tree/master/examples/puppeteer