背景介紹

最近在為部門(mén)編寫(xiě)一個(gè)自動(dòng)化測(cè)試工具，工具涉及到一個(gè)功能，即 將自動(dòng)化測(cè)試生成的html報(bào)告截圖，作為郵件正文，html文件上傳到web服務(wù)器以鏈接形式添加到郵件中，最后發(fā)送郵件。

任務(wù)難點(diǎn)

之前從未接觸過(guò)頁(yè)面自動(dòng)截圖相關(guān)的方面，因此如何自動(dòng)進(jìn)行頁(yè)面截圖成為本地調(diào)研方向。

方案思考

在剛接到這個(gè)任務(wù)時(shí)，并不認(rèn)同目前的方案。曾經(jīng)一度認(rèn)為，將html報(bào)告的內(nèi)容寫(xiě)入郵件正文，即可通過(guò)html的形式發(fā)送郵件了。經(jīng)過(guò)嘗試后發(fā)現(xiàn)，郵件不支持帶javascript的html。因此，選擇了預(yù)覽html并自動(dòng)截圖的方案。

編程語(yǔ)言

python 2.7

使用方案 :

selenium + phantomjs

方案介紹

實(shí)現(xiàn)自動(dòng)預(yù)覽html并截圖有以下幾個(gè)步驟：

1. 瀏覽器打開(kāi)html

2. 對(duì)瀏覽器頁(yè)面進(jìn)行截圖

3. 將截圖保存到指定位置

最初，筆者使用了這個(gè)實(shí)現(xiàn)方案：

(1).使用webbrowser 庫(kù)打開(kāi)默認(rèn)瀏覽器，顯示url

(2).使用PIL.ImageGrab庫(kù)的對(duì)屏幕進(jìn)行進(jìn)行截圖

到此為止，筆者已經(jīng)獲得html的預(yù)覽截圖，一切似乎很順利，但接下來(lái)

發(fā)現(xiàn)了以下幾個(gè)問(wèn)題：

(1).打開(kāi)默認(rèn)瀏覽器時(shí)，默認(rèn)瀏覽器是什么，瀏覽器處于什么狀態(tài)都不知曉。

(2).瀏覽器顯示html，會(huì)有一個(gè)顯示的打開(kāi)瀏覽器，瀏覽器打開(kāi)html的動(dòng)作出現(xiàn)，如果用戶此時(shí)產(chǎn)生了其他動(dòng)作，必定會(huì)對(duì)之后的截圖產(chǎn)生影響。

(3).屏幕截圖，將整個(gè)屏幕都進(jìn)行截圖，截圖中除了html頁(yè)面正文，同時(shí)也包含了瀏覽器等當(dāng)前屏幕包含的所有元素，暴漏了用戶隱私。

(4).如果頁(yè)面較大，頁(yè)面會(huì)產(chǎn)生上下翻頁(yè)的效果，屏幕截圖無(wú)法應(yīng)對(duì)此種頁(yè)面，截圖看到的報(bào)告只有一部分。

基于上述問(wèn)題，筆者放棄了這個(gè)看起來(lái)簡(jiǎn)單有效的方案。從而

對(duì)方案挖掘了一些深層需求：

(1).打開(kāi)瀏覽器必須隱式調(diào)用，用戶無(wú)法看到工具在做什么，從而不會(huì)通過(guò)誤操作對(duì)工具產(chǎn)生影響。

(2).截圖必須針對(duì)瀏覽器頁(yè)面正文 ，保證無(wú)其他冗余信息，且截到頁(yè)面全圖根據(jù)這些需求，筆者經(jīng)過(guò)一系列嘗試終于發(fā)現(xiàn)了selenium + phantomjs。

python selenium : 是python對(duì)瀏覽器自動(dòng)化測(cè)試框架selenium的擴(kuò)展，selenium庫(kù)支持了selenium所包含大部分功能。

phantomjs ： 是一個(gè)無(wú)界面的，可腳本編程的webkit瀏覽器，python selenium同樣提供對(duì)phantomjs的支持。

接下來(lái)一切就很容易了：

(1).安裝python selenium 庫(kù)，推薦使用pip快速安裝最新版本

(2).下載phantomjs.exe，將其添加到環(huán)境變量 path 中 。方便起見(jiàn)可以直接放在python的安裝目錄根目錄下

(3).編寫(xiě)測(cè)試代碼

簡(jiǎn)單講解一下代碼：

fromselenium importwebdriver     #從selenium庫(kù)導(dǎo)入webdirver

brower=webdriver.PhantomJS()    #使用webdirver.PhantomJS()方法新建一個(gè)phantomjs的對(duì)象，這里會(huì)使用到phantomjs.exe，環(huán)境變量path中找不到phantomjs.exe，則會(huì)報(bào)錯(cuò)

brower.get(url)           #使用get()方法，打開(kāi)指定頁(yè)面。注意這里是phantomjs是無(wú)界面的，所以不會(huì)有任何頁(yè)面顯示

brower.maximize_window()      #設(shè)置phantomjs瀏覽器全屏顯示

brower.save_screenshot(picName)   #使用save_screenshot將瀏覽器正文部分截圖，即使正文本分無(wú)法一頁(yè)顯示完全，save_screenshot也可以完全截圖

brower.close()           #關(guān)閉phantomjs瀏覽器，不要忽略了這一步，否則你會(huì)在任務(wù)瀏覽器中發(fā)現(xiàn)許多phantomjs進(jìn)程

執(zhí)行了上述代碼后，我們看一下截圖效果吧：

以上這篇Python 實(shí)現(xiàn)網(wǎng)頁(yè)自動(dòng)截圖的示例講解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。