Java+Selenium creates screenshots of specified areas based on elements – Element snapshots

Java + Selenium creates a screenshot of the specified area based on the element – Element snapshot

Execution steps

Get full screen screenshot

File screen = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
BufferedImage image = ImageIO.read(screen);

Get the width, height and coordinates of element

Create a WebElement element and obtain the element’s height, width, and coordinate information
and create a rectangle using the height and width of the element

WebElement element = driver.findElement(By.id("su"));
//Get the height and width of the element
int width = element.getSize().getWidth();
int height = element.getSize().getHeight();
//Create a rectangle using the above height, and width
Rectangle rect = new Rectangle(width, height);
//Element coordinates
Point p = element.getLocation();

Crop full screen screenshot

Finally, the entire image is cropped according to the position of the element and an element snapshot is created.
If the element is too large and exceeds the scope of the full-screen screenshot, this step will report an error (y + height) is outside or not, and x + width will also report an error.

try{
BufferedImage img = image.getSubimage(p.getX(), p.getY(), rect.width, rect.height);
ImageIO.write(img, "png", screen);
}catch (Exception e){
e.printStackTrace();
}

Solution for elements that are too large

  1. When creating a full-screen screenshot, create a long screenshot based on the scroll bar
  2. Create multiple screenshots and stitch them together to grow screenshots
  3. The next best thing is to take a screenshot of the visible area of the full screen

Method 1 and method 2 will not be explained for the time being.
Here is a description of method 3

  • First, simplify the width, height, and point coordinates of the element.
int w = rect.width; //Specify the width of the rectangular area
int h = rect.height;//Specify the height of the rectangular area
int x = p.getX(); //Specify the X coordinate of the upper left corner of the rectangular area
int y = p.getY(); //Specify the Y coordinate of the upper left corner of the rectangular area
  • Initialize browser resolution
//Driver resolution, set here to 1920*1080
int w_driver = 1920;
int h_driver = 1080;
  • If the element’s width plus coordinate X or element’s height plus coordinate Y exceeds the browser’s resolution, adjust the size of the element
if ( y + h > h_driver){ //(y + height) is outside or not
    h = h- (y + h - h_driver);
}

if (x + w > w_driver){
    w = x - (x + w - w_driver); //(x + width) is outside or not
}
  • Start cropping
try{
BufferedImage img = image.getSubimage(x, y, w, h);
    ImageIO.write(img, "png", screen);
}catch (IOException e){
    // TODO Auto-generated catch block
    e.printStackTrace();
}

Full code

package common;

import org.apache.commons.io.FileUtils;
import org.openqa.selenium.*;
import org.openqa.selenium.Point;
import org.openqa.selenium.chrome.ChromeDriver;

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.Rectangle;
import java.awt.image.BufferedImage;
import java.awt.image.RasterFormatException;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;

public class ElementSnapshot {

    public static WebDriver driver;

/**
     * main() method call
     *
     */
    public static void main(String[] args) throws Exception {

        driver = new ChromeDriver();
        driver.get("https://www.baidu.com");
        driver.manage().window().maximize();

        WebElement element = driver.findElement(By.id("su"));
        String fileName = "filename";

        //Create element snapshot
        elementSnapshot(driver,element);
        //Move the picture to the specified location
        FileUtils.copyFile(elementSnapshot(driver,element), new File(fileName, System.currentTimeMillis() + ".png"));

    }


    /**
     * Method to specify area based on Element screenshot
     *
     * @param driver
     * @param element screenshot area
     * @throwsException
     */
    public static File elementSnapshot(WebDriver driver, WebElement element) throws Exception {
        //Create full screen screenshot
        File screen = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
        BufferedImage image = ImageIO.read(screen);

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

        //Create a rectangle using the above height, and width
        Rectangle rect = new Rectangle(width, height);
        //Element coordinates
        Point p = element.getLocation();


        //operate on the previous rectangle
        //TODO Use a method that can capture the entire image (scroll bar), no method has been found yet
        int w = rect.width; //Specify the width of the rectangular area
        int h = rect.height;//Specify the height of the rectangular area
        int x = p.getX(); //Specify the X coordinate of the upper left corner of the rectangular area
        int y = p.getY(); //Specify the Y coordinate of the upper left corner of the rectangular area

        //The resolution of the driver, set here to 1920*1080
        int w_driver = 1920;
        int h_driver = 1080;

        System.out.println("width:" + w);
        System.out.println("height:" + h);
        System.out.println("x:" + x);
        System.out.println("y:" + y);

        System.out.println("y + height:" + (y + h));
        System.out.println("x + width:" + (x + w));



        /**
         * If the Y coordinate value of the Element plus the height exceeds the height of the driver
         * will report an error (y + height) is outside or not
         * The next best thing is to adjust the width and height of the image to the resolution suitable for the driver
         * At this time, a snapshot of the element area visible to the driver will be taken.
         * TODO If you can find a way to take a screenshot across the scroll bar, you don't need to crop it.
         */
        try{
            if (y + h > h_driver){
                h = h- (y + h - h_driver); //

                System.out.println("Modified height:" + h);
                System.out.println("Modified y + height: " + (y + h));
            }
            //(x + width) is outside or not
            if (x + w > w_driver){
                w = x - (x + w - w_driver);

                System.out.println("Modified width: " + w);
                System.out.println("Modified x + width:" + (x + w));
            }

            BufferedImage img = image.getSubimage(x, y, w, h);
            ImageIO.write(img, "png", screen);
            System.out.println("Screenshot By element success");

        }catch (IOException e){
            // TODO Auto-generated catch block
            e.printStackTrace();
        }


        return screen;

    }

}

The knowledge points of the article match the official knowledge files, and you can further learn related knowledge. Java Skill TreeHomepageOverview 131943 people are learning the system