How to scrape HTML from a website built with Javascript?
Published: 2020-02-12 20:34:34

Hello World ✌️,

In this article, I would like to tell about how you can scrape HTML content from a website build with the Javascript framework.
<br>
**But**  why it is even a problem to scrape a JS-based website? 🤔

**Problem Definition:**
<br>

> You need to have a browser environment in order to execute Javascript code that will render HTML.

<br>
If you will try open this website ([https://web-scraping-playground-site.firebaseapp.com](https://web-scraping-playground-site.firebaseapp.com/))  **in your browser**  — you will see a simple page with some content.

<br>
![Website built with javascript framework](https://dev-to-uploads.s3.amazonaws.com/i/rf272s9e44msmi0w9svo.png)
<br><br>


**However**, if you will try to send HTTP GET request to the same url in the Postman — you will see a different response.
<br><br>

![No HTML Response from a website build with javascript](https://dev-to-uploads.s3.amazonaws.com/i/du3n4s666untb3mulgs4.png)

*A response to GET request ‘[https://web-scraping-playground-site.firebaseapp.com](https://web-scraping-playground-site.firebaseapp.com/)’ in made in the Postman.*


<br><br>
**What**? Why the response contains no HTML? It is happening because there is no browser environment when we sending requests from a server or Postman app.

<br>
----------


## 🎓  **_We need a browser environment for executing Javascript code and rendering content — HTML._**

----------
<br>

It sounds like an easy and fun problem to solve! In the below 👇 section I will show 2 ways how to solve the above-mentioned problem using:

1.  [Puppeteer](https://github.com/puppeteer/puppeteer)  —  _a Node library developed by Google._
2.  [Proxybot](https://proxybot.io/)  —  _an API service for web scraping._

Let's get started 👨‍💻


<br>
For people who prefer watching videos, there is a quick video 🎥 demonstrating how to get an HTML content of a JS-based website.


{% youtube IzOj7otnaa0 %}


----------


## **Solution using Puppeteer**

The idea is simple. Use puppeteer on our server for simulating the browser environment in order to render HTML of a page and use it for scraping or something else 😉.

See the below code snippet.

{% gist https://gist.github.com/princePeterHansen/1353d54a21468a883374f0b24a0ab290 %}




This code simply:  
- Accepts GET request  
- Receives ‘url’ param  
- Returns response of the ‘getPageHTML’ function

The ‘getPageHTML’ function is the most interesting for us because that’s where the magic happens.

The ‘magic’ is, however, pretty simple. The function simply does the following steps:

- Launch puppeteer  
- Open the desired url  
- Internally executes JS  
- Extract HTML of the page  
- Return the HTML

Easy-peasy 👏

Let’s run the script and send a request to  [_http://localhost:3000?url=https://web-scraping-playground-site.firebaseapp.com_](http://localhost:3000/?url=https://web-scraping-playground-site.firebaseapp.com/)  in the Postman app.

The below screenshot shows the response from our local server.

<br><br>
![Using puppeteer to scrape website's HTML](https://dev-to-uploads.s3.amazonaws.com/i/2rrxnbsimya5qmkcdtel.png)
<br><br>


Yaaaaay 🎉🎉🎉 We Did it! Great job guys! We got HTML back!

It was easy, but it can be even easier, let’s have a look at the second approach.


----------


<br>
## Solution using Proxybot

With this approach, we actually only need to send an HTTP GET request. The API service will run a virtual browser internally and send you back HTML.


https://proxybot.io/api/v1/API_KEY?render_js=true&url=your-url-here


Let’s try to call the API in the Postman app.

<br>
[![Scrape HTML from a Javascript website with Proxybot API service](https://dev-to-uploads.s3.amazonaws.com/i/atvhoc908rq9qzce5rec.png)]
(https://proxybot.io/documentation?step=jsRendering)
<br>


Yaaay 🎊🎊🎊 More HTML!

There is not much to say about the request, because it is pretty straightforward. However, I want to emphasize a small detail. When calling the API to remember to include the **`render_js=true`** url param.


Otherwise, the service will not execute Javascript 🤓

<br>
----------

Congratulations 🥳 Now you can scrape websites build with javascript frameworks like Angular, React, Ember etc..

I hope this article was interesting and useful.

Proxybot it just one of the services allowing you to proxy your requests. If you are looking for proxy providers here you can find a list with [best proxy providers](https://dev.to/princepeterhansen/top-7-residential-proxies-providers-31f9 "hand-picked proxy providers").