如何使用 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（如果可能）
• 代碼是一大塊，現在和這個例子可能還可以，但如果你不斷向它添加行，它可能變得不可維護； 嘗試在函數和方法中重用代碼