How to implement the File Download action on Browser click path monitor with help of JavaScript Event

Mareeswaran — Tue, 11 Apr 2023 14:18:07 GMT

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));

}

Re: How to implement the File Download action on Browser click path monitor with help of JavaScript Event

ChadTurner — Fri, 12 May 2023 18:58:28 GMT

Thank you for sharing this! I'm sure it will help out many community members.

article How to implement the File Download action on Browser click path monitor with help of JavaScript Event in Troubleshooting

How to implement the File Download action on Browser click path monitor with help of JavaScript Event

Re: How to implement the File Download action on Browser click path monitor with help of JavaScript Event