捕获页面上所有元素的屏幕截图

Question

我正在尝试捕获网页上所有元素的屏幕截图，并希望将其存储在我编写了以下代码的磁盘中。

唯一的问题是这段代码只适用于第一次迭代，之后会发生一些意想不到的事情。

List<WebElement> eleId = driver.findElements(By.xpath("//*[@id]")); //fetch all the elements with ID attribute
    System.out.println(eleId.size());

    for (int i = 0;i < eleId.size();i++) {

//          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 = eleId.get(i).getLocation();

//          Get width and height of the element
            int eleWidth = eleId.get(i).getSize().getWidth();
            int eleHeight = eleId.get(i).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);

//          Creating variables name for image to be stores in the disk
            String fileName = eleId.get(i).getAttribute("id");
            String imageLocation = "D:\\" + fileName + ".png";
//          System.out.println(imageLocation);

//          Copy the element screenshot to disk
            File screenshotLocation = new File(imageLocation);
            FileUtils.copyFile(screenshot, screenshotLocation);

            System.out.println("Screenshot has been stored.");
}

Answer 1

嗨 Sandeep 试试下面的代码。它对我有用。我只是添加了一个“if”条件来检查图像的高度和宽度。

@Test(enabled=true)
public void getIndividualElementScreenShot() throws IOException{
    WebDriver driver = new FirefoxDriver();
    driver.get("http://www.google.com/");
    driver.manage().timeouts().pageLoadTimeout(30, TimeUnit.SECONDS);
    driver.manage().window().maximize();
    List<WebElement> eles = driver.findElements(By.xpath("//*[@id]"));
    System.out.println(eles.size());
    for(WebElement ele : eles){
        //Get Entire page screen shot
        File screenShot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
        BufferedImage fullImage = ImageIO.read(screenShot);

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

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

        //Cropping the entire page screen shot to have only element screen shot
        if(eleWidth != 0 && eleHeight != 0){
            BufferedImage eleScreenShot = fullImage.getSubimage(point.getX(), point.getY(), eleWidth, eleHeight);
            ImageIO.write(eleScreenShot, "png", screenShot);


            //Creating variable name for image to be store in disk
            String fileName = ele.getAttribute("id");
            String imageLocation = "F:\\ElementImage\\"+fileName+".png";
            System.out.println(imageLocation);

            //Copy the element screenshot to disk
            File screenShotLocation = new File(imageLocation);
            org.apache.commons.io.FileUtils.copyFile(screenShot, screenShotLocation);

            System.out.println("Screen shot has beed stored");

        }
    }
    driver.close();
    driver.quit();
}

Answer 2

您的代码运行良好。但是您在每次迭代中都覆盖了文件。你明白了吗？通过在 fileName 变量中分配新文件名来更改每次迭代中的文件名。使用下面的代码：

        List<WebElement> eleId = driver.findElements(By.xpath("//*[@id]")); //fetch all the elements with ID attribute
        System.out.println(eleId.size());

        for (int i = 0;i < eleId.size();i++) {

//            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 = eleId.get(i).getLocation();

//            Get width and height of the element
                int eleWidth = eleId.get(i).getSize().getWidth();
                int eleHeight = eleId.get(i).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);

//            Creating variables name for image to be stores in the disk
                String fileName = eleId.get(i).getAttribute("id");
                String imageLocation = "D:/" + fileName + i + ".png";
//            System.out.println(imageLocation);

//            Copy the element screenshot to disk
                File screenshotLocation = new File(imageLocation);
                FileUtils.copyFile(screenshot, screenshotLocation);

                System.out.println("Screenshot has been stored.");
    }