自动化测试报告html生成图片

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

通常在自动化执行结束之后会通过邮件生成测试报告，java一般都是通过自带的模板或者allure生成的html报告。可是在具体使用过程中，我们发现，即使是测试同学，对于测试报告的html邮件也是视而不见，没有足够的重视。于是我们便决定将报告内容截图放在邮件正文，这样即使不下载附件，也能对测试结果有一个比较详细的认识。

技术选型

以前在做web UI自动化的时候有一款PhantomJS的工具，可以模拟无界面的操作进行截图，但是因为开发团队的一些问题，导致这款工具在2018年暂停开发切不再支持chrome浏览器了。 Headless Chrome指在headless模式下运行谷歌浏览器，且对chrome的各种特性都支持，使用devtools协议能完成请求。在github上有一个开源的三方包提供了这个支持

环境搭建

在centos下，首先需要安装chrome 浏览器

sudo yum install dl.google.com/linux/direc…

cntos安装之后可能无法运行，需要修改配置文件 参考：blog.csdn.net/zxc19854/ar…

测试安装chrome ：

google-chrome --headless --disable-gpu --dump-dom --no-sandbox www.baidu.com

执行之后生成的图片，发现文字内容字体显示方框 ，需要下载依赖

yum groupinstall "X Window System" -y
yum -y groupinstall Fonts

生产图片

通过maven下载相关依赖，参考官方给出的示例

<dependency>
   <groupId>com.github.kklisura.cdt</groupId>
   <artifactId>cdt-java-client</artifactId>
   <version>2.1.0</version>
</dependency>

图片生成示例具体代码

  public static void main(String[] args) {
    // Create chrome launcher.
    final ChromeLauncher launcher = new ChromeLauncher();

    // Launch chrome either as headless (true) or regular (false).
    final ChromeService chromeService = launcher.launch(false);

    // Create empty tab ie about:blank.
    final ChromeTab tab = chromeService.createTab();

    // Get DevTools service to this tab
    final ChromeDevToolsService devToolsService = chromeService.createDevToolsService(tab);

    // Get individual commands
    final Page page = devToolsService.getPage();

    page.onLoadEventFired(
        event -> {
          System.out.println("Taking screenshot...");

          captureFullPageScreenshot(devToolsService, page, "screenshot.png");

          System.out.println("Done!");

          devToolsService.close();
        });

    // Enable page events.
    page.enable();

    // Navigate to github.com.
    page.navigate("http://github.com");

    devToolsService.waitUntilClosed();
  }

这样就能直接生成测试报告图片