How do I select option in ant design Select component with any e2e automation framework? (I will be able to rewrite your solution to playwright which I am personally using)
I know the question might seem simple so you might be tempted to suggest something like await click('#option-id') I really wish it would be that easy. I have tried almost everything from simple clicking, absolute mouse positioning, virtual={false}, dispatching custom mouse and keyboard events, combinations of timeouts/hoovers/force clicks and everything else stated in this list unfortunately nothing works.
I believe this question could be answered only by somebody who has this option selection logic in his currently maintained code because the component is constantly updated and any assumptions you make now are going to be different after a year or so.
I also read every issue about this problem and maintainers/developers doesn't seem to care much because they are not using such tests.
I don't want to discourage anyone from answering just so you know I have tried.
The Playwright Element Handle has the Query All Selector. If at least a part of the xpath stays the same, you can use the $$ selector.
The function will return <Promise<Array<ElementHandle>>> which you may then resolve and hook onto the index of the selection you want to make.
For instance -
const selector = "//div[contains(@attribute, 'selection-options-partial-id-text')]"
const allSelectionOptions = await page.$$(selector);
await allSelectionOptions[index].click();
This will work, assuming that all the options under Select must have a common portion in their xpath, or if defined, their data-test-id.