https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
写在前面
业务驱动,不驱就不动
一.背景
用Selenium来做前端自动化测试,希望一提代码就来份测试报告:
1.push/merge远程代码
2.自动跑测试用例
3.邮件通知测试结果
由Webhook来连接Git操作和构建过程,这样每次push/merge等Git操作时,Webhook就会(请求)通知构建服务,然后执行整个构建过程,构建完毕后邮件通知
本来Jenkins已经提供一条龙服务了,简单配置一下就好。Webhook触发Jenkins job,同步构建完毕后发邮件出来
但由于前端环境的特殊性(测试用例要在浏览器环境跑),而测试结果也在JS手里,于是就有了异步跑完用例后怎么通知Jenkins的问题
用Selenium起一个浏览器,访问测试页面,等所有case执行完毕(包括异步case),这时才拿到测试结果。而构建脚本可能在浏览器还没打开的时候就执行完毕了,准备发邮件了用例还没跑完
所以先把发邮件的任务拆出来,作为独立的job,专门负责发邮件。那么只缺少JS通知Jenkins发邮件这一环了
二.专门发邮件的job
配置SMTP
在“Jenkins/系统管理/系统设置”里填写SMTP相关配置,以及系统管理员邮件地址,例如:
邮件通知
---
SMTP服务器 smtp.163.com
使用SMTP认证
用户名 xxx
密码 ***
Jenkins Location
---
系统管理员邮件地址 user@163.com
邮件通知部分底部有通过发送测试邮件测试配置
选项,填写收件人试一发,能收到就好
P.S.特别注意填写系统管理员邮件地址,否则永远发不出去(没填发件人)
然后配置“Extended E-mail Notification”,构建后邮件通知的内容在这里设置,例如:
Extended E-mail Notification
---
SMTP server smtp.163.com
Default Content Type HTML(text/html)
Use SMTP Authentication
User Name xxx
Password ***
勾选底部“Enable Debug Mode”方便排查邮件发送失败原因
参数化构建
在“General/参数化构建过程”里设置参数名、默认值及描述,例如:
String Parameter
---
名字 autoTestResult
默认值 自动测试失败
描述 自动测试结果,不通过的用例有哪些
在“构建触发器/触发远程构建 (例如,使用脚本)”里填写token,作为构建口令,例如:
身份验证令牌 mail
在“构建”里执行shell(用来测试参数传递):
echo $autoTestResult
echo 'hoho, the end'
在“构建后操作”里添加“Editable Email Notification”,填写收件人/内容等项,例如:
Project Recipient List user@163.com
Default Subject autoTest通知
Default Content $autoTestResult
然后在“Advanced Settings/Triggers”里添加“Always”,默认只在构建失败时发邮件,改为无脑发
然后尝试一下,手动触发(浏览器访问):
http://localhost:2017/job/mail/buildWithParameters?token=mail&cause=shoujian&autoTestResult=allpassed
一切正常的话,本次构建的“Console Output”面板会出现如下log:
Started by remote host 0:0:0:0:0:0:0:1 with note: shoujian
Building in workspace /Users/Shared/Jenkins/Home/jobs/mail/workspace
Checking for pre-build
Executing pre-build step
Checking if email needs to be generated
No emails were triggered.
[workspace] $ /bin/sh -xe /Users/Shared/Jenkins/tmp/hudson5065606977113971836.sh
+ echo allpassed
allpassed
+ echo hoho
hoho
Checking for post-build
Performing post-build step
Checking if email needs to be generated
Email was triggered for: Always
Sending email for trigger: Always
messageContentType = text/html; charset=UTF-8
Collecting change authors...
build: 17
Adding recipients from project recipient list
Adding recipients from trigger recipient list
Successfully created MimeMessage
Sending email to: user@163.com
Finished: SUCCESS
然后将收到一封邮件:
主题:autoTest通知
内容:allpassed
P.S.如果按照上面的步骤一点一点来,应该一切正常,如果报错或者收不到邮件,请查看Jenkins Email sending fails
三.HTTP触发Jenkins邮件job
由JS发HTTP请求触发Jenkins任务,会遇到3个问题:
-
CSRF保护
-
CORS
-
登录验证(Basic Auth)
默认有跨站请求头伪造保护和跨域限制,而且要求登录(但支持Basic Auth)
如果经服务中转,这些都不是问题,拿到crumb
通过CSRF,无脑跨域,header
验证。但考虑构建工具只在测试环境跑,没必要这么绕,干脆关掉CSRF保护,开启CORS白名单,最后JS可以通过XHR设置header完成Basic Auth登录
关掉CSRF保护
在“Jenkins/管理Jenkins/Configure Global Security”里不勾选防止跨站点请求伪造
这样就不用取crumb
验证了,测试环境,风险不大
开启CORS白名单
有一个CORS插件,专门干这个事情:CORS support for Jenkins
在“Jenkins/系统管理/系统设置/CORS Filter”里填写跨域限制相关响应头,例如:
Is Enabled
Access-Control-Allow-Origins http://localhost:3000
Access-Control-Allow-Methods POST
Access-Control-Allow-Headers Authorization
Access-Control-Max-Age 3600
P.S.如果值有多个,用,
隔开,例如POST,GET
把POST http://localhost:3000
添进白名单,允许XHR读取响应头的Authorization
字段,身份证有效期为3600s(1小时)
P.S.关于CORS的更多信息,请查看跨域资源共享 CORS 详解
XHR登录
new Image()
最方便,但没办法进行Basic Auth。XHR GET也可以,但URL长度限制总不爽,所以选择XHR POST,示例如下:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if((xhr.status >=200 && xhr.status < 300 ) || xhr.status == 304 ){
console.info('jenkins触发成功');
} else {
console.info('jenkins触发失败 ' + xhr.status + '\n' + xhr.responseText);
}
}
};
var result = 'allpassed';
var url = 'http://localhost:2017/job/mail/buildWithParameters?token=mail&cause=shoujian&autoTestResult=' + result;
xhr.open('POST', url, true);
// Basic Auth
var username = 'jenkins', password = '2017';
xhr.setRequestHeader('Authorization', 'Basic ' + btoa(username + ':' + password));
xhr.send(null);
测试用例全部执行完毕后,把测试结果POST出去,通知Jenkins发邮件。到这里前端自动化测试就能跑起来了
P.S.关于XHR Basic Auth的更多信息,请查看Jenkins json REST api with CORS request using jQuery
PHP触发Jenkins参数化构建
如果考虑安全风险,或者希望在跑完测试用例后做更多的事情,可以由服务触发构建,PHP代码如下:
header('Access-Control-Allow-Origin:*');
// 触发构建
// exec("curl -X GET \"http://127.0.0.1:2017/job/mail/build?token=mail&cause=nocause\" --user user:passwd", $res, $rt);
// 参数化构建
exec("curl -X GET \"http://127.0.0.1:2017/job/mail/buildWithParameters?token=mail&cause=nocause&autoTestResult=allpassed\" --user user:passwd", $res, $rt);
if ($rt !== 0) {
echo '出错了<br>';
var_dump($res);
}
else {
echo 'ok';
}
exec
调用curl
发送GET请求,POST方式与之类似,不再赘述
P.S.关于远程触发构建的更多信息,请查看官方文档:Remote access API
四.写在最后
Jenkins搞定了很多细节的工作,比手动实现这样一套构建服务要方便一些,但可配置度越高,控制权就越低,想要完成一些简单的操作,不得不求助于插件或者通过一些绕来绕去的方式
不管怎样,自动跑用例,保证基础设施稳定性是极好的,搞起来