.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上的项目

项目构建思路

1. 运行程序，传入名称 网址 如：dotnet run baidu https://www.baidu.com
2. 创建一个phanomjs无头浏览器: IWebDriver driver = new PhantomJSDriver();
3. 在浏览器中打开传入网站:driver.Navigate().GoToUrl(sitePage);
4. 执行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);

1. 开始截图:((ITakesScreenshot)driver).GetScreenshot().SaveAsFile("baidu.com",ScreenshotImageFormat.Jpeg)
2. 拼接文本写入Readme.MD,Index.html
3. 关闭无头浏览器,程序结束driver.Quit()

项目文件预览

Program.cs加起来就一百多行代码，完整Program.cs代码请戳这里

程序运行

1. 下载phantomjs，设置环境变量(Travis CI环境提供PhantomJS预装)
2. 安装.net core2.0 SDK
3. 执行命令：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上的项目

欢迎分享值得记录的网站。