Selenium WebDriver - 截圖捕獲

Selenium WebDriver 可用於在執行自動化步驟時捕獲網頁的螢幕截圖。螢幕截圖是藉助TakeScreenshot方法捕獲的。

此方法指示 Selenium WebDriver 捕獲螢幕截圖。要在所需位置捕獲螢幕截圖，我們需要使用getScreenshotAs()方法。

網頁上的元素識別

右鍵單擊網頁，然後單擊 Chrome 瀏覽器中的“檢查”按鈕。然後，將提供整個頁面的相應 HTML 程式碼。要檢查頁面上的編輯框，請單擊可見 HTML 程式碼頂部的左上方箭頭。

單擊並將箭頭指向編輯框（如下面的影像中突出顯示的部分）後，其 HTML 程式碼將顯示，反映輸入標記名稱。

示例 1 - 捕獲整個頁面的螢幕截圖

讓我們以上面頁面為例，我們首先使用sendKeys()方法在輸入框中輸入一些文字，然後捕獲整個網頁的螢幕截圖。

package org.example;

import org.apache.commons.io.FileUtils;
import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;
import java.io.File;
import java.io.IOException;
import java.util.concurrent.TimeUnit;

public class ScreenshotCapture {
   public static void main(String[] args) throws InterruptedException, IOException {
      
      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();
      
      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);
      
      // Opening the webpage where we will identify an element
      driver.get("https://tutorialspoint.tw/selenium/practice/selenium_automation_practice.php");
      
      // Identify the input box with xpath locator
      WebElement e = driver.findElement(By.xpath("//*[@id='name']"));
      
      // enter text in input box
      e.sendKeys("Selenium");
      
      // Get the value entered
      String text = e.getAttribute("value");
      System.out.println("Entered text is: " + text);
      
      // take full screenshot and store in project location
      File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
      FileUtils.copyFile(scrFile, new File("./ImageFullPage.png"));
            
      // Closing browser
      driver.quit();
   }
}

在 pom.xml 檔案中新增的依賴項：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
   http://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>

   <groupId>org.example</groupId>
   <artifactId>SeleniumJava</artifactId>
   <version>1.0-SNAPSHOT</version>

   <properties>
      <maven.compiler.source>16</maven.compiler.source>
      <maven.compiler.target>16</maven.compiler.target>
      <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
   </properties>
   
   <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->
   <dependencies>
      <dependency>
         <groupId>org.seleniumhq.selenium</groupId>
         <artifactId>selenium-java</artifactId>
         <version>4.11.0</version>
      </dependency>
      <dependency>
         <groupId>commons-io</groupId>
         <artifactId>commons-io</artifactId>
         <version>2.12.0</version>
      </dependency>
   </dependencies>
</project>

在專案目錄中捕獲了一個名為ImageFullPage.png的螢幕截圖。單擊它，我們將獲得整個網頁的捕獲螢幕截圖。

示例 2 - 捕獲單個元素的螢幕截圖

讓我們使用與上面討論的相同的示例，我們首先在編輯框中輸入一些文字，然後僅捕獲該元素的螢幕截圖。這可以使用getScreenShotAs()方法完成。

package org.example;

import org.apache.commons.io.FileUtils;
import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;
import java.io.File;
import java.io.IOException;
import java.util.concurrent.TimeUnit;

public class ScreenshotCaptureElement {
   public static void main(String[] args) throws InterruptedException, IOException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // Opening the webpage where we will identify an element
      driver.get("https://tutorialspoint.tw/selenium/practice/selenium_automation_practice.php");

      // Identify the input box with xpath locator
      WebElement e = driver.findElement
         (By.xpath("//*[@id='name']"));

      // enter text in input box
      e.sendKeys("Selenium");

      // Get the value entered
      String text = e.getAttribute("value");
      System.out.println("Entered text is: " + text);

      // take screenshot of input box and store in project location
      File scrFile = e.getScreenshotAs(OutputType.FILE);
      FileUtils.copyFile(scrFile, new  File("./ImageElement.png"));

      // Closing browser
      driver.quit();
   }
}

在專案目錄中捕獲了一個名為ImageElement.png的螢幕截圖。單擊它，我們將僅獲得輸入框（我們在其中輸入文字Selenium）的捕獲螢幕截圖。

示例 3 - 在異常時捕獲螢幕截圖

讓我們使用與上面討論的相同的示例，我們嘗試在輸入框中輸入一些文字，然後僅在該步驟失敗時捕獲該步驟的螢幕截圖。這可以使用新增到 catch 塊（通常用於異常處理）中的getScreenShotAs()方法完成。

package org.example;

import org.apache.commons.io.FileUtils;
import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;
import java.io.File;
import java.io.IOException;
import java.util.concurrent.TimeUnit;

public class ScreenshotCaptureException {
   public static void main(String[] args) throws InterruptedException, IOException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // Opening the webpage where we will identify an element
      driver.get("https://tutorialspoint.tw/selenium/practice/selenium_automation_practice.php");

      try {
         // Identify the input box with xpath locator
         WebElement e = driver.findElement(By.xpath("//*[@id='names']"));

         // enter text in input box
         e.sendKeys("Selenium");
         System.out.println("Step successfully executed");
      }

      catch(Exception e) {
         // take screenshot on failure and store in project location
         File scrFile
            = ((TakesScreenshot) driver).
            getScreenshotAs(OutputType.FILE);
         FileUtils.copyFile(scrFile, new  File("./ImageException.png"));
         System.out.println("Element could not be found - Step failed");
      }

      // Closing browser
      driver.quit();
   }
}

輸出

Element could not be found - Step failed

Process finished with exit code 0

在上面的示例中，我們的測試啟動了一個網頁並嘗試與一個元素進行互動。在無法識別元素後，執行流程轉移到 catch 塊，我們在控制檯中收到訊息 - 找不到元素 - 步驟失敗。

最後，收到訊息程序已完成，退出程式碼為 0，表示程式碼已成功執行。

此外，在專案目錄中捕獲了一個名為ImageException.png的螢幕截圖。單擊它，我們將獲得失敗測試步驟的捕獲螢幕截圖（這意味著 Selenium 沒有在輸入框中輸入）。

結論

本教程全面介紹了 Selenium WebDriver 截圖捕獲。我們從描述網頁上的元素標識開始，並逐步講解了如何使用 Selenium WebDriver 捕獲螢幕截圖的示例。這使您能夠深入瞭解 Selenium WebDriver 截圖捕獲。最好繼續練習您所學的內容，並探索與 Selenium 相關的其他內容，以加深您的理解並拓寬您的視野。

列印頁面