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

时间 2020-08-10

标签 core+selenium+github+travis core selenium github travis sitehistory 栏目 Git 繁體版

原文原文链接

前言

老是三分钟热度的我折腾了一个能够天天自动截取指定网站页面并保存到Github的项目SiteHistory，感受挺好(每次都这样)。
想知道YouTube今天的首页长啥样么？点此查看
想知道YouTube2017年8月31日的首页长啥样么？改天再点开
想为你的网站增长访客么？不要问我，我不知道。html

那年那站那样

伴随着时间，记录着网站的历史
记录下网站如今的样子，待那年今日
那一年，那个网站，是那个样子
项目地址：https://github.com/yimogit/SiteHistoryvue

技术栈

.NET Core:.NET Core 是.NET Framework的新一代版本，具备跨平台 (Windows、Mac OSX、Linux) 能力的应用程序开发框架 (Application Framework)。
Selenium:一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中，就像真正的用户在操做同样。结合phantomjs等驱动能够实现页面自动化。
Github:一个面向开源及私有软件项目的托管平台，由于只支持git 做为惟一的版本库格式进行托管，故名GitHub,又名GayHub
Travis CI:采用yaml格式配置，简洁清新的开源持续集成构建项目。

我将其用来打包vue的纯工具站点metools,以及.net core程序(SiteHistory)
啥，还不会？戳这里→→使用travis-ci自动部署github上的项目git

项目构建思路

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

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

项目文件预览

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

程序运行

下载phantomjs，设置环境变量(Travis CI环境提供PhantomJS预装)
安装.net core2.0 SDK
执行命令：dotnet run 参数1[名称] 参数2[网页连接] 参数3[图片格式] 参数4[等待时间] 参数5[保存目录] 参数6[能够执行一些js]
1. dotnet run baidu https://www.baidu.com/
  
  保存[https://www.baidu.com]页面的截图名称为[baidu.jpg]ubuntu
2. dotnet run baidu https://www.baidu.com/ png
  
  指定图片类型为pngwindows
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

总结

测试发现IP地址每次都会发生变化,引起无限遐想
Linux下获取年月日字符串
设置：export current_date='date +%Y%m%d'
输出：echo "current_date:$($current_date)"
.net core使用Selenium须要引入Nuget包为：CoreCompat.Selenium.WebDriver

配置中的变量按照此文章配置便可
亲测搭配travis-ci食用最佳，Fork以后，前往travis-ci配置便可参阅文章:使用travis-ci自动部署github上的项目欢迎分享值得记录的网站。