Block reference / Browser

Take screenshot

Captures the visible page, the whole page or one element as an image, and saves it as a file, in the table or in a variable.

Only inWarpX Browser

Take screenshot captures the tab the workflow is working in: the part of the page that is visible, the whole page from top to bottom, or one element. The image can go to a file in your Downloads folder, to a table column or to a variable. Use it to keep a record of an order, a confirmation or an error as the run saw it.

The Take screenshot block's settings, filled in as in the example below.

Settings

Take a screenshot of

A page captures what is visible in the tab. A full page captures the whole page, from top to bottom. An element captures one element, cropped to its edges.

ExampleAn element
CSS Selectorwhen Take a screenshot of is An element

The element to capture. If several match, the first is used, and the page scrolls it into view first. An XPath such as //div[@id="order-summary"] works too.

Example#order-summary
Image qualitywhen the file type is JPEG

JPEG quality from 0 to 100. Lower numbers make smaller files.

Example80
Save screenshot to computer

Saves the image as a file in your computer's Downloads folder.

ExampleChecked
File namewhen Save screenshot to computer is ticked

The file's name, without the extension. A name with / in it makes subfolders in Downloads. Empty means Screenshot.

Exampleorders/order-{{variables.orderId}}
Typewhen Save screenshot to computer is ticked

PNG or JPEG. The select sits beside File name and has no label of its own. It sets the image's format everywhere it goes, the table and variables included.

ExampleJPEG
Insert screenshot to table

Puts the image into the table as a data: URL.

ExampleUnchecked
Select columnwhen Insert screenshot to table is ticked

The table column to write to.

Examplescreenshot
Assign to variable

Stores the image in a variable as a data: URL, for example to send it on with HTTP request.

ExampleUnchecked
Variable namewhen Assign to variable is ticked

The variable to write to.

ExampleorderShot
Delay time (ms)

How long to wait after the block finishes, in milliseconds. Write a range such as 1000,3000 to pick a random wait in it each run.

Example0

Every block also has the shared block settings — a description, Disable block and what to do on an error, and Finding elements explains selectors in more depth. Fields that take text accept data from earlier blocks.

What it hands on

Leaves by its single output once the image is taken. The image goes, as a data: URL, to each place you ticked: a file, a table column, a variable. With An element, it fails with ELEMENT_NOT_FOUND when no visible match appears. With no tab open, it fails with no-tab.

Example: Keep a picture of each order

  1. Open URL
  2. Take screenshot
Where Take screenshot sits in the example workflow.
  1. Add Open URL with https://shop.example.com/orders/{{variables.orderId}}.
  2. Add Take screenshot and set Take a screenshot of to An element, with CSS Selector #order-summary.
  3. Tick Save screenshot to computer, set File name to orders/order-{{variables.orderId}} and choose JPEG beside it. Set Image quality to 80.
  4. Run the workflow. For order 1042, the image is saved as orders/order-1042.jpeg in your Downloads folder.

Good to know

  • A file with the same name in the same folder is replaced without asking. When a run takes several screenshots, put something that changes in File name, such as {{variables.orderId}}.
  • An element waits up to 10 seconds for the element to be in the page and visible, then fails with ELEMENT_NOT_FOUND. For a slower page, put Element exists before it.
  • An element inside an iframe can be captured. Write the frame's selector, |>, then the element's selector, or run Switch frame first. A selector that starts with / or ( is read as XPath.
  • Type only shows while Save screenshot to computer is ticked, but it also sets the format of the image put in the table or a variable. To get a JPEG there without a file, choose JPEG, then untick Save screenshot to computer.
  • A full page can make a large data: URL. When you only need the file, leave Insert screenshot to table and Assign to variable off.

See also

  • Save assets — Save an image, video, audio or other file to your Downloads folder, from an element or a URL.
  • Element exists — Check whether an element is on the page and continue by one of two outputs.
  • Switch frame — Run the blocks that follow inside an iframe, or go back to the main page.
  • Insert data — Set variables and add values to the workflow's table, several at once.