How to Take and Annotate 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.
- 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.
Step #2. Test your website
- In this example, I’ll test a website in Windows 8.1 with Internet Explorer 11 as the browser.
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.
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.
- On the left, you have options to annotate the image by drawing rectangles and circles, add text, choose color, draw with a pencil etc.
- Using features, you can illustrate the location of a design bug.
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.
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.