[FIXED] How to fix , Bug: Cannot read property 'contentFrame' of null using puppeteer

Issue

I am experiencing a bug when I request an api that I implement. Once I have used one of the endpoints, it shows me the error following error, which can be seen below.

There will be no way to control that error?

Error message:

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)

Code:

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;
}

Solution

Problem

elementHandle is null. That's why you get the error that there is not function contentFrame on null. page.$ is null, when the selector cannot be found.

Solution

To solve the problem, you can do two things:

• Is the selector actually the selector you are looking for? Is it maybe inside a frame and not on the page itself or maybe misspelled?

• Maybe the element is not present at the time when your script is running? Maybe the page asynchronously loads more data and change the DOM? In that case, you can use page.waitForSelector like this to wait until the element is present:

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

Answered By - Thomas Dondorf

Answer Checked By - Katrina (PHPFixing Volunteer)