Take Screenshots

Take screenshots at different points in your Selenium test

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

  1. Using the Visual Logs capability, BrowserStack Automate can automatically take screenshots during the test run
  2. 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;

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






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





Thank you for your valuable feedback

Is this page helping you?

Yes
No

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






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





Thank you for your valuable feedback!

Talk to automation expert