BNOD
Todas las plantillas
screenshotmonitoringtabs

Screenshot two URLs to disk

Open two URLs in new tabs, capture each as PNG, save to disk. Tabs stay open. Adapt the URL list to your monitoring set.

Workflow9 blocks
  1. ManualManual
  2. Open example.comhttps://example.com
  3. Wait for example.com to settleh1
  4. Capture example.com→ vars.shot_a
  5. Save example.com PNG{{$('Capture example.com').dataUrl}} → example.png
  6. Open example.orghttps://example.org
  7. Wait for example.orgh1
  8. Capture example.org→ vars.shot_b
  9. Save example.org PNG{{$('Capture example.org').dataUrl}} → example-org.png

You're monitoring a small set of pages for visual regression — a landing page, a checkout flow, a marketing experiment — and you want a snapshot in your downloads folder every time the page is updated. Manual Cmd+Shift+4 cropping gets old. This template opens two URLs in separate tabs, captures each as a PNG, and saves both to disk. Tabs stay open so you can keep reviewing. Useful for design QA, marketers tracking competitor landing page changes, or anyone who wants a low-effort visual archive.

How this workflow works

Nine blocks arranged as two parallel "open, wait, shoot, save" pipelines. The template ships with two URLs but the pattern scales.

  1. manual_trigger — Sidepanel Run, targetTab: "new".
  2. new_tab — Opens https://example.com in a fresh tab.
  3. wait_for — Waits for <h1> to be visible. This is your "page settled" signal; for a real monitoring set you'd point this at whatever element appears late on the page (e.g. .checkout-button or [data-loaded]).
  4. take_screenshot — Captures the visible viewport as a base64-encoded PNG. The as: "shot_a" field is metadata (helps with debugging) but the actual data is exposed as $('Capture example.com').dataUrl.
  5. save_file — Writes the data URL to example.png in your Downloads folder. Chrome's native download bar appears.
  6. new_tab — Opens https://example.org in another fresh tab. The first tab stays open in the background.
  7. wait_for — Same wait pattern, timeoutMs: 15000 for the slower second site.
  8. take_screenshot — Captures that tab.
  9. save_file — Writes example-org.png to disk.

Both PNGs end up in your default Downloads location. The workflow doesn't close any tabs — you can compare them visually after the run.

Customising it for your case

This template is a "monitoring set" starter; the URLs and filenames are placeholders.

  • Real URLs. Edit the data.url on each new_tab to point at the pages you actually monitor. Update save_file.filename to match — homepage.png, pricing.png, signup-flow.png. For date-stamped history, add a javascript_code block early in the flow that writes new Date().toISOString().slice(0,10) to a variable, then use homepage-{{vars.today}}.png in the filename.
  • Viewport, not full page. take_screenshot in v1 captures the visible viewport area. Full-scrolling-page capture isn't a built-in option yet — workaround is to scroll the page (via javascript_code calling window.scrollTo) and take a second screenshot.
  • Wait for a specific element. Replace the wait_for selector: "h1" with whatever signals "page loaded" on your target. For SPAs, that's usually the main content container appearing or a loading spinner disappearing.

Common gotchas

Three things to watch. First: take_screenshot captures the viewport, not the full page. If your hero section is fine but the below-the-fold content is what changed, you'll miss it — scroll the page first (via javascript_code running window.scrollTo(0, document.body.scrollHeight)) and snapshot again, or split a long page into two screenshots. Second: PNG files for large screen captures can be 2-5 MB each — over a few weeks of daily snapshots, downloads pile up. Add date-stamped filenames so old snapshots are easy to identify and prune. Third: pages that use lazy-loading images may snapshot before images load, leaving blank placeholders. Add a delay block (or a longer wait_for) between page settle and screenshot to give images time to swap in.

FAQ

Where do screenshots get saved? Chrome's default Downloads folder, with the filename you specify. The browser asks for permission the first time you run a save_file block — grant it for the extension origin.

Can I email or upload the screenshots? Not from save_file directly — that block writes to disk only. Chain a http_request block with body.content: "{{$('Capture example.com').dataUrl}}" to POST to a webhook (Discord, Slack, S3 presigned URL). The data URL format is data:image/png;base64,... — most upload endpoints accept this.

How is this different from a browser extension like "Awesome Screenshot"? Those tools are interactive one-shot captures. This template is a scheduled, reproducible batch — same URLs every time, no clicks needed. Automa, Browserflow, and Bardeen all have screenshot blocks; the file-save flow is the differentiator.

Instalar en BNOD

Works on any site.

Plantillas relacionadas