Take Screenshots

Take screenshots at different points in your Selenium test

You can take screenshots of your Selenium test in the following two ways:

Using the Visual Logs capability, BrowserStack Automate can automatically take screenshots during the test run
Explicitly from your test script as and when required and download the screenshot to your local machine

Automatically capture screenshots

BrowserStack has a Visual Logs feature to take screenshots automatically during your Selenium test without you initiating a screenshot explicitly through test code.

Note: Visual Logs would be visible in the Automate dashboard only. If you want to download the screenshots to your local machine, then please take a screenshot explicitly from your test script.

These contain the screenshots that are auto-generated during each Selenium command that your code executes. Visual logs help with debugging the exact step and how the page was rendered when the failure occurred. They also help identify any layout or design related issues with your web pages on different browsers.

Visual logs are disabled by default. You can enable them by using the browserstack.debug capability.

Capability	Description	Expected values
`browserstack.debug`	Enable visual logs	A string. Defaults to `false` `true` if you want to enable the visual logs. `false` otherwise.

For example, this is how you enable visual logs:

// Enabling visual logs

DesiredCapabilities caps = new DesiredCapabilities();
caps.setCapability("browserstack.debug", "true");

// Enabling visual logs

var capabilities = {
 "browserstack.debug" : "true"
}

// Enabling visual logs

DesiredCapabilities caps = new DesiredCapabilities();
caps.SetCapability("browserstack.debug", "true");

# Enabling visual logs

$caps = array(
 "browserstack.debug" => "true"
);

# Enabling visual logs

capabilities = {
 "browserstack.debug" : "true"
}

# Enabling visual logs

caps = Selenium::WebDriver::Remote::Capabilities.new
caps["browserstack.debug"] = "true"

# Enabling visual logs

my $capabilities = {
 "browserstack.debug" => "true"
}

Take screenshot from test script explicitly

You can choose when to take a screenshot from your test script and also save these screenshots to the machine that runs the automated tests. If you are on a CI/CD setup, make sure you transfer these screenshots before you wind down the machine.

Here is how you take a screenshot and save it to your machine:

// Import the relevant packages

// ... your test code

// Take a screenshot and save it to /location/to/screenshot.png

driver = (RemoteWebDriver) new Augmenter().augment(driver);
File srcFile = (File) ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
FileHandler.copy(srcFile, new File("/location/to/screenshot.png"));

// ... your test code

var fs = require('fs');

webdriver.WebDriver.prototype.saveScreenshot = function(filename) {
  return driver.takeScreenshot().then(function(data) {
      fs.writeFile(filename, data.replace(/^data:image\/png;base64,/,''), 'base64', function(err) {
          if(err) throw err;
      });
  })
};

driver.saveScreenshot('snapshot1.png')

using System;
using OpenQA.Selenium;
using OpenQA.Selenium.Remote;

namespace SeleniumTest
{
    public class ScreenShotRemoteWebDriver : RemoteWebDriver, ITakesScreenshot
    {
        public ScreenShotRemoteWebDriver(Uri uri, OpenQA.Selenium.Chrome.ChromeOptions dc)
          : base(uri, dc)
        {
        }

        public new Screenshot GetScreenshot()
        {
            Response screenshotResponse = this.Execute(DriverCommand.Screenshot, null);
            string base64 = screenshotResponse.Value.ToString();
            return new Screenshot(base64);
        }
    }

    class Program
    {
        static void Main(string[] args)
        {
            ScreenShotRemoteWebDriver driver;
            //IWebDriver driver;
            OpenQA.Selenium.Chrome.ChromeOptions capability = new OpenQA.Selenium.Chrome.ChromeOptions();
            capability.AddAdditionalCapability("os_version", "10", true);
            capability.AddAdditionalCapability("resolution", "1920x1080", true);
            capability.AddAdditionalCapability("browser", "Chrome", true);
            capability.AddAdditionalCapability("browser_version", "latest-beta", true);
            capability.AddAdditionalCapability("os", "Windows", true);
            capability.AddAdditionalCapability("name", "Take Screenshot Sample Test", true); // test name
            capability.AddAdditionalCapability("build", "Screenshot Test Build", true); // CI/CD job or build name
            capability.AddAdditionalCapability("browserstack.user", "YOUR_USERNAME", true);
            capability.AddAdditionalCapability("browserstack.key", "YOUR_ACCESS_KEY", true);
            driver = new ScreenShotRemoteWebDriver(
                new Uri("https://hub-cloud.browserstack.com/wd/hub/"), capability
                );
            driver.Navigate().GoToUrl("https://www.google.com/ncr");
            Console.WriteLine(driver.Title);

            IWebElement query = driver.FindElement(By.Name("q"));
            query.SendKeys("Browserstack");
            query.Submit();
            Console.WriteLine(driver.Title);

            ITakesScreenshot screenshotDriver = driver as ITakesScreenshot;
            Screenshot screenshot = screenshotDriver.GetScreenshot();
            screenshot.SaveAsFile("/your/full/screenshot/path/ss.png", OpenQA.Selenium.ScreenshotImageFormat.Png);

            driver.Quit();
        }
    }
}

file_put_contents('screenshot.png', $web_driver->takeScreenshot());

driver.save_screenshot('screenshots.png')

driver.save_screenshot("screenshots.png")

open(FH,'>','screenshot.png');
binmode FH;
my $png_base64 = $driver->screenshot();
print FH MIME::Base64::decode_base64($png_base64);
close FH;

Did this page help you?

Yes No

We're sorry to hear that. Please share your feedback so we can do better

This page doesn't have what I am looking for
The content / code samples on this page are inaccurate or outdated
This page is difficult to understand
Unable to find relevant documentation for my use case
Other (please tell us more below)

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked

This page has exactly what I am looking for
This content & code samples are accurate and up-to-date
The content on this page is easy to understand
Other (please tell us more below)

Thank you for your valuable feedback

Take Screenshots

Automatically capture screenshots

Take screenshot from test script explicitly

We're sorry to hear that. Please share your feedback so we can do better

We're continuously improving our docs. We'd love to know what you liked

We're sorry to hear that. Please share your feedback so we can do better

We're continuously improving our docs. We'd love to know what you liked

Select a language or framework of your choice

Select a language or framework of your choice