如何使用 Puppeteer 单击列表项？

Question

我是 puppeteer 的新手，我正在尝试从下拉菜单中单击选择器MR 元素

我试过使用await page.click('.mat-option ng-star-inserted mat-active');

并且

await page.select('#mat-option-0');

这是我的代码，有人能帮我解决这个问题并了解将来如何解决吗？ 我不确定每个 elelement 使用什么方法，我认为每次我引入一个名称中带有空格的类时，这可能是问题吗？

有没有人在编码这样的事情时有任何最佳实践？

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');
  await console.log('Users navigated to site :)');
  await page.waitFor(2300);
  await page.click('.cookiePolicy_inner--actions');
  await page.waitFor(1000);
  await page.click('.addToBasket');
  await page.waitFor(1300);
  await page.click('.secure-checkout');
  await page.waitFor(2350);
  await page.click('.cta-large');
  await page.waitFor(1200);
  await page.goto('https://checkout.game.co.uk/contact');
  await page.waitFor(500);
  await page.click('.mat-form-field-infix');
  await page.waitForSelector('.ng-tns-c17-1 ng-trigger ng-trigger-transformPanel mat-select-panel mat-primary');
  await page.click('.mat-option ng-star-inserted mat-active');
  

  
})();

Answer 1

脚本有几个问题，让我们看看它们：

• 您正在使用waitFor()数毫秒的waitFor() ，这很脆弱，因为您永远不知道某些操作是否会花费更长的时间，如果不会，您将浪费时间； 你可以用waitForSelector()代替这些等待； 事实上，如果你使用 VSCode（也许还有其他 IDE），它会通知你这个方法已被弃用，不要忽略这些警告：

• 当我使用 DevTools 时，没有为.mat-option ng-star-inserted mat-active选择器返回任何元素，但我可以使用#mat-option-0选择器找到所需的元素，或者我可以使用更长的版本，但有在每个类之前使用一个点（ . ）并删除它们之间的空格，就像这样.mat-option.ng-star-inserted.mat-active ，你可以在这里看到一个 CSS 参考，重点是用空格，它会寻找后代，这不是你想要的

这两个变化应该给了你需要的，这是我这边跑的结果，可以看到Mr.已经被选中了：

我用这个脚本到达那里：

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');
  await console.log('Users navigated to site :)');
  await page.waitForSelector('.cookiePolicy_inner--actions');
  await page.click('.cookiePolicy_inner--actions');
  await page.waitForSelector('.addToBasket');
  await page.click('.addToBasket');
  await page.waitForSelector('.secure-checkout');
  await page.click('.secure-checkout');
  await page.waitForSelector('.cta-large');
  await page.click('.cta-large');
  await page.goto('https://checkout.game.co.uk/contact');
  await page.waitForSelector('.mat-form-field-infix');
  await page.click('.mat-form-field-infix');
  await page.waitForSelector('#mat-option-0');
  await page.click('#mat-option-0');
})();

但是，这仍然不理想，因为：

• 你通过点击来处理 cookie 栏，尝试找到一种不点击的方法； 也许注入一个禁用 cookie 栏的 cookie（如果可能）
• 代码是一大块，现在和这个例子可能还可以，但如果你不断向它添加行，它可能变得不可维护； 尝试在函数和方法中重用代码