當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

使用Selenium Webdriver进行全屏截图

發布時間：2023/12/3 编程问答 61 豆豆

生活随笔收集整理的這篇文章主要介紹了使用Selenium Webdriver进行全屏截图小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在任何網頁測試人員中，執行效果最好的操作之一就是對網頁進行截圖。每當測試人員發現并報告錯誤時，如果不支持該問題的屏幕截圖甚至視頻，就不會認真對待該錯誤。不論您進行的測試類型是什么，包括硒自動化測試，都是如此。

在自動化測試中，特別是在典型的測試運行可能涉及數百個命令和測試用例的情況下，關鍵斷言處的自動屏幕截圖對于確保開發人員和測試人員確保按需執行每個測試用例都非常重要。這些證明又被用于調試，以找出出了什么問題以及失敗的原因。對于使用selenium進行的自動化測試，這些屏幕截圖有助于區分故障是由于應用程序故障還是腳本故障。

現在說了這一點，當我們說截圖時，我們可能意味著捕獲屏幕任何部分的圖像，包括所討論元素的圖像，甚至是整個頁面的屏幕截圖。因此，在本文中，我們將研究如何使用Selenium WebDriver自動化腳本為不同目的拍攝網頁的自動屏幕截圖。首先，有四種使用Selenium Webdriver捕獲屏幕快照圖像的主要方法。如：

可視區域的屏幕截圖
全屏截圖，即捕獲整個網頁的截圖
所需的webElement的屏幕截圖
支持AUT屏幕截圖的基于云的平臺

自動硒測試腳本，用于拍攝可見區域的屏幕截圖

這是在自動化下獲取應用程序屏幕快照的最常用方法，也是最簡單的一種方法。 Selenium提供了一種現成的功能，稱為TakeScreenShot界面，可用于拍攝可視區域的屏幕截圖。

您可以在此處檢查界面的詳細信息。

該接口提供了一種稱為getScreenshotAs的方法，該方法有助于捕獲屏幕截圖并將其存儲在所需的位置。

這是捕獲屏幕截圖的語法：

File screenshotFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);

為了將拍攝的屏幕快照存儲到文件中，使用以下語句：
FileUtils.copyFile(screenshotFile, new File("path of the file you want to save the screenshot to"));

就是這個！僅需兩個語句，您就可以截取屏幕截圖。讓我們將此步驟合并到代碼段中。下面的示例展示了Airbnb的住宿詳情頁面示例，在該示例中，我們正在查看可見屏幕的屏幕截圖：

上面的代碼段將顯示可見的屏幕截圖，如下所示：

如果您必須截取代碼正在測試的視圖的屏幕快照，那么這一切都是好極了。但是，如果我想截取整個網頁的屏幕快照，那么上面提到的代碼是不夠的。但是我們有一個解決方案。

使用自動硒測試腳本捕獲完整的網頁截圖

可能需要拍攝整個屏幕的屏幕截圖，而不只是瀏覽器的視口。一些瀏覽器僅截取可見端口的屏幕??截圖，而其他瀏覽器截取整個屏幕的屏幕截圖。與chrome和IE不同，早期版本的Firefox過去常常會捕獲整個屏幕的屏幕截圖。但是最終，即使是最新版本的Firefox現在也只能獲取視口屏幕截圖。因此，為了使用Selenium Web驅動程序腳本捕獲整個屏幕的屏幕截圖，我們可以使用AShot（）。

AShot（）是一個Webdriver屏幕截圖實用程序，用于捕獲整個頁面的屏幕截圖，從Selenium 3開始一直受支持。它提供以下功能：

幫助捕獲整個屏幕和Web元素

美化屏幕截圖

提供屏幕截圖比較。

有關該實用程序的更多詳細信息，您可以在此處參考。

為了獲得整個屏幕的屏幕截圖，您需要將jar添加到您的項目中。您可以從此處http://central.maven.org/maven2/ru/yandex/qatools/ashot/ashot/1.5.3/ashot-1.5.3.jar下載jar

將罐子添加到項目中后，您打算采取全屏截圖時，只需提及以下代碼行：

