做网站还需要服务器吗,开发公司采购招聘,外贸皮包网站模板,网站建设需要的功能在任何网页测试人员中#xff0c;执行效果最好的操作之一就是对网页进行截图。 每当测试人员发现并报告错误时#xff0c;如果不支持该问题的屏幕截图甚至视频#xff0c;就不会认真对待该错误。 不论您进行的测试类型是什么#xff0c;包括硒自动化测试#xff0c;都是如… 在任何网页测试人员中执行效果最好的操作之一就是对网页进行截图。 每当测试人员发现并报告错误时如果不支持该问题的屏幕截图甚至视频就不会认真对待该错误。 不论您进行的测试类型是什么包括硒自动化测试都是如此。 在自动化测试中特别是在典型的测试运行可能涉及数百个命令和测试用例的情况下关键断言处的自动屏幕截图对于确保开发人员和测试人员确保按需执行每个测试用例都非常重要。 这些证明又被用于调试以找出出了什么问题以及失败的原因。 对于使用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 ArrayListString ta new ArrayListString (driver.getWindowHandles()); int ita.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 logodriver.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 heightlogo.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 ArrayListString ta new ArrayListString (driver.getWindowHandles()); int ita.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
