.NET Core+Selenium+Github+Travis CI => SiteHistory

前言

老是三分鐘熱度的我折騰了一個能夠天天自動截取指定網站頁面並保存到Github的項目SiteHistory，感受挺好(每次都這樣)。
想知道YouTube今天的首頁長啥樣麼？點此查看
想知道YouTube2017年8月31日的首頁長啥樣麼？改天再點開
想爲你的網站增長訪客麼？不要問我，我不知道。

那年那站那樣

伴隨着時間，記錄着網站的歷史
記錄下網站如今的樣子，待那年今日
那一年，那個網站，是那個樣子
項目地址：https://github.com/yimogit/SiteHistory

技術棧

1. .NET Core:.NET Core 是.NET Framework的新一代版本，具備跨平臺 (Windows、Mac OSX、Linux) 能力的應用程序開發框架 (Application Framework)。
2. Selenium:一個用於Web應用程序測試的工具。Selenium測試直接運行在瀏覽器中，就像真正的用戶在操做同樣。結合phantomjs等驅動能夠實現頁面自動化。
3. Github:一個面向開源及私有軟件項目的託管平臺，由於只支持git 做爲惟一的版本庫格式進行託管，故名GitHub,又名GayHub
4. Travis CI:採用yaml格式配置，簡潔清新的開源持續集成構建項目。

我將其用來打包vue的純工具站點metools,以及.net core程序(SiteHistory)
啥，還不會？戳這裏→→使用travis-ci自動部署github上的項目

項目構建思路

0. 運行程序，傳入名稱 網址 如：dotnet run baidu https://www.baidu.com
1. 建立一個phanomjs無頭瀏覽器: IWebDriver driver = new PhantomJSDriver();
2. 在瀏覽器中打開傳入網站:driver.Navigate().GoToUrl(sitePage);
3. 執行js使其滾動到底部，觸發懶加載，等待網頁圖片加載

int waitTime=10;
  var myScript = @"var ymtimer=setInterval(function(){
                      if (document.body.scrollHeight - 700 < document.body.scrollTop){
                          window.scroll(0, document.body.scrollHeight)
                          clearInterval(ymtimer);
                          return;
                      }
                      window.scroll(0, document.body.scrollTop + 700)
                  } ," + waitTime * 1000 / 10 + ");";
  //10s中從頭部滾動到底部
  ((IJavaScriptExecutor)driver).ExecuteScript(myScript);
  //等待滾動完畢，圖片也差很少能加載完閉
  System.Threading.Thread.Sleep(1200 * waitTime);

4. 開始截圖:((ITakesScreenshot)driver).GetScreenshot().SaveAsFile("baidu.com",ScreenshotImageFormat.Jpeg)
5. 拼接文本寫入Readme.MD,Index.html
6. 關閉無頭瀏覽器,程序結束driver.Quit()

項目文件預覽

Program.cs加起來就一百多行代碼，完整Program.cs代碼請戳這裏

程序運行

0. 下載phantomjs，設置環境變量(Travis CI環境提供PhantomJS預裝)
1. 安裝.net core2.0 SDK
2. 執行命令：dotnet run 參數1[名稱] 參數2[網頁連接] 參數3[圖片格式] 參數4[等待時間] 參數5[保存目錄] 參數6[能夠執行一些js]
   1. dotnet run baidu https://www.baidu.com/

      保存[https://www.baidu.com]頁面的截圖名稱爲[baidu.jpg]

   2. dotnet run baidu https://www.baidu.com/ png

      指定圖片類型爲png

   3. dotnet run baidu https://www.baidu.com/ jpg 20

      加載完畢後等待20s後截圖(圖片加載或網站速度過慢)

   4. dotnet run baidu https://www.baidu.com/ jpg 10 download-test

      下載的圖片保存到download-test文件夾下

   5. dotnet run baidu https://www.baidu.com/ jpg 10 download-test "document.body.innerHTML='test'

      加載完畢後執行一段js

使用Travis CI 時的 .travis.yml配置

若使用Travis CI 集成 ，要新增網站截圖項，則在travis.yml中script節點下添加命令便可

附Travis CI的環境變量配置圖，具體戳此文章

# 語言爲scharp,系統爲ubuntu14.04(代號trusty),.netcore 版本2.0
# Travis CI提供 phantomjs預裝
language: csharp
dist: trusty
dotnet: 2.0.0

# mono:latest Travis CI默認會安裝mono，測試發現若不安裝mono,Travis CI會在程序截圖時報錯
# 打印組件版本
before_install:
  - dotnet --version
  - phantomjs --version

script:
  - dotnet restore
  - dotnet run ip http://1212.ip138.com/ic.asp png 
  - dotnet run acfun http://www.acfun.cn/ jpg 20
  - dotnet run bilibili https://www.bilibili.com jpg 20
  - dotnet run youtube https://www.youtube.com jpg 20
  - dotnet run google https://www.google.com
  
# 將截圖提交到 ${P_BRANCH} 分支中(gh-pages) 
# export abc='date +%Y%m%d' 獲取年月日
# 腳本將根據時間建立新分支 `gh-pages_20170901`，並更新gh-pages分支
#
after_script:
  - cd download
  - git init
  - git config user.name "${U_NAME}"
  - git config user.email "${U_EMAIL}"
  - git add .
  - git commit -m "add imgs"
  - git remote add orginimgs "https://${GH_TOKEN}@${GH_REF}"
  - export current_date='date +%Y%m%d'
  - echo "current_date:$($current_date)"
  - git push --force --quiet orginimgs master:gh-pages
  - git push --force --quiet orginimgs master:gh-pages_$($current_date)

branches:
  only:
    - master

總結

1. 測試發現IP地址每次都會發生變化,引起無限遐想
2. Linux下獲取年月日字符串
   設置：export current_date='date +%Y%m%d'
   輸出：echo "current_date:$($current_date)"
3. .net core使用Selenium須要引入Nuget包爲：CoreCompat.Selenium.WebDriver

配置中的變量按照此文章配置便可
親測搭配travis-ci食用最佳，Fork以後，前往travis-ci配置便可 參閱文章:使用travis-ci自動部署github上的項目 歡迎分享值得記錄的網站。