ui5-select: How to select a <Option> from <Select> in E2E tests?

[CristianDDias]

Describe the bug
I'm using ui5-webcomponents-react and Cypress for E2E tests. I'm trying to select a <Option> from <Select> but it's not possible. I've seen that when you click on a select component, it creates a ui5-static-area and ui5-static-area-item, where the select options are placed. But I couldn't find a way to link this ui5-static-area-item with the current <Select> | <Option> components. I tried to click on the <Option> component, but it didn't dispatch any event.

Expected behavior
A way to programmatically dispatch a click event on the <Select> | <Option> components so that I can create my E2E tests.

Context

• UI5 Web Components version: 1.0.0-rc.7
• OS/Platform: Windows
• Browser: Chrome

[SrSatierf]

I've found the same issue using MultiComboBox and trying to select the MultiComboBoxItem, should I create another issue for that?

[vladitasev]

Hi @CristianDDias

Although it's not pretty, you can select the items like this:
if mySelect holds a reference to your select, then:

mySelect.staticAreaItem.staticAreaItemDomRef.shadowRoot.querySelectorAll("ui5-responsive-popover ui5-list ui5-li")

is going to give you a list of all the list items.

However, this selector might break if the internal implementation changes.

I'll keep this issue open until we figure out a more elegant way to provide this.

Regards and sorry for the long delay,
Vladi

[CristianDDias]

Thank you @vladitasev!