Question

我正在使用Puppeteer JS，并且试图选择下拉菜单的第一个元素，请告知。

我正在研究https://www.agoda.com。

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

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  const page1=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');
  await page.select('#data-text', 'Chinatown')
  // const option = (await page.$x(
   // '//*[@id="SearchBoxContainer"]/div/div/div[5]/div/div/ul/li[1]'
  // ))[0].click();

我尝试了两种不同的方法，即选择并单击，但没有一个起作用。

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

Answer 2

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

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

无法使用Puppeteer Js选择下拉值

2 个答案: