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 Java实现

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 webdriver

browser = 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 实际案例代码

@Slf4j
public 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监听器可以看我前面写的博客文章：
    https://blog.csdn.net/qq_37688023/article/details/105719097

@Slf4j
public 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);
    }
		........
}