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 browser 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
