[Python] 怎么把HTML的報告轉換為圖片，利用無頭瀏覽器

How to convert HTML Report to picture format in Email? So that we can see the automation report also at home or on mobile phone anywhere.

We tried to use phantomJs to get the full-page screenshot of HTML, it doesn't work well on some computers, then we found that the newest Chrome doesn't support it anymore, and Chrome has use its Headless mode to replace phantomJs.

Version 1 : phantomJs

# -*- coding: utf-8 -*-
import time
import os

from selenium import webdriver 
jenkinsJobName=os.getenv("JOB_NAME")
url="http://10.2.3.3/testAgent/AutoAnaylsisReport.html"
print url
save_fn="buildNumResult.PNG"
driver = webdriver.PhantomJS()
driver.maximize_window()
driver.get(url) # Load page
time.sleep(30) 
driver.save_screenshot(save_fn)
driver.close()
time.sleep(5) 
os.system("taskkill /F /IM phantomjs.exe")

Version 2: Chrome Headless

# -*- coding: utf-8 -*-
import time
import os

from selenium import webdriver
from selenium.webdriver.common.keys import Keys


url="http://10.2.4.1/testAgent/BillingAnaylisisReport.html"
print url
save_fn="buildNumResult.PNG"

option = webdriver.ChromeOptions()
option.add_argument('--headless')
option.add_argument('--disable-gpu')
option.add_argument("--window-size=1280,1024")
option.add_argument("--hide-scrollbars")

driver = webdriver.Chrome(chrome_options=option)

driver.get(url)
print(driver.title)

scroll_width = driver.execute_script('return document.body.parentNode.scrollWidth')
scroll_height = driver.execute_script('return document.body.parentNode.scrollHeight')
driver.set_window_size(scroll_width, scroll_height)
driver.save_screenshot(save_fn)
driver.quit()

Version 3 , 為了把截圖放在郵件里直接展示，需要把圖片截小一點。然后在郵件內容的HTML中加上一行：${FILE,path="report.html"}

# -*- coding: utf-8 -*-
import time,os
from PIL import Image
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
time.sleep(10)
url="http://10.249.4.17/testRailAgent/BillingAnaylisisReport.html?jenkinsJobName=Billing_Office_Live&projectUATName=Billing_Office_UAT&type=1"
print url
save_fn="buildNumResult.PNG"

option = webdriver.ChromeOptions()
option.add_argument('--headless')
option.add_argument('--disable-gpu')
option.add_argument("--window-size=1280,1024")
option.add_argument("--hide-scrollbars")

driver = webdriver.Chrome(chrome_options=option)

driver.get(url)
time.sleep(30)

scroll_width = driver.execute_script('return document.body.parentNode.scrollWidth')
scroll_height = driver.execute_script('return document.body.parentNode.scrollHeight')
driver.set_window_size(scroll_width, scroll_height)
driver.save_screenshot(save_fn)
time.sleep(5)
driver.quit()
im = Image.open(save_fn)
w,h  = im.size
imgCount = h/2000+1
size=h/imgCount
left = 0  
shang = 0  
index = 0  
for i in range(imgCount):
    i=i+1
    shang += 1   
    a = size * left 
    b = size *(i-1) 
    c = w  
    d = size * i 
    region = im.crop((a, b, c, d))
    region.save("report%s.png" %i)


fp = open("report.html","w+b") #打開一個文本文件
for i in range(1,imgCount+1):
	fp.write('<img src="report'+str(i)+'.png"></img>') #寫入數據
fp.close() #關閉文件