CrossBrowserTesting.com

A Design, Development, Testing Blog

  • Product Overview
  • Pricing
  • Back Home
  • Free Trial
  • Design
  • Development
  • Manual Testing
  • Test Automation
  • Visual Testing

Selenium 101: How To Take Screenshots During Automated Tests

February 23, 2018 By Daniel Giordano Leave a Comment

visual testing selenium screenshots

 

Have you ever wished that there was a way to combine visual and functional testing without having to either write a new script or manually run both alongside each other? The ability to take automated screenshots in visual testing is clearly valuable when comparing application design across browsers. However, for teams that incorporate test automation, it can also be useful to have screenshots taken when running checks.

Having the ability to debug automated test failures is one of the best ways for QA and Development teams to speed up their shipping, but it can’t be done without proper reporting. Creating a reliable and accurate pipeline of defect feedback is important for teams to be able to understand errors and identify improvements, and sharing screenshots through Jira, Slack, or Email extends these capabilities your team. But how do you take screenshots during a Selenium test?

Well, at CrossBrowserTesting, we strive to provide an all-in-one testing platform and this is just the kind of problem we love to solve. Customers have been enjoying using our automated screenshot capability for years, measuring responsiveness and visualizing mobile layouts on hundreds of browsers at once. Below, we’ll go over some of the ways in which you can combine our Automated Screenshot capability and your Selenium tests.

Use Cases

We’ve already come to the conclusion that it’s possible to combine visual and functional testing, but now let’s get to the why:

  • Take screenshots when tests fail at the exact moment of failure to help developers debug what might have gone wrong.
  • Take screenshots during your test to capture specific elements in your viewport to test specific layouts.
  • Capture each step of your test case both functionally and with a screenshot.

Taking Screenshots When Tests Fail:

To take a screenshot when an assertion fails in your Selenium test, we’ll invoke CrossBrowserTesting’s API. The API endpoint for taking a snapshot can be found here. As you can see, if you already have a Selenium test started, it’s as easy as making a POST request inside your script with the Selenium session ID that you already have. Each WebDriver object creates its won Selenium Session ID, and our hub uses that ID to match up test results. You’ll find an example of doing this in Python:

		from selenium import webdriver
		import requests

		auth = (username,authkey)		

		caps = {'browser_api_name': 'IE11', 'os_api_name': 'Win7x64'}

		# create our RemoteWebDriver pointed at CBT's hub
		driver = webdriver.Remote(
		    desired_capabilities=caps,
		    command_executor="http://%s:%s@hub.crossbrowsertesting.com:80/wd/hub"%(username, authkey)
		)

		# grab the session ID for this test
		session_id = driver.session_id

		driver.get('https://www.crossbrowsertesting.com')

		# grab a snapshot of our site
		snapshot_data = requests.post('https://crossbrowsertesting.com/api/v3/selenium/' + session_id + '/snapshots',auth=auth).json()

		# here's the URL where you can see your snapshot
		print(snapshot_data['show_result_public_url'])

		driver.quit()

From there you should be able to see the results from within the app, and the script itself will have printed out a public facing URL where your results can be seen during execution.

Creating Snapshot’s Through CrossBrowserTesting’s API

CBT’s API provides many useful functions that can enhance your ability to retrieve test results through your automated tests. One of the more commonly asked questions is “how can I take a snapshot during my Selenium test?” Doing so through our API is easy, and it can come in handy when catching the page during those all too prevalent bugs.

The API endpoint for taking a snapshot can be found here. As you can see, if you already have a Selenium test started, it’s as easy as making a POST request inside your script with the Selenium session ID that you already have. Each WebDriver object creates its won Selenium Session ID, and our hub uses that ID to match up test results. You’ll find an example of doing this in Python here:

		from selenium import webdriver
		import requests

		auth = (username,authkey)		

		caps = {'browser_api_name': 'IE11', 'os_api_name': 'Win7x64'}

		# create our RemoteWebDriver pointed at CBT's hub
		driver = webdriver.Remote(
		    desired_capabilities=caps,
		    command_executor="http://%s:%s@hub.crossbrowsertesting.com:80/wd/hub"%(username, authkey)
		)

		# grab the session ID for this test
		session_id = driver.session_id

		driver.get('https://www.crossbrowsertesting.com')

		# grab a snapshot of our site
		snapshot_data = requests.post('https://crossbrowsertesting.com/api/v3/selenium/' + session_id + '/snapshots',auth=auth).json()

		# here's the URL where you can see your snapshot
		print(snapshot_data['show_result_public_url'])

		driver.quit()

From there you should be able to see the results from within the app, and the script itself will have printed out a public facing URL where your results can be seen during execution.

It’s not difficult to see where adding screenshots could be useful when running your scripts in Selenium. By logging errors and keeping track of whether tests pass or fail, keeping accurate documentation is more attainable for teams to release software faster and without bugs.

Browse the rest of our Selenium 101 series to learn more about getting started with Selenium.

  • Selenium 101: How to Automate Your Login Process
  • Selenium 101: Running Your Test Against Two Browsers at Once
  • Selenium 101: Navigating Waits and Sleeps
  • Selenium 101: Automating User Actions
  • Selenium 101: Generating Test Reports
  • Selenium 101: Mastering Selenium Design Patterns
  • Selenium 101: Managing Multiple Tabs

Filed Under: how-to, Selenium Tagged With: screenshots, Selenium, test automation, visual testing

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Try CrossBrowserTesting

Everything you need for testing on the web. Browsers & Devices included.


  • Grid In The Cloud
  • Simple CI Integrations
  • Native Debugging Tools
  • Real iOS and Android
  • 2050+ Browser/OS Combinations
  • Intuitive REST API

Start Testing Today

Want Testing Tips?

Want the latest tips & strategies from industry experts right to your inbox? Sign up below.
 

Join Over 600,000 Testers & Developers And Start Testing Today

Learn more Free Trial

Features

  • Live Testing
  • Selenium Automation
  • Automated Screenshots
  • Screenshot Comparison
  • Local Testing
  • Real Devices

Solutions

  • Automated Testing
  • Visual Testing
  • Manual Testing
  • Enterprise
  • Internet Explorer

Resources

  • Browsers & Devices
  • Blog
  • Webinars
  • Integrations
  • ROI Calculator

Company

  • About Us
  • Careers
  • Plans
  • Terms of use
  • Security

Support

  • Help Center
  • API Docs
  • Schedule A Demo
  • Contact Us
  • Write For Us