Skip to main content

BrowserStack

 

By default, we are using Chrome as our browser to take screenshots. But now we have an alternative to using your Browserstack subscription to create screenshots in different browsers.

You need to have Automate Pro plan so we could use Screenshot API. Here is an FAQ (https://www.browserstack.com/support/screenshots) about this product of Browserstack.

The way we do integration is that you can use our CLI tool to create and upload screenshots from Browserstack to your project in Diffy.

First, you will need to install Diffy CLI.

To authenticate Diffy CLI you need to go to My Account -> Keys and generate an API key.

Add to CLI tool by using command 

diffy auth:login <key>

Next, go to your Browserstack’s account settings. You will need your username/key for automation. 

Important note: we do not store your credentials in Diffy anywhere. CLI tool stores them locally, creates screenshots, and uploads them to Diffy.

BrowserStack username accesskey

Save your credentials:

diffy browserstack:save-credentials <username> <key>

Next check the list of all possible browsers / OS combinations that Browserstack provides. Choose the ones you would like to use.

diffy browserstack:browsers-list

Save BrowserStack credentials. List of browsers

I assume you already have a project in Diffy you will be uploading screenshots too. If not -- go ahead and create it. Browserstack integration will be using a list of URLs to create screenshots.

Once you are done with the project’s settings let's start the job:

diffy browserstack:screenshot <project-id> <base-url> <browsers-os-keys>

Please specify the base URL of the site you are testing. Browser / OS keys is a coma-separated list of the combinations you would like to use by Browserstack.

BrowserStack take screenshots

Once the job is completed you will see a new screenshot set being created in your Project.

It is a good idea to compare only Browserstack generated sets between each other in the diff.

Diffy uploaded screenshots

Compare screenshots from BrowserStack
 

Please reach out if you need any help setting this integration up.