Wayfern
Start building Sign in

Change a page before you capture it

Hide elements, click a button, add CSS, run JavaScript, switch to dark mode and wait for the page to settle before a screenshot or PDF is captured with Wayfern.

Updated

A page is rarely ready for a screenshot as it loads. This guide shows the capture options that change the page first: hideSelectors, click, styles, scripts, darkMode and settleMs.

One request with every change

curl -X POST https://api.wayfern.com/api/v1/screenshot \
  -H "Authorization: Bearer $WAYFERN_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/product/42",
    "capture": {
      "darkMode": true,
      "hideSelectors": ["#chat-launcher", ".promo-bar"],
      "styles": "header { position: static !important; }",
      "click": "button.show-all-reviews",
      "scripts": "document.querySelectorAll(\"time\").forEach((t) => t.remove());",
      "settleMs": 800
    }
  }'

The changes cost nothing extra. One capture is 5 credits. The same options work in the capture object of a scrape with the screenshot or pdf format.

The order of the steps

Wayfern applies the options in a fixed order, so that each step sees the result of the one before it:

  1. darkMode
  2. Cookie banner cleanup (blockCookieBanners)
  3. Ad slot hiding (blockAds)
  4. hideSelectors
  5. styles
  6. click
  7. scripts
  8. The lazy-load scroll of a full page
  9. settleMs
  10. The failIfContains check, on screenshots

Because CSS comes before the click, a hidden overlay cannot catch the click. Because the scroll comes after the script, images that the script or the click reveals are loaded too.

Hide elements

hideSelectors takes up to 50 CSS selectors, each at most 512 characters. Each one gets its own display: none !important rule. A selector that the browser cannot parse fails the request with 422 and error: "action_failed". A valid selector that matches nothing is not an error.

Click an element

click takes one CSS selector, at most 512 characters. Wayfern waits up to 5 seconds for a visible element that matches, clicks the first one, and waits a short time for the page to react.

  • No visible match within 5 seconds: 404 with error: "not_found".
  • A match that cannot be clicked, or a selector that does not parse: 422 with error: "action_failed".

Both failures are not charged. Use click to open a tab, expand a section or close a popup with its own button.

Add CSS

styles is custom CSS, at most 10,000 characters. It is added to the page as a style element. Use it to turn off sticky positioning, remove animations or change fonts. If the style element cannot be added, the request fails with action_failed.

Run JavaScript

scripts is JavaScript, at most 10,000 characters. It runs in the page as the body of an async function, so it may use await:

await new Promise((resolve) => setTimeout(resolve, 500));
document.querySelector("#cookie-wall")?.remove();
document.body.classList.add("print-ready");

Rules:

  • The script has 10 seconds, including any promise it waits for.
  • A thrown error, a rejected promise, a syntax error or a timeout fails the request with 422 and error: "action_failed". The message gives the first line of the error. It is not charged.
  • The return value is ignored.
  • A request with scripts runs in a new browser context that is closed after the capture. The script starts without cookies from earlier visits, and nothing that it stores reaches a later request.

The MCP tool capture_screenshot does not accept styles or scripts. The agents guide explains why.

Dark mode

darkMode: true tells the page that the visitor prefers a dark color scheme. Pages that support dark mode through that preference render dark. Pages without dark styles do not change. To force colors on such a page, use styles.

Let the page settle

settleMs is the wait just before the capture, 250 ms by default, at most 10,000. Increase it for animations, charts and web fonts. For content that arrives after load, use waitFor (up to 30,000 ms) or waitForSelector, which wait before any of the steps above run.

Check what you capture

After all the steps, failIfContains can reject the page when its text shows an error or a wall. See the content check guide.

Every field and limit is in the Screenshot API reference and on the limits page.

Related guides