UI自动化中Selenium WebDriver如何截图？这里有答案！

vlambda
2021-07-20

UI自动化中Selenium WebDriver如何截图？这里有答案！

前言

由于在使用Java Selenium做UI自动化的时候，需要在测试方法执行出现Fail的情况下，将当前界面截图并保存在项目指定目录中，最后在Jenkins中执行项目代码后，并将截图与测试报告发送到指定邮箱。下面将几种语言的Selenium的截图方式及实际Java Selenium截图项目实例分享出来。

一、各语言下截图实现方式

参考链接如下，由于可能链接打开较慢，将常用几种语言的实现方式写在下面。https://stackoverflow.com/questions/3422262/how-to-take-screenshot-with-selenium-webdriver

1.1 Jav实现

WebDriver driver = new FirefoxDriver();driver.get("http://www.google.com/");File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);FileUtils.copyFile(scrFile, new File("c:\\tmp\\screenshot.png"));

1.2 Python实现

from selenium import webdriverbrowser = webdriver.Firefox()browser.get('http://www.google.com/')browser.save_screenshot('screenie.png')

1.3 C#实现

public void TakeScreenshot(){ try {  Screenshot ss = ((ITakesScreenshot)driver).GetScreenshot(); ss.SaveAsFile(@"D:\Screenshots\SeleniumTestingScreenshot.jpg", System.Drawing.Imaging.ImageFormat.Jpeg); } catch (Exception e) { Console.WriteLine(e.Message); throw; }}

1.4 JavaScript实现

driver.takeScreenshot().then(function(data){ var base64Data = data.replace(/^data:image\/png;base64,/,"") fs.writeFile("out.png", base64Data, 'base64', function(err) { if(err) console.log(err); });});

二、UI自动化项目实际案例

2.1 实现思路

使用代码截图：由于项目是Java Selenium实现的，所以实际截图就使用上面Java语言的截图方式。

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

截图保存指定目录：面截图是生成了一个File文件，可以使用FileUtils工具类将文件保存到指定目录即可。FileUtils工具类的使用方法可以参考下面链接：https://blog.csdn.net/qq_42402854/article/details/83374559

截图文件名称：实际场景中，我们需要对截图文件命名，然后将文件名和保存目录拼接中，使用FileUtils拷贝文件。由于该项目中是用的Testng的测试框架，就使用Testng提供的ITestResult，来获取@Test方法的相关信息。获取测试方法的类名，然后拼接当前时间即可。ITestResult接口使用参考链接:https://blog.csdn.net/hujyhfwfh2/article/details/84842885

2.2 实际案例代码

@Slf4jpublic class ScreenShot{ /** * 定义截图存储的目录 * System.getProperty("user.dir") 获取项目的文件夹路径 * File.separator 系统文件目录分隔符 * */ private static String screenShotDirPath = System.getProperty("user.dir") + File.separator +"target" + File.separator + "test-output" + File.separator + "errorScreenShot";
 /** * 截图并保存在指定目录 * @param driver Webdriver对象 * @param iTestResult ITestResult对象，Testng提供的一个接口，监听@Test注释的方法 */ public static void takeScreenShot(WebDriver driver,ITestResult iTestResult) { /** * 1.创建指定路径的文件夹 * */ /*创建File对象*/ File screenShotDir = new File(screenShotDirPath); /*判断路径，如果路径不存在且路径是不是文件夹，才创建该文件夹*/ if (!screenShotDir.exists() && !screenShotDir.isDirectory()) { screenShotDir.mkdirs(); }
 /** * 2.利用Testng的iTestResult获取类名 * */ /*获取至类名的字符串*/ String className=iTestResult.getInstanceName(); log.info("\n获取的至类名的字符串为"+className); /*利用.来分割字符串并得到最后的类名*/ String []name=className.split("\\."); String currentClassName=name[name.length-1]; log.info("\n获取的类名为"+currentClassName);
 /** * 3.利用时间类获取当前时分秒 * */ SimpleDateFormat simpleDateFormat = new SimpleDateFormat("HH点mm分ss秒"); String time = simpleDateFormat.format(new Date());
 /** * 4.利用TakesScreenshot.getScreenshotAs截图 * */ try { /*java Selenium截图*/ File sourceFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE); /*利用FileUtils拷贝文件*/ FileUtils.copyFile(sourceFile, new File(screenShotDirPath + File.separator + currentClassName + time + ".png")); } catch (IOException e) { e.printStackTrace(); } }
 public static void main(String[] args) { log.info(System.getProperty("user.dir")); log.info(File.separator); }}

2.3 实际调用位置

在Testng中，创建监听器类，继承Testng定义的监听器类TestListenerAdapter，然后在方法失败时调用截图类即可。具体Testng监听器可以看我前面写文章：

@Slf4jpublic class TestLogListener extends TestListenerAdapter { ....... @Override public void onTestFailure(ITestResult iTestResult) { WebDriver driver = BaseTest.driverBase.getDriver(); System.out.print( "report_driver_fail:" + driver ); super.onTestFailure( iTestResult ); log.error( String.format( "========%s.%s测试失败,失败原因如下：\n%s========", iTestResult.getInstanceName(), iTestResult.getName(), iTestResult.getThrowable() )); // 失败截图 ScreenShot.takeScreenShot( driver,iTestResult); } ........}