Web Page ScreenShot

Browser

About

This article shows several was how you can create an image from a html page.

To be able to do that, you need an application or library that is capable to render HTML.

Rendering Location

Client-side rendering

Browser

The browser renders all page and has then native capability to take a screenshot

With chrome via the devtool Element, you can do a right click on a node and select Capture node screenshot

Chrome Node Screenshot

Library

With Javascript on a page, you can create image from html with canvas. The html2canvas does that and implements only a subset of CSS

Server Side rendering with WebDriver

WebDriver ( ie selenium)

Code

Java example from webdriver documentation with the (takescreenshot function)

  • Java
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.chrome.ChromeDriver;
import java.io.*;
import org.openqa.selenium.*;

public class SeleniumTakeScreenshot {
    public static void main(String args[]) throws IOException {
        WebDriver driver = new ChromeDriver();
        driver.get("http://www.example.com");
        File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
        FileUtils.copyFile(scrFile, new File("./image.png"));
        driver.quit();
    }
}
$screenshotPath = sys_get_temp_dir() . '/' . uniqid('php-webdriver-') . '/selenium-screenshot.png';
$this->driver->get($this->getTestPageUrl('index.html'));
$this->driver->takeScreenshot($screenshotPath);

Application

With Puppeteer (js chrome driver api):





Discover More
Browser
Headless browser - WebDriver / ChromeDriver (automated testing - W3C WebDriver API )

A WebDriver is a application: that control / drive real browsers. via function that are available via the the WebDriver API Each browser is backed by a specific WebDriver implementation, called...



Share this page:
Follow us:
Task Runner