如何在Selenium WebDriver中截图

Selenium Webdriver中的屏幕截图

一个Selenium Webdriver中的屏幕截图用于错误分析。Selenium WebDriver可以自动获取但如果用户需要自己截取屏幕截图，则需要使用TakeScreenshot方法，该方法会通知WebDrive截取屏幕截图并将其存储在Selenium中。

在本教程中，将了解

使用Selenium WebDriver捕获屏幕截图
什么是Ashot API？
如何下载和配置Ashot API？
使用Ashot API捕获全页屏幕截图
截取页面特定元素的屏幕快照
使用Ashot进行图像比较

使用Selenium WebDriver捕获屏幕截图

在Selenium中截图是一个3步的过程

步骤1) 将Web驱动程序对象转换为TakeScreenshot

TakesScreenshot scrShot =((TakesScreenshot)webdriver);

步骤2) 调用getScreenshotAs方法创建图片文件

File SrcFile=scrShot.getScreenshotAs(OutputType.FILE);

步骤3) 将文件复制到所需位置

示例：在此示例中，我们将使用http://www.itxiaonv.com/V4/将其另存为C：/Test.png(&S)

package Guru99TakeScreenshot;
import java.io.File;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.annotations.Test;
public class Guru99TakeScreenshot {
    @Test
    public void testGuru99TakeScreenShot() throws Exception{
        WebDriver driver ;
        System.setProperty("webdriver.gecko.driver","C:\\geckodriver.exe");
        driver = new FirefoxDriver();
        //goto url
        driver.get("http://www.itxiaonv.com/V4/");
        //Call take screenshot function
        this.takeSnapShot(driver, "c://test.png") ;
    }
    /
     * This function will take screenshot
     * @param webdriver
     * @param fileWithPath
     * @throws Exception
     */
    public static void takeSnapShot(WebDriver webdriver,String fileWithPath) throws Exception{
        //Convert web driver object to TakeScreenshot
        TakesScreenshot scrShot =((TakesScreenshot)webdriver);
        //Call getScreenshotAs method to create image file
        File SrcFile=scrShot.getScreenshotAs(OutputType.FILE);
        //Move image file to new destination
        File DestFile=new File(fileWithPath);
        //Copy file at destination
        FileUtils.copyFile(SrcFile, DestFile);
    }
}

注：Selenium版本3.9.0及更高版本不提供Apache Commons IO JAR。可以简单地下载它们这里在项目中给他们打电话

什么是Ashot API？

Ashot是Yandex在Selenium WebDriver的支持下提供的第三方工具，用于捕获屏幕截图。它采用单个WebElement的屏幕截图和页面的整页屏幕截图，这比屏幕大小更重要。

如何下载和配置Ashot API？

配置Ashot API有两种方法

1.使用Maven
2.手动操作，不使用任何工具

要通过Maven进行配置，执行以下操作：

去https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
现在，点击最新版本。是1.5.4
复制依赖项代码并将其添加到pom.xml文件中

保存该文件，Maven会将JAR添加到构建路径中
现在准备好了！

在不使用任何依赖项工具的情况下手动配置

去https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
现在，点击最新版本。是1.5.4
单击JAR，下载并将其保存在机器上

在构建路径中添加JAR文件：
在Eclipse中，右键单击项目->转到属性->构建路径->库->添加外部JAR
选择JAR文件
应用并关闭

使用Ashot API捕获全页屏幕截图

步骤1)

Screenshot screenshot = new Ashot().takeScreenshot(driver);

Screenshot screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver);

这里1000的滚动时间是以毫秒为单位的，所以为了截图，程序将每1000毫秒滚动一次。

步骤2)：现在，从屏幕截图中获取图像并将其写入文件。可以提供jpg、png等文件类型。

ImageIO.write(screenshot.getImage(), "jpg", new File(".\\screenshot\\fullimage.jpg"));

拍摄大于屏幕尺寸的页面的整页屏幕截图。

示例：以下是捕获以下内容的整页屏幕截图的示例http://www.itxiaonv.com/test/guru99home/并保存到文件“creenshot.jpg”。

由于使用了Ashot API的ShootingStrategy类，我们将能够捕获大于屏幕大小的页面的全图。节目内容如下：

package Guru99;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.shooting.ShootingStrategies;
public class TestScreenshotUsingAshot {
    public static void main(String[] args) throws IOException {
 
        System.setProperty("webdriver.chrome.driver", "c:\\chromedriver.exe");
        WebDriver driver  = new ChromeDriver();
        driver.get("http://www.itxiaonv.com/test/guru99home/");
        driver.manage().window().maximize();
 
        Screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver);
        ImageIO.write(screenshot.getImage(), "jpg", new File("c:\\ElementScreenshot.jpg"));
 
    }
}

截取页面特定元素的屏幕快照

示例：以下是在上捕获Guru 99徽标的元素屏幕截图的示例http://www.itxiaonv.com/test/guru99home/页面并保存到文件“ElementScreenshot.jpg”。以下是代码：

package Guru99;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.shooting.ShootingStrategies;
public class TestElementScreenshotUsingAshot {
    public static void main(String[] args) throws IOException {
 
        System.setProperty("webdriver.chrome.driver", "c:\\chromedriver.exe");
        WebDriver driver  = new ChromeDriver();
        driver.get("http://www.itxiaonv.com/test/guru99home/");
        driver.manage().window().maximize();
 
// Find the element to take a screenshot
        WebElement element = driver.findElement(By.xpath ("//*[@id=\"site-name\"]/a[1]/img"));
// Along with driver pass element also in takeScreenshot() method.
        Screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver,element);
        ImageIO.write(screenshot.getImage(), "jpg", new File("c:\\ElementScreenshot.jpg"));
    }
}

使用Ashot进行图像比较

package Guru99;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.comparison.ImageDiff;
import ru.yandex.qatools.ashot.comparison.ImageDiffer;
public class TestImageComaprison {
    public static void main(String[] args) throws IOException {
        System.setProperty("webdriver.chrome.driver", "C:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("http://www.itxiaonv.com/test/guru99home/");
        // Find the element and take a screenshot
        WebElement logoElement = driver.findElement(By.xpath("//*[@id=\"site-name\"]/a[1]/img"));
        Screenshot logoElementScreenshot = new AShot().takeScreenshot(driver, logoElemnent);
        // read the image to compare
        BufferedImage expectedImage = ImageIO.read(new File("C:\\Guru99logo.png"));
        BufferedImage actualImage = logoElementScreenshot.getImage();
        // Create ImageDiffer object and call method makeDiff()
        ImageDiffer imgDiff = new ImageDiffer();
        ImageDiff diff = imgDiff.makeDiff(actualImage, expectedImage);
        if (diff.hasDiff() == true) {
            System.out.println("Images are same");
        } else {
            System.out.println("Images are different");
        }
        driver.quit();
    }
}

总结

Ashot API是Yandex提供的免费软件。
这是一个用于在Selenium中截屏的实用程序。
它可以帮助在桌面浏览器、iOS Simulator Mobile Safari、Android Emulator浏览器等不同平台上截取单个WebElement的屏幕截图。
它可以截取大于屏幕尺寸的页面的页面截图。
该特性在Selenium版本3中已被删除，因此Ashot API是一个很好的选择。
它可以装饰截图。
它提供了一个屏幕截图比较。