I am new to Playwright and I have the following script where I try to open a combobox and then select the ‘Cat‘ from the list of options, wait for the API requests below is required as well.

const apiUrl1 = 'https://api-stg.abc.com/core/alpha';
const apiUrl2 = 'https://api-stg.abc.com/core/beta';

await Promise.all([
    page.waitForResponse((response) => response.url() === apiUrl1 && response.status() === 200),  
    page.waitForResponse((response) => response.url() === apiUrl2 && response.status() === 200),

  ]);

//await page.waitForTimeout(3000); 
await page.locator('svg[data-testid="ArrowDropDownIcon"]').nth(1).click();

const optionsLocator = page.locator('input[role="combobox"]').nth(0);
await optionsLocator.isVisible();

await page.getByRole('option', { name: 'Cat', exact: true }).click();

Combobox fails to display the options for the code above, unless I have waitForTimeout OR if I repeat the clicking of the ArrowDropDownIcon which I do not want to rely on both.

I tried Codegen, which provided following lines, but they were not useful too.

await page.locator('div').filter({ hasText: /^Select the animal type$/ }).getByLabel('Open').click() // using `ArrowDropDownIcon` click as above instead of this
const dogOptionLocator = page.getByRole('option', { name: 'Cat', exact: true });

I understand that the combobox needs extra time to display so I tried waiting for 'input[role="combobox"]' but it does not work either.

  const optionsList = page.locator('input[aria-controls="combo-box-demo-listbox"]'); 
  await optionsList.waitFor({ state: 'attached' }); 
  await optionsList.waitFor({ state: 'visible' });

How can I fix this?

Here’s how the combobox <input> tag changes before and after it is opened manually.

before :

<input aria-invalid="false" autocomplete="off" id="combo-box-demo" type="text" class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-16sx77j" aria-autocomplete="list" aria-expanded="false" autocapitalize="none" spellcheck="false" role="combobox" value="">

after :

<input aria-invalid="false" autocomplete="off" id="combo-box-demo" type="text" class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-16sx77j" aria-autocomplete="list" aria-expanded="true" autocapitalize="none" spellcheck="false" role="combobox" value="" aria-controls="combo-box-demo-listbox" aria-activedescendant="combo-box-demo-option-5">