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.

Take screenshots of a carousel

Apr 8, 2020

Tags: api automation

Take screenshots of all the positions of a carousel The new automation steps make it easy to take several screenshots of the same page in different states. This is particularly useful if you want to capture all the positions of a carousel or slider. In this post, we will show you how to take screenshots of all carousel elements shown at https://walmart.com/. At the top of the page, the carousel rotates five different products:

Carousel at Walmart.com

The carousel has five dots that allow the user to manually display an element. With the automation steps, we can click on each dot to move the carousel, and then take a screenshot of the new position. We must get the CSS selector that corresponds to each dot. To do this, press F12 in your browser to open the Developer Tools. In the top left corner of the Developer Tools, click on the mouse cursor highlighted in red below.

Developer Tools

Then, click on the first dot in the carousel to select it. This highlights the corresponding HTML code in the Developer Tools. Right-click on the highlighted code and choose Copy > Copy selector:

Developer Tools CSS selector

This copied the CSS selector of the first dot. If you paste it in a test editor, you get this value:

body > div.js-content > div > div > div.js-body-content.page-content-wrapper > div > div > section:nth-child(1) > div:nth-child(1) > div > div:nth-child(1) > div > div.slider-decorator-0 > div > div > ul > li:nth-child(2) > div

With the CSS selector, we can create the steps to take a screenshot of the first carousel element. We click on the first dot, then take a screenshot:

{"command":"click", "element":"body > div.js-content > div > div > div.js-body-content.page-content-wrapper > div > div > section:nth-child(1) > div:nth-child(1) > div > div:nth-child(1) > div > div.slider-decorator-0 > div > div > ul > li:nth-child(2) > div"},
{"command":"screenshot"}

We repeat the same process for the next four dots to get the full list:

{"command":"click", "element":"body > div.js-content > div > div > div.js-body-content.page-content-wrapper > div > div > section:nth-child(1) > div:nth-child(1) > div > div:nth-child(1) > div > div.slider-decorator-0 > div > div > ul > li:nth-child(2) > div"},
{"command":"screenshot"},
{"command":"click", "element":"body > div.js-content > div > div > div.js-body-content.page-content-wrapper > div > div > section:nth-child(1) > div:nth-child(1) > div > div:nth-child(1) > div > div.slider-decorator-0 > div > div > ul > li:nth-child(3) > div"},
{"command":"screenshot"},
{"command":"click", "element":"body > div.js-content > div > div > div.js-body-content.page-content-wrapper > div > div > section:nth-child(1) > div:nth-child(1) > div > div:nth-child(1) > div > div.slider-decorator-0 > div > div > ul > li:nth-child(4) > div"},
{"command":"screenshot"},
{"command":"click", "element":"body > div.js-content > div > div > div.js-body-content.page-content-wrapper > div > div > section:nth-child(1) > div:nth-child(1) > div > div:nth-child(1) > div > div.slider-decorator-0 > div > div > ul > li:nth-child(5) > div"},
{"command":"screenshot"},
{"command":"click", "element":"body > div.js-content > div > div > div.js-body-content.page-content-wrapper > div > div > section:nth-child(1) > div:nth-child(1) > div > div:nth-child(1) > div > div.slider-decorator-0 > div > div > ul > li:nth-child(6)"},
{"command":"screenshot"}

With one call to Browshot, and these 10 steps, you will get five screenshots showing the 5 positions of the carousel. If you want to capture just the carousel content, and not the entire page or screen, you can specify to take a screenshot of just the carousel:

{"command":"screenshot", "element":"body > div.js-content > div > div > div.js-body-content.page-content-wrapper > div > div > section:nth-child(1) > div:nth-child(1)"}

Creating this kind of automation can be difficult at first. We are here to help. Don't hesitate to contact us if you need assistance.

See more...

Login to a website to take a screenshot

Apr 6, 2020

Tags: api automation

Login to a website before taking a screenshot With the introduction of automation steps, it is easier to log in to any website before taking a screenshot. In this post, we'll show you how to log in to a website, Browshot, and take a screenshot after authentication.

To log in from the home page of https://browshot.com/, a user must click on Login. This displays a login form where the user has to enter his username and password. Then the user clicks on "Login" to obtain access to his dashboard.

Login to Browshot

Find the element to interact with

We're going to build the different steps to log in; then we'll navigate to a different page in the dashboard and take a screenshot. The hardest part of the process is to get the identifier (called CSS selector) for each element we want to interact with: the button to click on, the input box in which to enter our username, etc. In order to find this identifier, we need to use the Developer Tools from your web browser. Press F12 to open the Developer Tools. Navigate to https://browshot.com/. In the Developer Tools, click on the mouse cursor in the top left corner (highlighted in red below).

Developer Tools

Then, move your mouse over the Login button at https://browshot.com/. The HTML code corresponding to the button is now highlighted in the Developers Tools. Right-click on it and choose Copy > Copy selector:

CSS selector CSS selector

If you paste the value in a text editor, you get:

#login-btn

This is the CSS selector that identifies the Login button. We're ready to take the first step to click on the Login button:

{"command":"click", "element":"#login-btn"}

The next steps are to enter the username and the password in the login form. In your browser, manually click on the Login button to show the form. In the same way, use the Developer Tools to copy the CSS selector for the username and password input fields:

#login-form > input[type=text]:nth-child(1)
#login-form > input[type=password]:nth-child(2)

We use the "type" command to type the username and passwords in their respective input fields:

{"command":"type", "element":"#login-form > input[type=text]:nth-child(1)", "value":"username@email.com"},
{"command":"type", "element":"#login-form > input[type=password]:nth-child(2)", "value":"PASSWORD"},

Then, we click on the Login button at the bottom of the form:

{"command":"click", "element":"#login"}

This last step authenticates the user and loads https://browshot.com/dashboard. We can take a screenshot of the dashboard, or any other page. After login in, we wait a couple of seconds for the login to work, then navigate to https://browshot.com/dashboard/settings:

{"command":"sleep", "value":"5"},
{"command":"navigate", "value":"https://browshot.com/dashboard/settings"}

Finally, we wait a few seconds to allow the page to load. Then we take a screenshot of it:

{"command":"sleep", "value":"5"},
{"command":"screenshot"}

The complete list of steps is:

[
  {"command":"click", "element":"#login-btn"},
  {"command":"type", "element":"#login-form > input[type=text]:nth-child(1)", "value":"username@email.com"},
  {"command":"type", "element":"#login-form > input[type=password]:nth-child(2)", "value":"PASSWORD},
  {"command":"click", "element":"#login"},
  {"command":"sleep", "value":"5"},
  {"command":"navigate", "value":"https://browshot.com/dashboard/settings"},
  {"command":"sleep", "value":"5"},
  {"command":"screenshot"}
]

You can add more steps to navigate to multiple pages and take multiple screenshots, click on elements in the pages, etc. We will post more examples on this blog.

Creating this kind of automation can be difficult at first. We are here to help. Don't hesitate to contact us if you need assistance.

See more...

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...

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