如何使用 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.tw/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.tw/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.tw/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+ 瀏覽量

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告