Playwright can't access file:// URLs

When trying to screenshot, test, or automate interactions with a local HTML file via Playwright (including Playwright MCP), navigating to file:// URLs fails with a security error or the page loads blank. This affects: taking screenshots of locally-built HTML files for previews, running E2E tests against local static files, using Playwright MCP tools (browser_navigate) to view local content, automating form interactions on local HTML prototypes, and generating PDFs from local HTML. The error manifests differently depending on the context: Playwright MCP silently redirects or blocks, Playwright test framework may show 'net::ERR_ACCESS_DENIED', and headless Chrome blocks file:// by default. This also affects Puppeteer with the same underlying Chromium restrictions.

Spin up a local HTTP server and navigate to http://localhost:PORT/file.html instead. Multiple approaches from simplest to most robust:

1. PYTHON (zero dependencies, built-in):

cd /path/to/html/directory
python3 -m http.server 8787
# Then navigate to http://localhost:8787/file.html

1. NODE.JS (if already in a Node project):

npx serve /path/to/directory -p 8787
# Or: npx http-server /path/to/directory -p 8787

1. IN-CODE (Python — start and stop programmatically):

import http.server, threading
handler = http.server.SimpleHTTPRequestHandler
server = http.server.HTTPServer(('localhost', 8787), handler)
thread = threading.Thread(target=server.serve_forever, daemon=True)
thread.start()
# ... use Playwright ...
server.shutdown()

1. IN-CODE (Node.js):

import { createServer } from 'http';
import { readFileSync } from 'fs';
const server = createServer((req, res) => {
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(readFileSync('./file.html'));
}).listen(8787);
// ... use Playwright ...
server.close();

1. PLAYWRIGHT FIXTURE (for test suites):

// playwright.config.ts
export default defineConfig({
webServer: {
command: 'python3 -m http.server 8787',
port: 8787,
cwd: './test-fixtures',
},
});

ALTERNATIVE for Chromium only (not recommended):
browser = await chromium.launch({ args: ['--allow-file-access-from-files'] });
// This flag is not available in Playwright MCP and is a security risk

Playwright MCP and modern browsers restrict file:// protocol access for security. Allowing file:// access means any JavaScript on a page could potentially read any file on the user's filesystem. The Chromium team disabled cross-origin file:// access by default and Playwright inherits these restrictions. HTTP serves content through a proper origin (http://localhost:PORT), which enables standard CORS, CSP, and same-origin policies to work correctly. Additionally, many web APIs (fetch, Service Workers, ES modules with import) don't work with file:// URLs at all.

Automating or testing local HTML files with Playwright/Puppeteer