如何使用Puppeteer点击下拉菜单列表项？报错问题及最佳实践求教

算力阿峰

2026-9-28

问题修复

你猜测的问题方向是对的，带空格的类名使用确实是核心错误之一，另外还有两个典型错误需要修正：

CSS多类选择器写法错误：空格在CSS选择器中表示后代元素，如果要选中同时包含多个类的元素，需要把空格替换为.，比如同时包含mat-option、ng-star-inserted、mat-active三个类的元素，选择器要写为.mat-option.ng-star-inserted.mat-active
page.select()仅适用于原生<select>标签，Angular Material的下拉是用div模拟的自定义组件，不能用这个API
你代码中waitForSelector的选择器也犯了同样的多类选择器空格错误，会一直等待超时

修复后的代码如下：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://www.game.co.uk/en/-2640058?cm_sp=NintendoFormatHub-_-Accessories-_-espot-_-PikaCase');
  console.log('Users navigated to site :)');
  // 替换硬编码等待为元素状态等待，适配不同网络环境
  await page.waitForSelector('.cookiePolicy_inner--actions', { visible: true, timeout: 10000 });
  await page.click('.cookiePolicy_inner--actions');
  
  await page.waitForSelector('.addToBasket', { visible: true, timeout: 10000 });
  await page.click('.addToBasket');
  
  await page.waitForSelector('.secure-checkout', { visible: true, timeout: 10000 });
  await page.click('.secure-checkout');
  
  await page.waitForSelector('.cta-large', { visible: true, timeout: 10000 });
  await page.click('.cta-large');
  
  await page.goto('https://checkout.game.co.uk/contact');
  // 点击展开下拉框
  await page.waitForSelector('.mat-form-field-infix', { visible: true, timeout: 10000 });
  await page.click('.mat-form-field-infix');
  
  // 直接用ID选择器匹配目标选项，稳定性更高
  await page.waitForSelector('#mat-option-0', { visible: true, timeout: 10000 });
  await page.click('#mat-option-0');
  
  // 后续业务逻辑...
  // await browser.close()
})();