Screenshot screenshot= new AShot().shootingStrategy(ShootingStrategies.viewportPasting( 1000 )).takeScreenshot(driver); ImageIO.write(screenshot.getImage(), "PNG" , new File( "path of the file" File( "path of the file" ));

在下面的代碼中，通過將視口設置為全屏并截屏來使用Ashot方法拍攝策略。下面的代碼段轉到Airbnb India Stays and Tours頁面，并獲取完整視圖的屏幕截圖。

import java.io.File; import java.io.IOException; import java.util.concurrent.TimeUnit; ? import javax.imageio.ImageIO; ? import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; import org.testng.annotations.Test; ? import ru.yandex.qatools.ashot.AShot; import ru.yandex.qatools.ashot.Screenshot; import ru.yandex.qatools.ashot.shooting.ShootingStrategies; ? public class EntireScreenshot { ?public static void main(String[] args) { // TODO Auto-generated method stub ????????WebDriver driver; ????????????????System.setProperty( "webdriver.chrome.driver" , ".\\Driver\\chromedriver.exe" ); driver= new ChromeDriver(); driver.manage().timeouts().implicitlyWait( 10 , TimeUnit.SECONDS); driver.manage().window().maximize(); driver.get( " https://www.airbnb.co.in/s/India/ " ); ???????????? //take screenshot of the entire page Screenshot screenshot= new AShot().shootingStrategy(ShootingStrategies.viewportPasting( 1000 )).takeScreenshot(driver); try { ImageIO.write(screenshot.getImage(), "PNG" , new File( "path of the file" File( "path of the file" )); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } ????????????driver.quit(); ???????????} ??????????????????????}

在運行此代碼時，請注意代碼如何自動向下滾動頁面并獲取整個頁面的屏幕截圖。以下是截圖的示例。

拍攝完整的頁面截圖非常棒，但是您可能會遇到一個用例，僅關注所需webElement的截圖。您唯一需要考慮的是截取所需元素而不是整個屏幕的屏幕截圖。另外，如果您希望拍攝徽標圖像或其他特定于UI的元素的屏幕快照以檢查其像素化或UI問題，則您所關心的只是獲取webElement圖像而不是整個屏幕圖像。讓我們深入了解如何獲取Web元素的屏幕截圖。

使用Selenium WebDriver截取所需Web元素的屏幕截圖

截取所需元素的屏幕快照也非常容易。主要概念是根據其坐標和高度-寬度將整個屏幕截圖裁剪到webElement的所需位置。這是下面的代碼片段，突出顯示如何截取Amazon.com網站徽標的屏幕截圖。

import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.util.concurrent.TimeUnit; ? import javax.imageio.ImageIO; ? import org.apache.commons.io.FileUtils; import org.openqa.selenium.By; import org.openqa.selenium.OutputType; import org.openqa.selenium.Point; import org.openqa.selenium.TakesScreenshot; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.remote.server.handler.FullscreenWindow; ? public class LogoScreenShotExample { ?public static void main(String[] args) throws IOException { // TODO Auto-generated method stub ????????????????????????System.setProperty( "webdriver.chrome.driver" , ".\\Driver\\chromedriver.exe" ); WebDriver driver= new ChromeDriver(); driver.manage().timeouts().implicitlyWait( 10 , TimeUnit.SECONDS); driver.manage().window().maximize(); driver.get( " https://www.amazon.in/ " ); ????//locating amazon logo WebElement logo=driver.findElement(By.id( "nav-logo" )); ????// Get entire page screenshot File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE); ????BufferedImage fullScreen = ImageIO.read(screenshot); ????//Find location of the webelement logo on the page Point location= logo.getLocation(); ????//Find width and height of the located element logo ????int width= logo.getSize().getWidth(); int height=logo.getSize().getHeight(); ????????//Now the main point, which is cropping the full image to get only the logo screenshot BufferedImage logoImage= fullScreen.getSubimage(location.getX(), location.getY(), width, height); ????ImageIO.write(logoImage, "png" , screenshot); ????//copy the file to the desired location FileUtils.copyFile(screenshot, new File( "path of file" )); ?????} ? }

這是上面的webElement代碼片段拍攝的圖像：

就是這個。是不是很酷的家伙。只需找出您的測試方案需要什么并拍攝所需的屏幕截圖即可。如今，由于許多即將到來的基于云的平臺都可以為自動化腳本執行提供所有這些屏幕截圖和視頻的支持，因此我們無需截屏。

這使我進入了截屏的最后一種方法，這最終意味著不截屏。和完成任務的工具。好吧，你沒聽錯。讓我們來看看它的細節

在云上獲取整頁自動截圖

在本地運行測試很重要，但是，如果要確保您的網站在所有瀏覽器（即使您沒有本地訪問權限的瀏覽器）上都可以正常運行，則需要LambdaTest之類的服務。 LambdaTest是基于云的硒網格，可用于在線運行所有自動硒測試腳本。但是，有關LambdaTest網格的最好之處在于，它會在執行每個selenium命令后為您的網頁自動截圖。此外，LambdaTest平臺還拍攝了完整的測試執行視頻。您需要做的就是在此平臺上運行腳本，該平臺為您提供屏幕截圖，視頻，網絡日志，控制臺日志等功能。使您的腳本在平臺上運行的幾點考慮或前提條件是：

LambdaTest帳戶

LambdaTest用戶名，訪問密鑰和要連接的URL

設置所需的屬性以訪問所需的功能。

就是這個。現在，讓我們運行上述相同的Airbnb Stays詳細信息頁面代碼，而無需提供屏幕截圖方法，因為它捕獲了執行過程的整個視頻。在下面的代碼片段中，我將使用LambdaTest用戶名，訪問密鑰和LambdaTest Selenium Grid URL連接到所需的瀏覽器并執行操作。請注意，將上面的代碼更改為LambdaTest兼容代碼僅需要調用遠程Webdriver而不是本地chrome webdriver，并傳遞期望功能的對象來定義您需要在哪個瀏覽器上運行測試：

import java.io.File; import java.io.IOException; import java.util.ArrayList; import java.util.concurrent.TimeUnit; ? import org.apache.commons.io.FileUtils; import org.openqa.selenium.By; import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.OutputType; import org.openqa.selenium.Platform; import org.openqa.selenium.TakesScreenshot; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.remote.DesiredCapabilities; import org.openqa.selenium.remote.RemoteWebDriver; import org.testng.annotations.AfterTest; import org.testng.annotations.BeforeTest; import org.testng.annotations.Test; import java.net.URL; ? public class LambdatestWithoutScreenShotMethod { ??????public static final String username= "sadhvisingh24" ; public static final String auth_key = "X1PLnv28q0eSqWoqaqv9STD4gPRfWnVOisEUcmlW0zg9HO3GYi" ; public RemoteWebDriver driver; public static final String URL= "@hub.lambdatest.com/wd/hub" ; ????@BeforeTest public void setupUrl() { ????????DesiredCapabilities capability= new DesiredCapabilities(); capability.setPlatform(Platform.WIN8); capability.setBrowserName( "chrome" ); capability.setVersion( "75.0" ); capability.setCapability( "build" , "cross_browser" ); capability.setCapability( "name" , "cross_browser" ); capability.setCapability( "network" , true ); //to enable network logs capability.setCapability( "visual" , true ); //to enable screenshots capability.setCapability( "video" , true ); //to enable video capability.setCapability( "console" , true ); //to enable console logs ????????????????try { ?????????????????????driver = new RemoteWebDriver( new URL( " https:// " + username + ":" + auth_key + URL), capability); ????????????????????} ???????catch (Exception e) { ????????????????????System.out.println( "Invalid grid URL" + e.getMessage()); } ?????try { driver.manage().timeouts().implicitlyWait( 10 ,TimeUnit.SECONDS); driver.manage().window().maximize(); ?driver.get( " https://www.airbnb.co.in/s/India/ " ); ?} catch (Exception e) { System.out.println(e.getMessage()); } } ????????????????@Test public void performAction() throws InterruptedException { //Scroll down the page JavascriptExecutor jse = (JavascriptExecutor)driver; jse.executeScript( "window.scrollBy(0,250)" , "" ); ????????????????//open the stay details page driver.findElement(By.xpath( "//div[contains(text(), 'Sea Hut Homestay with Aircon')]" )).click(); Thread.sleep( 1500 ); ????????//Switch to the required tab ArrayList<String> ta = new ArrayList<String> (driver.getWindowHandles()); int i=ta.size(); System.out.println(i); driver.switchTo().window(ta.get( 1 )); } ????@AfterTest public void closeSetup() { driver.quit(); } ?? }

下面引用的屏幕截圖：

在上面的屏幕截圖中，LambdaTest提供了對視頻的支持，您可以在其中查看Web應用程序的整個執行流程。

除了此功能之外，LambdaTest還提供了獨立的全頁自動屏幕截圖功能，可以幫助您跨指定應用程序的瀏覽器截取屏幕截圖，甚至進行比較。 LambdaTest將此功能稱為“屏幕截圖測試”。您可以在需要時訪問這些屏幕截圖，甚至可以與所需的利益相關者共享它們，并根據需要將其郵寄。當您需要跨多個瀏覽器和多個版本測試應用程序并執行跨瀏覽器測試時，此功能將非常有用。您可以截取屏幕截圖，并比較它們是否存在UI問題。這不是奇跡，只是想像一下您剛剛節省的時間。

導航到LambdaTest“ Visual UI testing”菜單標題，并導航到其子標題“ Screenshot”，如下所示

到達此頁面后，您需要做的就是將要測試的URL放在URL占位符中。選擇您想要截屏的所需瀏覽器和版本，然后單擊“捕獲”按鈕。賓果游戲就是這樣。

要捕獲的圖像將添加到隊列中。完成后，您可以訪問以下圖像：

正如您在上面看到的，我們專注于詳細拍攝屏幕截圖的所有可能方式，因此，下次當您陷于如何拍攝屏幕截圖時，本文將派上用場。您也可以參考本系列的其他文章。測試愉快。

翻譯自: https://www.javacodegeeks.com/2019/07/using-selenium-webdriver-full-page-screenshots.html

總結

以上是生活随笔為你收集整理的使用Selenium Webdriver进行全屏截图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：使用Angular，Ionic 4和Sp
下一篇：怎样编写测试类测试分支_编写干净的测试–