How to Take and Annotate Screenshots with BrowserStack

How to Take Screenshots with BrowserStack

BrowserStack is a tool that we constantly rely on at OSTraining. It’s an online service that makes it easy to do cross-browser compatibility testing.

When we’re developing sites, we use Browserstack to test our work. One key feature is the ability to take screenshots and add annotations.

This is really useful for when you find a design issue in a specific browser and want to report it to the designer in charge.

Step #1. Login

  • Go to the BrowserStack website and sign in.

browserstack on ios

  • After logging in, click “Skip installation” or “Install”, depending if you want to add an extension to your browser to access all the BrowserStack features.

access all the BrowserStack features

Step #2. Test your website

  • In this example, I’ll test a website in Windows 8.1 with Internet Explorer 11 as the browser.

Windows 8.1 with Internet Explorer with BrowserStack

Once the browser loads, you will notice a few settings such as:

  • Switch, to change browser and Operative System.
  • Screensize, to change the browser size.
  • Issue tracker
  • Capture a bug
  • …and more!

We will use the Capture a bug feature to generate screenshots through BrowserStack.

generate screenshots through BrowserStack

Step #3. Capture a bug

This feature is useful when you detect a bug in a website and want to report it, together with a screenshot to make it clear what’s going on.

In this context, a bug can be any design issue such as the wrong spacing, unreadable text or broken layouts.

When you detect any visual bug, click on the “Capture a bug” button (the camera icon), and wait until the screenshot is generated.

Capture a bug using screenshots with BrowserStack

  • On the left, you have options to annotate the image by drawing rectangles and circles, add text, choose color, draw with a pencil etc.

draw on screenshots with BrowserStack

  • Using features, you can illustrate the location of a design bug.

illustrate the location of a design bug with BrowserStack

Step #4. Save screenshot

  • Once you’re done, click Save > Save and download to export the screenshot. An image file will be downloaded to your computer.

Export Screenshots with BrowserStack

We’ve used this technique often to help us debug WordPress, Joomla and Drupal sites. If you use Browserstack, I hope you find this helpful.

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Blog Rating
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x