如何修复，错误：无法使用 puppeteer 读取 null 的 属性 'contentFrame'

Question

我在请求我实施的 api 时遇到错误。一旦我使用了其中一个端点，它就会向我显示以下错误，如下所示。

将无法控制该错误。?

错误信息：

TypeError: Cannot read property 'contentFrame' of null
    at Object.getAnimeVideo (C:\Users\c\Desktop\ryuanime\src\api\scraper.ts:89:37)
    at process._tickCallback (internal/process/next_tick.js:68:7)

代码：

const getAnimeVideo = async (id: string, chapter: number) => {
  const BASE_URL = `${url}${id}/${chapter}/`;
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(BASE_URL);
  const elementHandle = await page.$('.player_conte');
  const frame = await elementHandle.contentFrame(); //line 89 error
  const video = await frame.$eval('#jkvideo_html5_api', el =>
    Array.from(el.getElementsByTagName('source')).map(e => e.getAttribute("src")));
  await browser.close();
  return video;
}

Answer 1

问题

elementHandle 是 null。这就是为什么您会收到 null 上没有函数 contentFrame 的错误。当找不到选择器时，page.$ 是 null。

解决方案

要解决这个问题，你可以做两件事：

• 选择器真的是您要找的选择器吗？它可能在框架内而不是在页面本身上，或者可能拼写错误？

• 当您的脚本是 运行 时，也许该元素不存在？也许页面异步加载更多数据并更改 DOM？在这种情况下，您可以像这样使用 page.waitForSelector 来等待元素出现：

  const elementHandle = await page.waitForSelector('.player_conte');