finding selector for mui combobox list items in Playwright

Question

I am trying to find the css selector for items listed under a mui Combobox, the challenge is it is identifying each item dynamically by the 'aria-activedescendant' attribute that assumes a value as (id-option-0, id-option-1, and so on), id here is dynamically generated with each browser session:

I hope this description is sufficient to ask for any possible solution to find a locator that can be used to perform a click action in my playwright script. I am able to locate the Combobox with

page.locator("[placeholder='Category']")

Answer 1

I might be misunderstanding but even though the combo items are dynamically named, they appear to have the same visual labels in the items, so can you not do something like this:

test('test', async ({ page }) => {
  await page.goto('https://mui.com/material-ui/react-autocomplete/');
  await page.getByLabel('Movie').click();
  await page.getByRole('option', { name: 'The Godfather: Part II' }).click();
});

.getByRole is in Playwright v1.27+.