使用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的住宿详情页面示例，在该示例中，我们正在查看可见屏幕的屏幕截图：

 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.TakesScreenshot;  import org.openqa.selenium.WebDriver;  import org.openqa.selenium.chrome.ChromeDriver;  import org.testng.annotations.AfterTest;  import org.testng.annotations.BeforeTest;  import org.testng.annotations.Test;   public class ViewableScreenshotExample {     WebDriver driver;     @BeforeTest public void setupUrl() { 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/ " );                 }     @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 takeScreenshot() { //take screenshot of the page File src= ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE); try { FileUtils.copyFile(src, new File( "path of the file" File( "path of the file" )); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } }   }

上面的代码段将显示可见的屏幕截图，如下所示：

如果您必须截取代码正在测试的视图的屏幕快照，那么这一切都是好极了。但是，如果我想截取整个网页的屏幕快照，那么上面提到的代码是不够的。但是我们有一个解决方案。

使用自动硒测试脚本捕获完整的网页截图

可能需要拍摄整个屏幕的屏幕截图，而不只是浏览器的视口。一些浏览器仅截取可见端口的屏幕截图，而其他浏览器截取整个屏幕的屏幕截图。与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问题。这不是奇迹，只是想像一下您刚刚节省的时间。