Capturing screenshots of your tests is one of the most important features you can give to an automation engineer. It’s the easiest way to actually understand from a report, why a test failed and how to reproduce it.
While our OnDemand will help you record videos of your entire test, sometimes you just want a screenshot. Selenium supports capturing screenshots on remote machines, as Sean discussed in a previous Tip of the Week (Taking ScreenShots on the Server).
Selenium has two methods dedicated to screenshot taking:
- CaptureScreenshot
- CaptureEntirePageScreenshot
An example of using the later function shows that it’s pretty amazing, giving you a full rendering of the page:
While this function is perfect, it only works with Firefox, which greatly limits it’s usefulness. Unfortunately due to limited extension support in other browsers it’s going to be a while before we see this functionality ported.
If you’re stuck with the cross-browser version you’ll get limited success. We can see up to the fold after opening a new page, but we have no idea what’s going on in the depths of our page.
This just isn’t going to work if we want to test something below the fold. There is a partial workaround, focus(). Focus will force all browsers to scroll the page so the selected element is visible. Here’s an example of a test we run to view the bottom of our homepage:
def test_case(self):
browser = self.browser
browser.open("/")
browser.focus("css=a.indexTwitter")
png = browser.capture_screenshot_to_string()
f = open('screenshot.png', 'wb')
f.write(png.decode('base64'))
f.close()
While this requires more code than Firefox + selenium, it will let you debug those hard to find rendering issues without having to boot up a virtual machine.
I hope you find this useful and start taking screenshots as soon your tests get harder to debug. If you need more visual debugging tools, our service Sauce OnDemand will capture full screen videos which will record every single selection event without any extra code!
Thank for tuning in, and check back after the new year for more Selenium Tip of The Week from Sauce Labs!
PS: You should follow us on twitter
Santiago
Related posts:
Selenium Tips: Taking ScreenShots on the Server
Selenium Tips: Improving your waiting skills
Selenium Tips: Upload files on browsers running over remote machines
Selenium Tips: Infinite Loops Take Forever
Selenium Tips: Efficiently removing cookies
Is there any way of capturing a single element? I can already think of cases where snapping a single DIV would be really useful. Consider this a vote for CaptureElementScreenshot in v2!
Well, there isn’t any special command right now and I can’t think of a simple way to do it from selenium itself. It’s definitely a great idea for a new command.
If I had to find a quick way to do something similar right now, I’d use runScript() with some javascript magic to add a green or yellow border to the element and then take the screenshot. At least the element would be easily recognizable.
Hi guys,
Is there a way to do this using IE??? I think it only works in Firefox
It is really a nice and useful piece of information. I’m glad that you shared this helpful information with us. Please keep us informed like this. Thanks for sharing.