javascript - Puppeteer ，带回空白数组

Question

我正在尝试从 ebay 抓取产品并在 amazon 上打开它们。

到目前为止，我已经在亚马逊上搜索了它们，但我正在努力从搜索结果中选择产品。

目前它输出一个空白数组，我不确定为什么。在没有 grabTitles 和 for 循环的单独脚本中进行了测试。所以我猜这里面有什么东西导致了问题。

我在这里遗漏了什么阻止数据返回 prodResults 的东西吗？

const puppeteer = require('puppeteer');

const URL = "https://www.amazon.co.uk/";
const selectors = {
  searchBox: '#twotabsearchtextbox',
  productLinks: 'span.a-size-base-plus.a-color-base.a-text-normal',
  productTitle: '#productTitle'
};

(async() => {
  const browser = await puppeteer.launch({
    headless: false
  });
  const page = await browser.newPage();
  await page.goto('https://www.ebay.co.uk/sch/jmp_supplies/m.html?_trkparms=folent%3Ajmp_supplies%7Cfolenttp%3A1&rt=nc&_trksid=p2046732.m1684');

  //Get product titles from ebay
  const grabTitles = await page.evaluate(() => {
    const itemTitles = document.querySelectorAll('#e1-11 > #ResultSetItems > #ListViewInner > li > .lvtitle > .vip');
    var items = []
    itemTitles.forEach((tag) => {
      items.push(tag.innerText)
    })
    return items
  })

  //Search for the products on amazon in a new tab for each product 
  for (i = 0; i < grabTitles.length; i++) {

    const page = await browser.newPage();

    await page.goto(URL)
    await page.type(selectors.searchBox, grabTitles[i++])
    await page.keyboard.press('Enter');

    //get product titles from amazon search results
    const prodResults = await page.evaluate(() => {
      const prodTitles = document.querySelectorAll('span.a-size-medium.a-color-base.a-text-normal');
      let results = []
      prodTitles.forEach((tag) => {
        results.push(tag.innerText)
      })
      return results
    })
    console.log(prodResults)
  }
})()

Answer 1

脚本有一些潜在的问题:

1. await page.keyboard.press('Enter'); 触发导航，但您的代码从不等待导航完成后再尝试选择结果元素。使用 waitForNavigation、waitForSelector 或 waitForFunction(不是 waitForTimeout)。

   如果您确实等待导航，则需要使用 Promise.all 的特殊模式来避免竞争条件，如 docs 所示。 .

   此外，您可以通过自己构建字符串直接转到搜索 URL，从而跳过页面加载。这应该会提供显着的加速。

2. 您的代码为每个需要处理的项目生成一个新页面，但这些页面永远不会关闭。我看到 grabTitles.length 为 60。因此您将打开 60 个选项卡。这浪费了很多资源。在我的机器上，它可能会挂起所有东西。我建议制作一个页面并反复浏览它，或者在完成后关闭每一页。如果您想要并行性，请考虑任务队列或同时运行几个页面。

3. grabTitles[i++] -- 为什么要在这里递增 i？它已经通过循环递增，因此这似乎跳过了元素，除非您的选择器有重复项或者您有其他原因要这样做。

4. span.a-size-medium 对我不起作用，这可能是特定于地区的。我看到 a span.a-size-base-plus.a-color-base.a-text-normal，但您可能需要调整它以适应口味。

这是一个最小的例子。我将只处理 eBay 数组中的前 2 个项目，因为它通过得很好。

const puppeteer = require("puppeteer"); // ^13.5.1

let browser;
(async () => {
  browser = await puppeteer.launch({headless: true});
  const [page] = await browser.pages();
  const ua = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36";
  await page.setExtraHTTPHeaders({"Accept-Language": "en-US,en;q=0.9"});
  await page.setUserAgent(ua);
  const titles = [
    "Chloraethyl | Dr. Henning | Spray 175 ml",
    "Elmex Decays Prevention Toothpaste 2 x 75ml",
  ];

  for (const title of titles) {
    await page.goto("https://www.amazon.co.uk/");
    await page.type("#twotabsearchtextbox", title);
    await Promise.all([
      page.keyboard.press("Enter"),
      page.waitForNavigation(),
    ]);
    const titleSel = "a span.a-size-base-plus.a-color-base.a-text-normal";
    await page.waitForSelector(titleSel);
    const results = await page.$$eval(titleSel, els =>
      els.map(el => el.textContent)
    );
    console.log(title, results.slice(0, 5));
  }
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close())
;

输出:

Chloraethyl | Dr. Henning | Spray 175 ml [
  'Chloraethyl | Dr. Henning | Spray 175 ml',
  'Wild Fire (Shetland)',
  'A Dark Sin: A chilling British detective crime thriller (The Hidden Norfolk Murder Mystery Series Book 8)',
  'A POLICE DOCTOR INVESTIGATES: the Sussex murder mysteries (books 1-3)',
  'Rites of Spring: Sunday Times Crime Book of the Month (Seasons Quartet)'
]
Elmex Decays Prevention Toothpaste 2 x 75ml [
  'Janina Ultra White Whitening Toothpaste (75ml) – Diamond Formula. Extra Strength. Clinically Proven. Low Abrasion. For Everyday Use. Excellent for Stain Removal',
  'Elmex Decays Prevention Toothpaste 2 x 75ml',
  'Elmex Decays Prevention Toothpaste 2 x 75ml by Elmex',
  'Elmex Junior Toothpaste 2 x 75ml',
  'Elmex Sensitive Professional 2 x 75ml'
]

请注意，我添加了用户代理和 header 以便能够使用 headless: true 但这只是上面主要解决方案的附带结果。您可以返回到 headless: false 或查看规范线程，如 How to avoid being detected as bot on Puppeteer and Phantomjs?和 Why does headless need to be false for Puppeteer to work?如果您还有其他检测问题。