无法使用 Puppeteer Js 选择下拉值答案

【问题标题】：Unable to select the dropdown value using Puppeteer Js无法使用 Puppeteer Js 选择下拉值
【发布时间】：2019-09-01 17:50:46
【问题描述】：

我正在使用 Puppeteer JS，我正在尝试选择下拉列表的第一个元素，请告知。

在输入文本中输入城市名称后，我需要选择下拉列表的第一个元素。

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();

我尝试了两种不同的方法，选择并单击，它们都不起作用。

【问题讨论】：

尝试使用 xpath await page.click('//ul[@class='AutocompleteList']/li[contains(.,'Chinatown')]')
仍然不工作，说不是一个有效的选择器，因为我们使用 xpath 可能是。 UnhandledPromiseRejectionWarning：错误：评估失败：DOMException：无法在“文档”上执行“querySelector”：“//ul[@class='AutocompleteList']/li[contains(.,'Chinatown')]' 不是有效的选择器.
@SinuReddy 请检查我的回答

标签： javascript selenium puppeteer

【解决方案1】：

您的代码中缺少两件事：

输入“中国”后点击右侧的选择器
在输入“中国”后等待下拉列表 DOM 元素被加载，以便可以点击它们。

(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);
})();

【讨论】：

【解决方案2】：

这对我有用............

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

【讨论】：

欢迎来到 Stack Overflow！即使您的答案有效，它也是解释代码“为什么”和“如何”解决问题的更好方法。