How to Take Partial Screenshot with Selenium Webdriver in Python

How to take partial screenshot with Selenium WebDriver in python?

Other than Selenium, this example also requires the PIL Imaging library. Sometimes this is put in as one of the standard libraries and sometimes it's not, but if you don't have it you can install it with pip install Pillow

from selenium import webdriver
from PIL import Image
from io import BytesIO

fox = webdriver.Firefox()
fox.get('http://stackoverflow.com/')

# now that we have the preliminary stuff out of the way time to get that image :D
element = fox.find_element_by_id('hlogo') # find part of the page you want image of
location = element.location
size = element.size
png = fox.get_screenshot_as_png() # saves screenshot of entire page
fox.quit()

im = Image.open(BytesIO(png)) # uses PIL library to open image in memory

left = location['x']
top = location['y']
right = location['x'] + size['width']
bottom = location['y'] + size['height']

im = im.crop((left, top, right, bottom)) # defines crop points
im.save('screenshot.png') # saves new cropped image

and finally the output is... the Stackoverflow logo!!!

Now of course this would be overkill for just grabbing a static image but if your want to grab something that requires Javascript to get to this could be a viable solution.

How to capture a screenshot of a certain size of window with selenium?

You can take a screenshot of the entire screen and then crop from it the part according to desired dimensions.

This will be done with use of PIL Imaging library.

It can be installed with

pip install Pillow

The code can be as following:

from selenium import webdriver
from PIL import Image
from io import BytesIO

#save screenshot of entire page
png = driver.get_screenshot_as_png() 

#open image in memory with PIL library
im = Image.open(BytesIO(png))

#define crop points
im = im.crop((left, top, right, bottom))

#save new cropped image
im.save('screenshot.png')

where

left = location['x']

top = location['y']

right = location['x'] + size['width']

bottom = location['y'] + size['height']

How to take partial screenshot (frame) with Selenium WebDriver?

This should work:

import java.awt.image.BufferedImage;
import java.io.File;

import javax.imageio.ImageIO;

import org.openqa.selenium.By;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.Point;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;

public class Shooter{

    private WebDriver driver;

    public void shootWebElement(WebElement element) throws IOException  {

        File screen = ((TakesScreenshot) this.driver).getScreenshotAs(OutputType.FILE);

        Point p = element.getLocation();

        int width = element.getSize().getWidth();
        int height = element.getSize().getHeight();

        BufferedImage img = ImageIO.read(screen);

        BufferedImage dest = img.getSubimage(p.getX(), p.getY(), width,   
                                 height);

        ImageIO.write(dest, "png", screen);

        File f = new File("S:\\ome\\where\\over\\the\\rainbow");

        FileUtils.copyFile(screen, f);

    }
}

Trouble getting the screenshot of any element after zooming in

The map is contained inside <div id="map-container">. If you take a screenshot of this element it will capture the zoomed map

element = WebDriverWait(driver,10).until(EC.visibility_of_element_located((By.ID, 'map-container')))
element.screenshot('gallery.png')

Taking screen shot of specific element (python chromedriver selenium)

The root cause is that you set the zoom level to 80% and selenium is not aware of that fact. If you create a screenshot (manually) from the page in question (in 80% zoom) then you can see that the target area size is about 747x481 pixels. If you check what the element thinks about itself (print(article.rect)) then you can see that selenium is not aware of the zoom change.

So the reason why your screenshot is offset is the zoom level. If is this a Selenium bug or not I can not tell. If you keep the zoom level on 100%, the screenshot will be created as normal.

Or you can create the screenshot from the screen, calculate the shifted dimensions and crop the desired area and save it. That would be basically

• whole_screen_as_png = driver.get_screenshot_as_png() (save it to file or BytesIO)
• then open the screenshot via pillow
• then take the original dimensions of the element (article.rect)
• calculate the zoom adjusted corners (this is the tricky part)
• crop the desired area (you have several options) and save the final result

---

Related Topics