Many times we want to have a screenshot of the screen/web page that we are working with. In order to do that, Selenium Python API provides us with the simplest of solution.

We can use the save_screenshot( ) method to take a screenshot of the web page or url that we are working with right now.

Here is a working code for Firefox

__author__ = 'rahul'

import unittest
from selenium import webdriver

class MyScreenshot(unittest.TestCase):

    def setUp(self):

        self.driver = webdriver.Firefox()
    def test_takescreenshot(self):
        driver = self.driver
        driver.maximize_window()
        driver.get('http://www.espncricinfo.com/')

        driver.save_screenshot('/home/rahul/Downloads/firefoximage.png')

    def tearDown(self):
        self.driver.quit()

if __name__ == '__main__':
    unittest.main()

Taking Screenshot on Chrome vs Taking Screenshot in Firefox

You will notice that there is a difference when it comes to taking screenshot between Firefox and Chrome. When you use the ChromeDriver to initiate a chrome browser and try taking a screenshot, it will only take screenshot of the visible window- that much area which is visible to a user on browser at a single glance

This screenshot is taken with a Chrome Driver, and so it only shows that area which is visible on browser to a user.

Firefox on the other hand behaves differently. FirefoxDriver takes the screenshot of the whole tab- up to the document end and so you have a different screenshot when you use Firefox browser.

This whole tab screenshot comes if you’re using FirefoxDriver. Always keep this thing in mind when using this function.

Why?

The difference occurs due to an issue with ChromeDriver, and Chromium. Here is the bug link that has been submitted and has not been fixed for the last two years. As per the new Webdriver specifications mentioned here, the screenshot method will only take the screenshot of the view port and that is why it looks like the Chrome driver screenshot issue won’t be resolved (ever).

Taking Screenshot of Element in Selenium 4

After release of Selenium 4, there is no need to have an extra library to take the screenshot of a specific element. So you won’t have to do this. Instead you can use the Selenium library itself to take the screenshot of an element.

svc=Service(ChromeDriverManager().install())
driver = webdriver.Chrome(service=svc)
driver.maximize_window()
driver.get('https://testerops.com/')
time.sleep(5) #used because Chrome 103 has issues
element_for_screenshot = driver.find_element(By.CSS_SELECTOR,"h2.site-title > a")
element_for_screenshot.screenshot("element_scr.png")

As you can see from the above code, it is going to take the screenshot of the header element of my blog. You can directly call the screenshot method on the specific element and it will take the screenshot of that particular element, no more need to cut and crop the image.