{"id":1026,"date":"2020-11-17T10:20:41","date_gmt":"2020-11-17T10:20:41","guid":{"rendered":"http:\/\/webharvy.com\/whblog\/?p=1026"},"modified":"2021-05-25T09:34:49","modified_gmt":"2021-05-25T09:34:49","slug":"how-to-build-a-simple-web-scraper-using-puppeteer","status":"publish","type":"post","link":"https:\/\/www.webharvy.com\/blog\/how-to-build-a-simple-web-scraper-using-puppeteer\/","title":{"rendered":"How to build a simple web scraper using Puppeteer?"},"content":{"rendered":"

Table of Contents<\/h3>\n
    \n
  1. What is Puppeteer?<\/a><\/li>\n
  2. Uses of Puppeteer<\/a><\/li>\n
  3. How to install?<\/a><\/li>\n
  4. How to start a browser instance?<\/a><\/li>\n
  5. How to load a URL?<\/a><\/li>\n
  6. How to navigate\/interact with the page?<\/a><\/li>\n
  7. How to take screenshots, save page as PDF?<\/a><\/li>\n
  8. How to select data from page?<\/a><\/li>\n
  9. Headless browser as a service<\/a><\/li>\n<\/ol>\n

    <\/a><\/p>\n

    What is Puppeteer?<\/h2>\n

    Puppeteer (https:\/\/developers.google.com\/web\/tools\/puppeteer<\/a>) is a headless Chrome browser for developers. Puppeteer is made available as a Node library.
    \n    <\/a><\/p>\n

    Uses of Puppeteer<\/h2>\n

    Puppeteer can be used by developers for browser automation. Developers can create a headless Chrome browser instance using which web pages can be loaded, interacted with and also take screenshots or PDF of loaded pages. Some of the main usages of Puppeteer are for web scraping, browser automation and automated testing.
    \n    <\/a><\/p>\n

    How to install Puppeteer?<\/h2>\n

    Since Puppeteer is a Node library (requires Node.js<\/a> installation), it can be installed by running the following command.<\/p>\n

    $ npm install –save puppeteer<\/p><\/blockquote>\n

    <\/a><\/p>\n

    How to start browser instance?<\/h2>\n

    The following code will start a headless (without user interface, invisible) browser instance.<\/p>\n

    const puppeteer = require(“puppeteer”);
    \nvar browser = await puppeteer.launch();
    \nvar page = await browser.newPage();<\/p><\/blockquote>\n

    <\/a><\/p>\n

    How to load a URL?<\/h2>\n

    To load a URL in the above created browser instance, use the following code.<\/p>\n

    await page.goto(“https:\/\/www.webharvy.com”);<\/p><\/blockquote>\n

    <\/a><\/p>\n

    How to select items (elements) from the page?<\/h2>\n

    To select an item\/element from the page loaded in puppeteer, you will first need to find it’s CSS selector. You can use Chrome Developer Tools to find the CSS Selector of any element on page. For this, after loading the page within Chrome, right click on the required element and select Inspect. <\/b><\/p>\n

     <\/p>\n

    \"\"<\/p>\n

    In the resulting Developer Tools window displayed, the HTML Element corresponding to the element which you clicked on page will be selected. Right click on this element and in the resulting menu displayed you will find the Copy <\/b>submenu within which you should select the Copy selector <\/b>option.  You now have the CSS selector of the element in clipboard.<\/p>\n

    Example:<\/p>\n

    #description > yt-formatted-string > span:nth-child(1)
    \n    <\/a><\/p>\n

    How to interact with page elements?<\/h2>\n

    This selector string can be used within Puppeteer to select\/interact with elements. For example to click the above element, assuming it is a link, the following code can be used.<\/p>\n

    var selector = “#description > yt-formatted-string > span:nth-child(1)”;
    \npage.click(selector);<\/p><\/blockquote>\n

    In addition to click, Puppeteer provides several other page interaction functionality like keyboard input, typing in input fields etc. Refer : https:\/\/pptr.dev\/#?product=Puppeteer&version=v2.0.0&show=api-class-page<\/a><\/p>\n

    The following code shows how you can select and click a button using Puppeteer once the page is loaded.<\/p>\n

    var buttonSelector = “#DownloadButton”
    \nawait page.evaluate(sel => {
    \nvar button = document.querySelector(sel);
    \nButton.click();
    \n}, buttonSelector);<\/p><\/blockquote>\n

    <\/a><\/p>\n

    How to get text of page elements?<\/h2>\n

    As shown in the above code samples, we are running JavaScript codes within Puppeteer using page.evaluate<\/a> function for page interaction. The same can be used to get text of elements from the page.<\/p>\n

    var reviewSelector = “review > span.cm-title”
    \nvar reviewText = await page.evaluate(sel => {
    \nvar reviewText = document.querySelector(sel).innerText;
    \nreturn reviewText;
    \n}, reviewSelector);<\/p><\/blockquote>\n

    As shown above, JavaScript code is executed on page using the page.evaluate<\/a> method to get text. You may also use the document.querySelectorAll<\/a> JavaScript HTML DOM method to get data from multiple page elements.
    \n    <\/a><\/p>\n

    How to take screenshots of page and save page as PDF?<\/h2>\n

    You can take a screenshot of the currently loaded page by using the following code.<\/p>\n

    await page.screenshot({path: ‘.\/screenshots\/page1.png’});<\/p><\/blockquote>\n

    Or save the page as a PDF using the following code.<\/p>\n

    await page.pdf({path: ‘.\/screenshots\/page1.pdf’});<\/p><\/blockquote>\n

    <\/a><\/p>\n

    Headless browser as a service<\/h2>\n

    Running puppeteer is a resource intensive process. If you need to run several headless browser instances the memory and processor requirements will be high, and scaling them won’t be easy. To facilitate this services like https:\/\/www.browserless.io\/<\/a> can be used which offers headless browsers as a service.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Table of Contents What is Puppeteer? Uses of Puppeteer How to install? How to start a browser instance? How to load a URL? How to navigate\/interact with the page? How to take screenshots, save page as PDF? How to select data from page? Headless browser as a service What is Puppeteer? Puppeteer (https:\/\/developers.google.com\/web\/tools\/puppeteer) is a … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,7],"tags":[93],"class_list":["post-1026","post","type-post","status-publish","format-standard","hentry","category-howto","category-web-scraping-workshop","tag-puppeteer"],"_links":{"self":[{"href":"https:\/\/www.webharvy.com\/blog\/wp-json\/wp\/v2\/posts\/1026","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webharvy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webharvy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webharvy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webharvy.com\/blog\/wp-json\/wp\/v2\/comments?post=1026"}],"version-history":[{"count":1,"href":"https:\/\/www.webharvy.com\/blog\/wp-json\/wp\/v2\/posts\/1026\/revisions"}],"predecessor-version":[{"id":1119,"href":"https:\/\/www.webharvy.com\/blog\/wp-json\/wp\/v2\/posts\/1026\/revisions\/1119"}],"wp:attachment":[{"href":"https:\/\/www.webharvy.com\/blog\/wp-json\/wp\/v2\/media?parent=1026"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webharvy.com\/blog\/wp-json\/wp\/v2\/categories?post=1026"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webharvy.com\/blog\/wp-json\/wp\/v2\/tags?post=1026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}