Unable to select the dropdown value using Puppeteer Js

Question

I am using Puppeteer JS and I'm trying to select the first element of a dropdown, please advise.

After entering the city name in the input text I need to select the first element of the dropdown list.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  const page1=await page.goto('https://www.srinu.com');
  await page.screenshot({path: 'example.png'});
  const date = '#SearchBoxContainer > div > div > div.IconBox.IconBox--autocomplete > div > div > input';
  await page.click(date);
  await page.type(date, 'China');
  await page.select('#data-text', 'Chinatown')
  // const option = (await page.$x(
   // '//*[@id="SearchBoxContainer"]/div/div/div[5]/div/div/ul/li[1]'
  // ))[0].click();

I tried two different methods, select and click, none of them worked.

Answer 1

There are two things missing in your code:

1. The right selector to click on after typing 'China'
2. Wait for the dropdown list DOM elements to be loaded after typing 'China' so it is possible to click on them.

(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://www.agoda.com');
  await page.screenshot({path: 'example.png'});
  const date = '#SearchBoxContainer > div > div > div.IconBox.IconBox--autocomplete > div > div > input';
  await page.click(date);
  await page.type(date, 'China');
  // Fix:
  const firstElement = 'ul.AutocompleteList > li.Suggestion.Suggestion__categoryName:nth-child(1) > ul.Suggestion__categoryName_container > li.Suggestion__categoryName_item:nth-child(1)';
  await page.waitForSelector(firstElement);
  await page.click(firstElement);
})();

Answer 2

this worked for me..........

await page.select('select[id="dropdownId" or #className]', 'value')