As we aware, Synthetic Browser Click path monitor doesn't support for File Download actions. However, with help of JavaScript Event, we can perform the same action.
You can follow the below steps,
1. We need to get the Fiddler session which should contain the Downloaded HTTP request and response details
2. Check if the Downloaded HTTP request URL, headers and post data is static or dynamic
3. If it is static then we can use the same data and will create a fetch or XMLHttpRequest JavaScript method and insert this code into the JavaScript Event of your Browser click path monitor
4. If it is dynamic data then we need to get this values from the HTML source code of that page or cookies or some times we need to send the request to the server to get those values. Based on that we need to create a fetch or XMLHttpRequest JavaScript method and insert this code into the JavaScript Event of your Browser click path monitor.
You can find the sample JavaScript code which we can perform the File Download action
api.startAsyncSyntheticEvent();
var tempToken;
var tempTokenrequesturl = "https://testing.com/services/tempToken?client=test&httpStatus=F&csfToken=csfToken&method=GET";
fetch(tempSessionTokenrequesturl, {
"headers": {
"accept": "application/xml, text/xml, */*; q=0.01",
"accept-language": "en-US,en;q=0.9",
"sec-ch-ua": "\"Google Chrome\";v=\"107\", \"Chromium\";v=\"107\", \"Not=A?Brand\";v=\"24\"",
"sec-ch-ua-mobile": "?0",
"sec-ch-ua-platform": "\"Windows\"",
"sec-fetch-dest": "empty",
"sec-fetch-mode": "cors",
"sec-fetch-site": "same-origin",
"x-requested-with": "XMLHttpRequest"
},
"referrer": "https://testing.com/web/",
"method": "GET",
"mode": "cors",
"credentials": "include"
}).then(response => response.text())
.then(data => {
api.info("tempToken Response " + data);
var parser = new DOMParser();
var xmlDOM = parser.parseFromString(data, "text/xml");
var value = xmlDOM.getElementsByTagName("tempToken")[0].childNodes[0].nodeValue;
tempToken = value;
api.info(value);
filedownloadcall();
})
.catch(err => api.fail(err));
function filedownloadcall() {
var filedownloadurl = "https://testing.com/filename=test?wid=123&sid=456&did=789&tempToken=" + tempToken ;
fetch(filedownloadurl, {
"headers": {
"accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
"accept-language": "en-US,en;q=0.9",
"sec-ch-ua": "\"Google Chrome\";v=\"107\", \"Chromium\";v=\"107\", \"Not=A?Brand\";v=\"24\"",
"sec-ch-ua-mobile": "?0",
"sec-ch-ua-platform": "\"Windows\"",
"sec-fetch-dest": "iframe",
"sec-fetch-mode": "navigate",
"sec-fetch-site": "same-origin",
"upgrade-insecure-requests": "1"
},
"method": "GET",
"mode": "cors",
"credentials": "omit"
}).then(response => response.text())
.then(data => {
api.info("File Download Response " + data);
var filecontent = api.getValue("filecontent");
if (data.indexOf(filecontent) >= 0) {
api.info("File Download Success");
api.finish();
} else {
api.fail("File Download Failed");
}
})
.catch(err => api.fail(err));
}
