如何使用 Selenium WebDriver 截取屏幕截图?


在测试过程中遇到失败时,通常需要捕获屏幕截图以记录任何与预期结果的偏差。因此,附加屏幕截图以创建错误报告被认为是必要的步骤。

在自动化大量测试用例时,捕获屏幕截图对于开发和测试团队推断测试用例失败的原因至关重要。在调试失败时,他们会查看屏幕截图并确定失败是由于脚本问题还是应用程序中的缺陷。

让我们讨论一下页面中哪些部分可以作为屏幕截图捕获。借助 Selenium WebDriver,可以考虑将网页的以下部分捕获为图像:

  • 全页面截图。

  • 特定元素。

  • 页面可见部分。

页面可见部分的屏幕截图

这是关于捕获屏幕截图最常见的场景。TakeScreenShot 是一个用于捕获页面可见部分屏幕截图的接口。**getScreenshotAs** 是 **TakeScreenShot** 接口提供的一个方法。

语法:

File s = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
Then we need to hold the image in a file [for example, .jpeg, .png] format.
FileUtils.copyFile(s, new File("<<path of file>>"))

示例

代码实现。

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;
import java.io.File;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
public class ScreenshotViewable{
   public static void main(String[] args) {
      System.setProperty("webdriver.chrome.driver",
      "C:\Users\ghs6kor\Desktop\Java\chromedriver.exe");
      WebDriver driver = new ChromeDriver();
      String url = "https://tutorialspoint.com/index.htm";
      driver.get(url);
      driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);
      // capture screenshot and store the image
      File s = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
      FileUtils.copyFile(s, new File("tutorialpoint.png"));
      driver.quit();
   }
}

全页面截图

有时我们可能需要捕获全页面的屏幕截图,而不仅仅是屏幕的可见部分。常用浏览器的最新版本大多只捕获可见区域。

为了解决这个问题,我们必须使用 **AShot()** 方法。这是 WebDriver 提供的一个用于获取全屏图像的方法,可在 Selenium 3.x 及更高版本中使用。它具有以下用法:

  • 全屏图像捕获。

  • 增强屏幕截图。

  • 屏幕截图比较。

在使用 AShot() 之前,我们必须下载并将以下 jar 文件添加到我们的项目中:

https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot

语法:

Screenshot s=new
AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver);
ImageIO.write(s.getImage(),"PNG",new File("<< file path>>"));

示例

代码实现。

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;
import java.io.File;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.shooting.ShootingStrategies;
import javax.imageio.ImageIO;
public class ScreenshotFullpage{
   public static void main(String[] args) {
      System.setProperty("webdriver.chrome.driver",
      "C:\Users\ghs6kor\Desktop\Java\chromedriver.exe");
      WebDriver driver = new ChromeDriver();
      String url = "https://tutorialspoint.com/index.htm";
      driver.get(url);
      driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);
      // capture screenshot and store the image
      Screenshot s=new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).take          Screenshot(driver);
      ImageIO.write(s.getImage(),"PNG",new File("tutorialspoint.png"));
      driver.quit();
   }
}

特定元素的屏幕截图

有时我们可能需要捕获特定元素的屏幕截图。这里我们必须先捕获整个屏幕的截图,然后根据元素的位置和尺寸裁剪该图像。

示例

代码实现。

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;
import java.io.File;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.Point;
import java.awt.image.BufferedImage;
public class ScreenshotElement{
   public static void main(String[] args) {
      System.setProperty("webdriver.chrome.driver", "C:\Users\ghs6kor\Desktop\Java\chromedriver.exe");
      WebDriver driver = new ChromeDriver();
      String url ="https://tutorialspoint.com/about/about_careers.htm";
      driver.get(url);
      driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);
      // identify logo
      WebElement l=driver.findElement(By.xpath( "//*[@class='top-logo']"));
      // capture screenshot and store the image
      File s = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
      BufferedImage f = ImageIO.read(s);
      //location of webelement
      Point location= l.getLocation();
      // Dimension of element
      int w= l.getSize().getWidth();
      int h=l.getSize().getHeight();
      // Image Crop
      BufferedImage cImage= f.getSubimage(location.getX(), location.getY(), w, h);
      ImageIO.write(cImage, "png", s);
      FileUtils.copyFile(s, new File("tutorialpointlogo.png"));
      driver.quit();
   }
}

更新于:2020年8月28日

3K+ 浏览量

开启你的职业生涯

完成课程获得认证

开始学习
广告