Selenium Webdriver Take Screenshot of Viewport Only

Selenium Webdriver take screenshot of viewport only

There are two competing definitions of "screenshot" when dealing with WebDriver. The first is the definition used by the open-source project, where a screenshot is defined to be an image of the entire DOM of the loaded page. In this case, both the IE driver and the Firefox driver are doing the correct thing as defined by the project since 2010. The Chrome implementation of WebDriver is incorrect in returning an image of only the visible view port.

The W3C WebDriver specification, on the other hand, defines screenshots to be of the current view port only. This is at odds with the current open-source project's driver implementations (IE and Firefox), and can be expected to change in the future. Once the specification has attained "Candidate Recommendation" status, those drivers are likely to be updated.

As an aside, it should be noted that the IE driver in no way uses a "scroll-and-stitch" method to create its screenshots. It does resize the browser window large enough to display the entire DOM, as calculated at the moment the screenshot is requested, and take an image of that. However, please note that there are issues with IE 10 and 11 in producing these full-DOM screenshots depending on the bit-ness of your operating system and of the IEDriverServer executable you're using.

At present, you'll need to use a tool external to WebDriver to obtain view-port-only screenshots for IE and Firefox.

Take screenshot of full page with Selenium Python with chromedriver

How it works: set browser height as longest as you can...

#coding=utf-8
import time
from selenium import webdriver
from selenium.webdriver.chrome.options import Options

def test_fullpage_screenshot(self):
    chrome_options = Options()
    chrome_options.add_argument('--headless')
    chrome_options.add_argument('--start-maximized')
    driver = webdriver.Chrome(chrome_options=chrome_options)
    driver.get("yoururlxxx")
    time.sleep(2)
    
    #the element with longest height on page
    ele=driver.find_element("xpath", '//div[@class="react-grid-layout layout"]')
    total_height = ele.size["height"]+1000
    
    driver.set_window_size(1920, total_height)      #the trick
    time.sleep(2)
    driver.save_screenshot("screenshot1.png")
    driver.quit()

if __name__ == "__main__":
    test_fullpage_screenshot()

How to capture the screenshot of a specific element rather than entire page using Selenium Webdriver?

We can get the element screenshot by cropping entire page screenshot as below:

driver.get("http://www.google.com");
WebElement ele = driver.findElement(By.id("hplogo"));

// Get entire page screenshot
File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
BufferedImage  fullImg = ImageIO.read(screenshot);

// Get the location of element on the page
Point point = ele.getLocation();

// Get width and height of the element
int eleWidth = ele.getSize().getWidth();
int eleHeight = ele.getSize().getHeight();

// Crop the entire page screenshot to get only element screenshot
BufferedImage eleScreenshot= fullImg.getSubimage(point.getX(), point.getY(),
    eleWidth, eleHeight);
ImageIO.write(eleScreenshot, "png", screenshot);

// Copy the element screenshot to disk
File screenshotLocation = new File("C:\\images\\GoogleLogo_screenshot.png");
FileUtils.copyFile(screenshot, screenshotLocation);

how to use selenium to take full screenshot with lots of dynamic loading images?

This website is using lazy loading for images. Usually, it works by checking which images are in the viewport. It does it once on page load, and then on scroll.

So part of the solution would be to do this after you set the viewport :

driver.execute_script("window.scrollTo(0, 100)")

But it won't work as-is, since there is no space to scroll (your viewport includes the whole page).

Hence, you could:

• Set the viewport height to height - 100
• Scroll down by 100px to trigger the lazy load
• Scroll back to the top
• Set the viewport height to height

height = driver.execute_script("return document.body.scrollHeight")
driver.set_window_size(1000, height - 100)
driver.execute_script("window.scrollTo(0, 100)")
driver.execute_script("window.scrollTo(0, 0)")
driver.set_window_size(1000, height)
time.sleep(2) # new images need time to load
driver.save_screenshot("screenshot1.png")

How to get screenshot of full webpage using Selenium and Java?

LE: I see quite a lot of people are interested in the full-page screenshot, so I thought I might update the answer with some positives (silver bullets).

There are quite a handful of web testing frameworks that can (with minimal setup & effort) produce a full-page screenshot. I come from a NodeJS testing environment, so I can only vouch the following: WebdriverIO & Google's Puppeteer.

If anyone is interested in an easy way to do it with WebdriverIO, check this answer.

---

Short answer is NO, YOU CANNOT, if you're only using Selenium (detailed reason bellow). But, what you can do is make the most out of your device's(monitor) viewport.

So, start your browser instance (driver) using ChromeOptions(), which is the method for setting ChromeDriver-specific capabilities. We can do the following:

• maximize the window (using the --start-maximized switch);
• go full-screen (F11-key on Windows, Control+Cmd+F on Mac, using the --start-fullscreen switch).
• Note: complete list of Chrome command-line-switches can be found here.

Your code should look like this:

// Setting your Chrome options (Desired capabilities)
ChromeOptions options = new ChromeOptions();
options.add_argument('--start-maximized');
options.add_argument('--start-fullscreen');

// Creating a driver instance with the previous capabilities
WebDriver driver = new ChromeDriver(options);

// Load page & take screenshot of full-screen page
driver.get("http://google.com");
File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);

Now regarding the full page problem, all drivers (chromedriver, geckodriver, IEDriver, EdgeDriver, etc.) are implementing the WebDriver W3C standard. Thus, they are dependent on the way the WebDriver team wants to expose the functionality of different features, in our case, 'Take Screenshot'.

If you read the definition, it clearly states the following:

The Take Screenshot command takes a screenshot of the top-level browsing context’s VIEWPORT.

Legacy-wise, some drivers were able to produce a full-page screenshot (read more about it here), like the old FirefoxDriver, IEDriver, etc. That is no longer the case as they now all implement (to the letter) the WebDriver W3C standard.

How can I take a screenshot with Selenium WebDriver?

Java

Yes, it is possible. The following example is in Java:

WebDriver driver = new FirefoxDriver();
driver.get("http://www.google.com/");
File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
// Now you can do whatever you need to do with it, for example copy somewhere
FileUtils.copyFile(scrFile, new File("c:\\tmp\\screenshot.png"));

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);

    }
}

Selenium: chrome driver makes screenshot just of visible part of page

This is a known bug: https://code.google.com/p/chromedriver/issues/detail?id=294 (Only for Chrome driver, firefox driver works fine)

---

Related Topics