作用:
可集成到WebUI自动化中,通常与Selenium共用,作用是获取到"浏览器对象中的异步请求对于DOM更新已全部结束的标志"
原理:
基于hook技术监控浏览器Ajax请求,在过滤器里使用递减算法拿到浏览器对象实际加载结束的标志
1.下载并引入ajaxhook.js
CDN地址:https://unpkg.com/ajax-hook@2.0.3/dist/ajaxhook.js
2. Demo示例
var CheckResourceAndXHRStatus = new Promise(function (resolve, reject) {
var XHRHandler = 0;
var LockState = undefined;
var cacheStatus = undefined;
ah.proxy({
//请求发起前进入
onRequest: (config, handler) => {
XHRHandler += 1;
LockState = true;
// console.log(config.url);
handler.next(config);
},
//请求过程中发生错误时进入,如超时、网络断开
onError: (err, handler) => {
console.log(err.type);
handler.next(err);
},
//请求有响应时进入:(http状态码错误如404也属于成功响应),加入自定义的过滤器
onResponse: (response, handler) => {
XHRHandler -= 1;
LockState = false;
if (XHRHandler == 0) {
console.log("done");
if (document.readyState === "complete" && LockState == false && XHRHandler == 0) {
console.info("All Resource and XHR loading Success!");
resolve(0);
} else {
if (document.readyState === "complete" && XHRHandler != 0 && LockState == true) {
console.info("Ajax error!");
reject(-1);
} else {
console.info("checkResourceLoadingStatusAndXHRequestStaus Fail!");
reject(-2);
}
}
}
handler.next(response);
}
});
});
CheckResourceAndXHRStatus.then(
function (doneCode) {
//全部完成的标志
console.info("then-resolve");
var logHandler = { name: "then-resolve", timestamp: Math.round(new Date() / 1000), code: doneCode };
console.info(logHandler);
//return true;
},
function (errCode) {
console.info("then-reject");
console.info(errCode);
//return false;
}
);
3. 在自动化代码中调用,用driver.execute_script
包起来
//略