Opening local HTML file using Puppeteer


Javascript Problem Overview

Is it possible to open a local HTML file with headless Chrome using Puppeteer (without a web server)? I could only get it to work against a local server.

I found setContent() and goto() in the Puppeteer API documentation, but:

  1. page.goto: did not work with a local file or file://.
  2. page.setContent: is for an HTML string

Javascript Solutions

Solution 1 - Javascript

I just did a test locally (you can see I did this on windows) and puppeteer happily opened my local html file using page.goto and a full file url, and saved it as a pdf:

'use strict';

const puppeteer = require('puppeteer');    
(async() => {    
const browser = await puppeteer.launch();
const page = await browser.newPage();    
await page.goto('file://C:/Users/compoundeye/test.html');    
await page.pdf({
  path: 'test.pdf',
  format: 'A4',
  margin: {
        top: "20px",
        left: "20px",
        right: "20px",
        bottom: "20px"
await browser.close();    

If you need to use a relative path might want to look at this question about the use of relative file paths:

Solution 2 - Javascript

If file is on local, using setContent will be better than goto

var contentHtml = fs.readFileSync('C:/Users/compoundeye/test.html', 'utf8');
await page.setContent(contentHtml);

You can check performance between setContent and goto at here

Solution 3 - Javascript

Let's take a screenshot of an element from a local HTML file as an example

import puppeteer from 'puppeteer';

(async () => {

    const browser = await puppeteer.launch();

    const page = await browser.newPage();
    //  __dirname is a global node variable that corresponds to the absolute 
    // path of the folder containing the currently executing file
    await page.goto(`file://${__dirname}/pages/test.html`);

    const element = await page.$('.myElement');

    if (element) {
        await elementHandle.screenshot({
            path: `./out/screenshot.png`,
            omitBackground: true,

    await browser.close();

Solution 4 - Javascript

Navigation to local files only works if you also pass a referer of file://, otherwise security restrictions prevent this from succeeding.

Solution 5 - Javascript

Why not open the HTML file read the content, then "setContent"

Solution 6 - Javascript

You can use file-url to prepare the URL to pass to page.goto:

const fileUrl = require('file-url');
const puppeteer = require('puppeteer');    

const browser = await puppeteer.launch();
const page = await browser.newPage();   
await page.goto(fileUrl('file.html'));    
await browser.close();    

Solution 7 - Javascript

I open the file I wanted to load into the browser and copied the URL to make sure all the 's where correct.

await page.goto(`file:///C:/pup_scrapper/testpage/TM.html`);


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAnil NamdeView Question on Stackoverflow
Solution 1 - Javascriptcompound eyeView Answer on Stackoverflow
Solution 2 - JavascriptChuong TranView Answer on Stackoverflow
Solution 3 - JavascriptMichael P. BazosView Answer on Stackoverflow
Solution 4 - JavascriptmoeffjuView Answer on Stackoverflow
Solution 5 - JavascriptBoban StojanovskiView Answer on Stackoverflow
Solution 6 - JavascriptRichie BendallView Answer on Stackoverflow
Solution 7 - JavascriptHellonearthisView Answer on Stackoverflow