How to Capture HTML Files as Screenshots with LambdaTest

To capture an HTML file as a screenshot with LambdaTest, first render it in a browser, then send the rendered page to LambdaTest SmartUI with Playwright’s smartuiSnapshot. If you only need a local image file, Playwright can save a PNG directly. The SmartUI guide demonstrates a locally launched browser and snapshot call, but does not show a file:// example; the local-file workflow below applies that documented sequence to your HTML document.

1. Choose the result you need

PNG file only: use Playwright’s page.screenshot().
Named SmartUI snapshot: render the page with Playwright, then call smartuiSnapshot(page, name).
Visual comparison of an image captured elsewhere: capture locally, then upload the image to SmartUI. The upload API reference specifies a 100 MB maximum for that API.
Remote browser or device capture: LambdaTest documents a Screenshot API for starting capture tests and retrieving results; verify its current endpoint details in LambdaTest documentation before integrating it.

A screenshot records the browser-rendered result, not the source HTML markup. External fonts, images, scripts, and stylesheets therefore need to load successfully for the output to match the intended page.

2. Capture a local HTML file with Playwright

Install Playwright

npm init -y
npm install --save-dev playwright
npx playwright install chromium

Save the following as capture.mjs in the same directory as page.html. It opens the local file, waits for the document to load, and saves a full-page PNG.

import { chromium } from 'playwright';
import { resolve } from 'node:path';
import { pathToFileURL } from 'node:url';

const htmlPath = resolve('page.html');
const outputPath = resolve('screenshot.png');
const browser = await chromium.launch({ headless: true });

try {
  const page = await browser.newPage({ viewport: { width: 1440, height: 900 }, deviceScaleFactor: 1 });
  await page.goto(pathToFileURL(htmlPath).href, { waitUntil: 'load' });
  await page.screenshot({ path: outputPath, fullPage: true, type: 'png' });
  console.log(`Saved ${outputPath}`);
} finally {
  await browser.close();
}

node capture.mjs

For a viewport-only capture, remove fullPage: true. For deterministic captures, prefer a fixed viewport and wait for any page-specific content that appears after the load event.

Serve the file over HTTP when it needs a web origin

Some pages rely on origin-based browser behavior, relative paths, module imports, or fetch requests that do not work as expected from file://. In that case, serve the directory locally, then navigate to the HTTP URL instead. The server command depends on your project; for example, if Python is installed:

python3 -m http.server 8000

Then replace the page.goto(...) line with await page.goto('http://127.0.0.1:8000/page.html', { waitUntil: 'load' });. Keep the server running while the script captures the page.

3. Send the rendered page to LambdaTest SmartUI

SmartUI’s Playwright integration exposes smartuiSnapshot(page, name). Install and configure the current SmartUI SDK using its official integration guide, including any required account credentials and project settings. The following shows where the snapshot call belongs in the local-browser flow; package setup and configuration names can change, so follow the current guide for the exact import and initialization steps.

// After creating the Playwright page and navigating to the rendered HTML:
await page.goto(pathToFileURL(htmlPath).href, { waitUntil: 'load' });
await smartuiSnapshot(page, 'local-html-page');

The documented guide’s example uses a local Chromium browser and takes a named snapshot after opening a public site. Applying that flow to a local HTML file is a workflow adaptation. If your file depends on origin behavior, serve it locally and navigate to its HTTP URL first.

Upload a locally captured image for comparison

If you already have a PNG, the SmartUI upload API provides a multipart upload route for sending locally captured images for visual regression. Include the metadata required by that API to map the screenshot into the comparison workflow. Its reference lists a 100 MB maximum upload size; this limit applies to that cited upload endpoint and should not be assumed for other LambdaTest services.

4. Capture options that affect the output

Need	Playwright approach
Visible viewport only	Call `page.screenshot({ path: 'shot.png' })`.
Entire scrollable page	Set `fullPage: true`.
Image bytes instead of a file	Call `const bytes = await page.screenshot()`; the result is a buffer.
Specific element	Resolve a locator and call `locator.screenshot({ path: 'element.png' })`.
JPEG output	Set `type: 'jpeg'` and optionally a quality value supported by Playwright.
Repeatable layout	Set a fixed viewport and device scale factor when creating the page.

Playwright’s screenshot documentation covers file output, full-page capture, and byte buffers. Use the viewport dimensions that match the comparison target; changing viewport size can change wrapping, responsive layout, and page height.

5. Troubleshooting

Symptom	Likely cause	Fix
Blank or incomplete screenshot	The page navigated, but scripts or remote assets had not finished.	Wait for a specific selector that marks the finished state, or add a short explicit wait for known delayed content. Avoid relying on an arbitrary long delay when a selector is available.
Local images or styles are missing	Relative paths resolve from an unexpected directory, or the resource is unavailable to the browser.	Check the HTML asset paths and run the script from the expected project root. Try serving the directory over HTTP.
Navigation fails on `file://`	The page uses features that require an HTTP origin.	Serve the file locally and navigate to its HTTP URL.
SmartUI does not accept the snapshot	The SDK, credentials, project configuration, or integration version may not match the current guide.	Recheck the current SmartUI Playwright setup and ensure the page is passed to `smartuiSnapshot` after navigation.
Uploaded image is rejected	The upload request may exceed the documented 100 MB maximum or omit required multipart metadata.	Reduce the image size and verify the current upload API’s required fields and mapping metadata.
Comparison changes between runs	Dynamic content, fonts, animation, responsive breakpoints, or remote resources differ.	Fix the viewport, wait for fonts and critical content, and make test data stable before capturing.

6. Performance, reliability, and cost

A local Playwright capture avoids a screenshot-service request when the deliverable is simply an image, but you maintain the browser installation and runtime environment. Reuse one browser process for multiple pages in a batch, close pages when finished, and capture only the scope you need. Full-page screenshots can consume more memory for very long documents.

For repeatable visual checks, fix the browser version, viewport, device scale factor, page data, and readiness condition. A successful navigation alone does not guarantee that asynchronous content has settled. Remote assets and third-party scripts can also make output variable.

LambdaTest’s Screenshot API reference describes test initiation and result retrieval, plus browser, device, resolution, and location options. The indexed reference is version 1.0.1 and old, so confirm current endpoint and authentication details before building against it. No current price or service-level figures are established by the sources used here.

Or skip the browser setup

ScreenshotNeo captures a URL with one request and returns PNG, JPEG, WebP, or PDF. Its API documentation describes the available parameters and formats. For a page served locally, make it reachable at a URL the API can access; a local file:// path is not a URL the service can fetch.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', new Uint8Array(await res.arrayBuffer()));

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card required.

FAQ

Does SmartUI itself open a local HTML file?

The cited integration demonstrates a local Playwright browser and a snapshot call, but does not document a specific file:// example. Open the file in the browser page first, or serve it locally over HTTP.

Can I use LambdaTest only to store a screenshot I already made?

The SmartUI upload API documents uploading locally captured images for visual comparison, with metadata to map them into the workflow.

Should I use a screenshot API or Playwright?

Use Playwright when you need a local artifact or control over browser automation. Consider the LambdaTest Screenshot API for its documented remote browser and device capture workflow, after verifying current API details.