如何在 Selenium WebDriver 中截屏 · Guru99 中文系列教程

# 如何在 Selenium WebDriver 中截屏 > 原文： [https://www.guru99.com/take-screenshot-selenium-webdriver.html](https://www.guru99.com/take-screenshot-selenium-webdriver.html) 屏幕截圖可用于錯誤分析。 Selenium 可以在執行期間自動拍攝屏幕截圖。您需要將強制轉換的 WebDriver 實例鍵入 TakesScreenshot。 ![](https://img.kancloud.cn/5a/78/5a7824096241b1c18d42a2c58742249b_519x247.png) 在本教程中，您將學習， * [使用 Selenium WebDriver](#1) 捕獲屏幕截圖 * [什么是 Ashot API？](#2) * [如何下載和配置 Ashot API？](#3) * [使用 AShot API](#4) 捕獲全頁屏幕截圖 * [截取頁面](#5)特定元素的屏幕截圖 * [使用 AShot](#6) 進行圖像比較 ## 使用 Selenium WebDriver 捕獲屏幕截圖在 Selenium 中截屏是一個三步過程 **步驟 1）**將 Web 驅動程序對象轉換為 TakeScreenshot ``` TakesScreenshot scrShot =((TakesScreenshot)webdriver); ``` **步驟 2）**調用 getScreenshotAs 方法創建圖像文件 ``` File SrcFile=scrShot.getScreenshotAs(OutputType.FILE); ``` **步驟 3）**將文件復制到所需位置示例：在此示例中，我們將截取[的屏幕截圖 http://demo.guru99.com/V4/](http://demo.guru99.com/V4/) &將其另存為 C：/Test.png ``` 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://demo.guru99.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。您只需在中下載它們[并在您的項目中調用它們](https://commons.apache.org/proper/commons-io/download_io.cgi) ## 什么是 Ashot API？ Ashot 是 Yandex 的第三方實用程序，受 Selenium WebDriver 支持，用于捕獲屏幕截圖。它需要單個 WebElement 的屏幕截圖以及頁面的整頁屏幕截圖，該屏幕截圖比屏幕大小更重要。 ## 如何下載和配置 Ashot API？有兩種方法可以配置 Ashot API * 1，使用 Maven * 2.手動不使用任何工具 ### 通過 Maven 配置： * 轉到 [https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot](https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot) * 現在，單擊最新版本。是 1.5.4 * 復制依賴關系代碼并添加到您的 pom.xml 文件中 ![](https://img.kancloud.cn/85/5d/855d0ebbb2d45f1b96e0c49cf43946a9_595x171.png) * 保存文件，Maven 會將 jar 添加到您的構建路徑 * 現在你準備好了！！！ ### 在沒有任何依賴工具的情況下手動配置 1. 轉到 [https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot](https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot) 2. 現在，單擊最新版本。是 1.5.4 3. 單擊罐子，下載并將其保存在您的計算機上 ![](https://img.kancloud.cn/03/58/03581f7c26f736f82033fc5ad128df33_550x263.png) 4. 在您的構建路徑中添加 jar 文件： 5. 在 Eclipse 中，右鍵單擊項目->轉到屬性->構建路徑->庫->添加外部 jar 6. 選擇 jar 文件 7. 申請并關閉 ## 使用 AShot API 捕獲全屏截圖 **步驟 1）**如果只需要屏幕尺寸頁面的屏幕截圖，請創建一個 Ashot 對象并調用 takeScreenshot（）方法。 ``` Screenshot screenshot = new Ashot().takeScreenshot(driver); ``` 但是，如果您希望頁面的屏幕截圖大于屏幕尺寸，則在調用 takeScreenshot（）方法設置策略之前，先調用 ShootingStrategy（）方法。然后調用傳遞網絡驅動程序的方法 takeScreenshot（），例如， ``` 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://demo.guru99.com/test/guru99home/](http://demo.guru99.com/test/guru99home/) 的全屏截圖并將其保存到文件“ screenshot.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://demo.guru99.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")); } } ``` ## 截取頁面特定元素的屏幕截圖 **示例：**這是在 [http://demo.guru99.com/test/guru99home/](http://demo.guru99.com/test/guru99home/) 頁面上捕獲 Guru 99 徽標的元素截圖并保存到文件“ 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://demo.guru99.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://demo.guru99.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 Browser 等不同平臺上截取單個 WebElement 的屏幕截圖。 * 它可以截取大于屏幕尺寸的頁面的頁面截圖。 * 硒版本 3 中已刪除了此功能，因此 Ashot API 是一個不錯的選擇。 * 它可以裝飾屏幕截圖。 * 它提供了屏幕截圖比較。由于 Shradhdha Dave 的貢獻而成為可能