4

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.

Hnus
  • 912
  • 2
  • 9
  • 24

1 Answers1

2

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.

Hari Reddy
  • 339
  • 3
  • 15
  • In my question I stated that `await click('#option-id')` does nothing you just provided way how to get handles by index which is not problem I am having. @SumitLubal Should be trivial to provide working example then. – Hnus Jul 29 '21 at 01:03
  • Okay, can you post a snippet from what you're working on? – Hari Reddy Jul 29 '21 at 02:54
  • You can use https://ant.design/components/select/#header and try to select option with automation framework of your choice. – Hnus Aug 02 '21 at 00:36