9

I would like to select "All" option from the below DOM using Playwright JS, and I have tried page.selectOption('select#rows per page', '-1'); and page.selectOption('id=mui-55656', '-1'); to no avail. Any help would be appreciated. Thanks. enter image description here

gbackmania
  • 772
  • 3
  • 7
  • 17
  • You were so close with both of your attempts. This would have worked: `page.selectOption('#mui-55656', '-1');` However, I am suspicious of that potentially being a dynamically created `id`. If you are certain there are no other `[aria-label="rows per page"]` attributed elements on the page, the answer below will be sufficient. – Machtyn Apr 20 '22 at 18:47
  • The `#` in the select is shorthand for selecting by `id`. `page.selectOption('select[aria-label="rows per page"]', '-1');` would have also worked. Or, `page.selectOption('select#mui-55656', '-1');` – Machtyn Apr 20 '22 at 18:49

2 Answers2

12

You should be able to select the option using the aria-label

await page.selectOption('[aria-label="rows per page"]', '-1');
hardkoded
  • 18,915
  • 3
  • 52
  • 64
  • Thank you for the answer and also for adding those extra tags So the above line works in selecting the first one, value=5. Is there a way to select value=-1 option ? – gbackmania Mar 19 '21 at 15:28
  • @GBackMania I misunderstood the "all" part. Answer updated. – hardkoded Mar 19 '21 at 17:57
  • Aha! That works. Thank you Now, out of curiosity, is there a way to access using "id" attribute? If yes, would that be considered best practice? – gbackmania Mar 19 '21 at 19:59
  • 1
    @GBackMania yes! it's a CSS selector. You can try '#mui-55656' – hardkoded Mar 19 '21 at 21:09
1

use css mode : await page.selectOption('#mui-55656', '-1');

Jason
  • 61
  • 1
  • 2