为什么puppeteer不会点击视频

Question

我目前正在编写一个简单的程序，该程序从我的 discord 机器人中获取歌曲名称，找到视频并将其传递给函数以转换为 mp3。我的问题是 puppeteer 没有点击视频，而是返回搜索页面链接。

这是我获取链接并通过下载传递的代码：

async function findSongName(stringWithName){

    let stringName = stringWithName.replace(commands.play, '')
    const link = 'https://www.youtube.com';

    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(link)
    
    await page.type('ytd-searchbox#search.style-scope.ytd-masthead', stringName);
    page.keyboard.press('Enter');
    await page.click('yt-interaction#extended');
    console.log(page.url())

    await browser.close()
}

Answer 1

听起来您想获取 YT 搜索的顶部结果的标题和 URL。对于初学者，您无需从 YT 主页开始。只需导航至 https://www.youtube.com/results?search_query=${yourQuery} 即可加快处理速度并降低复杂性。

接下来，如果您查看/results 的页面源，有一个名为ytInitialData 的大型（~1 MB）全局数据结构，其中包含所有相关结果（以及许多其他不相关的内容，诚然）。从理论上讲，您可以使用Axios 获取页面，使用Cheerio 解析出ytInitialData，使用纯数组/对象JS 获取数据并完全跳过Puppeteer。

当然，使用YT search API 是最可靠和正确的方式。

由于您使用的是 Puppeteer，因此可以从 "#items a#video-title" 元素中提取数据，如下所示：

const puppeteer = require("puppeteer");

const searchYT = async (page, searchQuery) => {
  const encodedQuery = encodeURIComponent(searchQuery);
  const url = `https://www.youtube.com/results?search_query=${encodedQuery}`;
  await page.goto(url);
  const sel = "a#video-title";
  await page.waitForSelector(sel);
  return page.$$eval(sel, els =>
    els.map(e => ({
      title: e.textContent.trim(),
      href: e.href,
    }))
  );
};

let browser;
(async () => {
  browser = await puppeteer.launch({headless: true});
  const [page] = await browser.pages();
  await page.setRequestInterception(true);
  page.on("request", req => {
    req.resourceType() === "image" ? req.abort() : req.continue();
  });
  const results = await searchYT(page, "stack overflow");
  console.log(results);
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close())
;

输出（对于搜索词“堆栈溢出”）：

[
  {
    title: 'Stack Overflow is full of idiots.',
    href: 'https://www.youtube.com/watch?v=I_ZK0t9-llo'
  },
  {
    title: "How To Use Stack Overflow (no, ForrestKnight, it's not full of idiots)",
    href: 'https://www.youtube.com/watch?v=sMIslcynm0Q'
  },
  {
    title: 'How to use Stack Overflow as a Beginner ?',
    href: 'https://www.youtube.com/watch?v=Vt-Wf7d0CFo'
  },
  {
    title: 'How Microsoft Uses Stack Overflow for Teams',
    href: 'https://www.youtube.com/watch?v=mhh0aK6yJgA'
  },
  // ...
]

既然您只想要第一个结果，那么它就在这里，但如果您想要的不仅仅是初始批次，请如上所述通过 ytInitialData 工作，或者使用 Puppeteer 向下滚动页面。

既然您有一个想要制作成 mp3 的视频 URL，我建议您使用 youtube-dl。您可以安装 Node 包装器以轻松访问其 API，例如 node-youtube-dl，这是我搜索时的第一个结果，我以前从未使用过。