PAGE PREPARATION

Prepare a known page state with narrowly scoped JavaScript

Use the advanced screenshot endpoint when an authorized page needs a small deterministic adjustment before capture. Keep scripts reviewed, bounded, and specific; interactive workflows still belong in browser automation.

v2
Advanced preparation
Reviewed code
Narrow scope
One page state
Not a remote session
Install:POST /api/v2/screenshot · javascriptCode
Auth:SNAPSHOT_SITE_API_KEY
Get started for free
Custom JavaScript capture
Snapshot Site themed custom JavaScript screenshot API illustration
Good fits
Disabling a known animation before visual review
Setting deterministic fixture state on an owned page
Applying a small approved DOM adjustment
Preparing stable public previews for documentation

Preparation code should reduce variance, not imitate a test suite

A compact script can normalize a page you control. Login, multi-step navigation, assertion, interception, and persistent sessions require Playwright or another browser automation tool.

1

Authorized target

Run code only against pages the workflow owns or has permission to prepare.

2

Minimal mutation

Change the smallest known state required by the artifact.

3

Observable failure

Make missing selectors or unexpected page versions visible instead of silently continuing.

4

Versioned script

Store preparation code or its revision with the resulting screenshot.

Implementation workflow

Add a safe preparation script

1

Write the exact visual state the capture requires

2

Create the smallest script that reaches that state

3

Review target scope, selectors, errors, and data handling

4

Version the script and test it against representative page revisions

Custom JavaScript screenshot example

JavaScript

Disable motion on an owned page

The script targets a controlled preparation task. It does not attempt a login or multi-step interaction flow.

const response = await fetch(
  "https://api.prod.ss.snapshot-site.com/api/v2/screenshot",
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-snapshotsiteapi-key": process.env.SNAPSHOT_SITE_API_KEY,
    },
    body: JSON.stringify({
      url: "https://example.com/preview",
      format: "png",
      width: 1440,
      fullSize: true,
      javascriptCode: `
        const style = document.createElement("style");
        style.textContent =
          "*,*::before,*::after{animation:none!important;transition:none!important}";
        document.head.appendChild(style);
      `,
    }),
  },
);

Preparation is not general automation

Custom JavaScript is valuable when a page you control needs one small deterministic adjustment. It becomes fragile when scripts accumulate clicks, navigation, retries, and implicit selectors until they resemble an untested automation framework.

Classify the workflow before implementation. If business behavior must be exercised, keep it in Playwright or another browser system that provides steps, assertions, session state, and diagnostics.

Keep the mutation narrow

Write the visual requirement first. A documentation capture may need motion disabled. A test fixture may need a known panel expanded. Avoid removing large regions merely to make a comparison pass; every mutation reduces what the artifact can prove.

Scripts should handle expected absence deliberately. Silent selector failures can produce screenshots that look valid while omitting the state the job was meant to create.

Treat code as production input

Do not forward JavaScript submitted by an untrusted browser client. Store approved scripts in version control or another reviewed configuration system, and permit them only for authorized target sets. Keep credentials and sensitive page data out of code and logs.

Record the script version, target, viewport, readiness, output format, and capture time. A future reviewer then knows which DOM mutation shaped the evidence.

The browser automation API guide explains the product boundary, while the Playwright screenshot guide covers workflows that genuinely need interaction.

Custom JavaScript Screenshot API FAQ

What is a custom JavaScript screenshot API?

It is a screenshot request that runs reviewed preparation code in the rendered page before producing the output.

Can JavaScript click through a login flow?

A one-off preparation field is not a robust browser automation session. Use Playwright or Puppeteer for multi-step authentication and interaction.

Is it safe to run arbitrary user code?

Do not accept unrestricted code from untrusted callers. Keep scripts application-owned, reviewed, scoped, and associated with authorized targets.

What are good preparation tasks?

Examples include disabling a known animation, setting a deterministic fixture toggle, or applying a controlled DOM adjustment on a page you own.

Should the script ignore missing elements?

Decide explicitly. A missing required selector may indicate a page revision and should often fail visibly rather than produce misleading evidence.

How should scripts be versioned?

Store a script revision or checksum with the capture specification and artifact so the page state can be reproduced.

Can JavaScript remove cookie banners?

Use documented consent cleanup where possible. Only remove a known element when it is outside the evidence requirement and the policy is recorded.

When is no script the better choice?

Prefer a page-provided stable preview state or DOM readiness signal when it can represent the requirement without mutation.

Related resources

Snapshot Site HomeWebsite Screenshot APIScreenshot API ExamplesTypeScript SDKAPI DocumentationPricingBrowser Automation APIJavaScript RenderingPlaywright GuideScreenshot Security

Prepare one controlled fixture safely

Review the target, script, failure behavior, and evidence policy before enabling advanced page mutation.

Get started for freeRead the API docs