Browshot blog

This blog provides updates on the API and features offered by Browshot. Subscribe to our blog to stay up to date on the service.

Rich browser interactions with automation steps

Apr 5, 2020

Tags: api automation

Rich interactions with web pages With Browshot, you can inject JavaScript in any page to log in, click on elements, etc. To expand the range of possible interactions, and simplify them, we have added automation steps. These steps are available with the latest API.

On this blog, we will post several examples using automation steps, including:

Automation steps

The automation steps describe the list of commands that the browser must execute. Unlike the injected JavaScript, these steps can be carried out over multiple pages and can generate multiple screenshots. Each step contains:

  • a command:
    • type: type text, like a username or password
    • click: click on an element
    • javascript: execute and JavaScript
    • sleep: wait for a number of seconds
    • navigate: navigate to a new URL
    • screenshot: take a screenshot of the current screen, page or specific element
  • element (optional): a CSS selector targeted by the command, for example, the input field to type a username, the element to click on, etc.
  • value (optional): the number of seconds to sleep, the text to type, the URL to navigate to or the JavaScript code to execute

The examples are described in JSON format, in a JSON array (even if there is a single step). Here are some examples of steps:

[
  {"command": "click", "element": "#login"},
  {"command": "type", "element": "#username", "value":"username@mail.com"},
  {"command": "type", "element": "#password", "value":"PASSWORD"},
  {"command": "click", "element": "#submit"},
  {"command": "sleep", "value": "2"},
  {"command": "navigate", "value": "https://mysite.com/dashboard"},
  {"command": "sleep", "value": "5"},
  {"command": "screenshot"},
]

API call

Use the API call argument steps=[...] to the screenshot/create API call. The steps must be encoded as a URL, like any other argument. The encoding is done automatically if you use any of the libraries we provide. Remember that even if you have only one step, it must to be included in a JSON array. You can also try the automation steps in your dashboard.

Note: The automation must be completed within the delay specified by the API. You should set the delay to 30 seconds (delay=30), which is the maximum delay authorized today. You will get an extra 30 seconds per screenshot to take, up to 5 minutes in total. For example, if you take one screenshot, all your automation steps must be completed within 30 seconds of the initial page load. If you take three screenshots, all the steps must be completed within 90 seconds.

Cost

The first screenshot costs one credit for desktop browsers, and two credits for mobile devices. Additional screenshots cost one credit.

Deprecating multiple shots

Automation steps are a better way to take multiple screenshots. The shots and shot_interval options are deprecated and will soon removed soon.

Don't hesitate to contact us if you need help with the automation steps.

See more...

Take a screenshot of a div or any element

Mar 18, 2020

Tags: api

Take screenshot of a div or any element on a page We have updated the API to allow Browshot users to take a screenshot of a specific element on the page, for example a div. With the new target argument, you can specify a CSS selector to target. If the element is not found on the page, a regular screenshot of the page or screen is taken. If the element is found more than once, we will take a screenshot of the first element.

Screenshot of a div

Let's go through a real example. On the page https://blitapp.com/, we'd like to take a screenshot of the middle section highlighted in red below:

The first step is to figure out the CSS selector for this element. Navigate to https://blitapp.com/. Press F12 (in most browsers) to open the Developer tools. In the Developer tools, go to Elements. Highlight the section of the page you want to capture. This will highlight the corresponding HTML code in the Developer tools:

Then, right click on the HTML code highlighted, chose Copy > Copy selector:

You copied the CSS selector that can be used with Browshot. If you paste it anywhere, you'll find the value of the CSS selector:

#features

You can specify target=%23features (# is encoded as %23) in your API call, using one of the many libraries we provide. Or you can use the dashboard. Add the target under Advanced options.

Browshot will create a screenshot that contains only the element you are targeting. You can see the screenshot generated at https://browshot.com/share/csOgiIU2Aos5zNQz.

Don't hesitate to contact us if you need help getting the CSS selector you want to capture.

See more...

Browshot has acquired blitapp.com

Sep 20, 2019

Schedule screenshots with blitapp Browshot has acquired the screenshot scheduler Blitapp.com. Blit allows users to schedule screenshots and receive them directly in their inbox.

There will be no impact to the Browshot users.

This second acquisition, after Thumbalizr, shows the commitment of the Browshot team to be a major player in the screenshot market. We are committed to grow our business and to make Browshot your reliable partner.

Browshot is the most powerful screenshot service. Browshot offers unique features such as automated uploads to S3, custom requests (cookies, POST data, custom JavaScript, etc.), mobile browsers like the iPhone and Android, etc.

Thumbalizr is designed to easily embed screenshots on a website. Thumbalizr focuses on simplicity and ease of use

Blit allows users to schedule multiple screenshots and to receive the thumbnails automatically in their inbox.

Don't hesitate to contact us if you have any question about Browshot, Blit or the acquisition.

See more...

Node.js module for Browshot

Sep 1, 2019

Tags: Libraries Node.js

Take web site screenshots with Node.js We have released a Node.js module for Browshot. The module is available through npm. The source code is available on github. You can find more details on our Node.js page.

As usual, we have added code samples for all API calls on the API documentation page. The code samples include your API key if you are logged in, they can be downloaded and run as it.

Download and run code samples for Node.js
Code samples from the API documentation

We also have libraries for PHP, Perl, Python, Ruby and C# .Net.

See more...

Chrome 75 available

Jun 8, 2019

We have upgraded Chrome to version 75, the latest version from Google at this time.

See more...

Blog home page

    Blog archive - Subscribe

    Try it for free

    no credit card required

    About Us

    Browshot is a web service to create real time web screenshots in a multitude of virtual devices, including mobile devices like the iPhone 3 & 4, iPad, Android Nexus, etc.

    You can use the web dashboard, or our full-featured API.

    • Real time screenshots

    • 15+ mobile devices: iPhone, iPad, Android, etc.

    • 30+ desktop resolutions

    • Fast and reliable

    • Thumbnails of any size, any ratio

    • Full API, open-source libraries