How to detect if a page has loaded completely in Puppeteer?

In Puppeteer, you can detect if a page has loaded completely by checking for the presence of specific elements on the page. Here is an example code snippet that demonstrates how to wait for a specific element to appear on the page before considering the page to be fully loaded:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('https://example.com');
  
  const element = await page.waitForSelector('your_element_selector', {visible: true});
  
  console.log('Page has loaded completely');
  
  await browser.close();
})();

In this code snippet, the page.waitForSelector function is used to wait for a specific element to appear on the page before considering the page to be fully loaded. This function will wait for the element specified by the CSS selector 'your_element_selector' to be visible on the page. Once the element is found, the message 'Page has loaded completely' is printed to the console.

You can customize the CSS selector to match any element on the page that indicates the page has finished loading, such as a specific button, image, or text element.