How to get data from Blob Url to Node js server using Selenium ?

The task was to fetch new images and store them in our db. But since I had no options of finding unique identifier for the images that were displaying on the web page, I thought of considering the image source as the unique identifier. And in my case image source was given in blob url. Blob url is the path to the blob data stored in the browser memory, on every page refresh blob url was changing for every image.

That was the hurdle for me, to compare stored images and new images. After some research I followed below steps to solve the problem.

1. Convert blob url to blob
2. Convert blob to base64 data
3. Store base64 data in db

The steps are pretty simple unless you want to execute these from backend(in my case: node server)

We can make a request to blob url only through frontend as the blob url would be pointing to browser memory.

But I need the data in the node server. As I was using selenium for automation, I could solve this by using driver.executeAsyncScript();

executeAsyncScript is similar to executeScript but It will wait for async operation to be completed and returns the value when callback is called.

And callback function will always be sent in the last index of the arguments array.

var script = function (blobUrl) {

console.log(arguments);

var uri = arguments[0];

var callback = arguments[arguments.length — 1];

var toBase64 = function(buffer){

for(var r,n=new Uint8Array(buffer),t=n.length,a=new Uint8Array(4*Math.ceil(t/3)),i=new Uint8Array(64),o=0,c=0;64>c;++c)i[c]=”ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/”.charCodeAt(c);for(c=0;t-t%3>c;c+=3,o+=4)r=n[c]<<16|n[c+1]<<8|n[c+2],a[o]=i[r>>18],a[o+1]=i[r>>12&63],a[o+2]=i[r>>6&63],a[o+3]=i[63&r];return t%3===1?(r=n[t-1],a[o]=i[r>>2],a[o+1]=i[r<<4&63],a[o+2]=61,a[o+3]=61):t%3===2&&(r=(n[t-2]<<8)+n[t-1],a[o]=i[r>>10],a[o+1]=i[r>>4&63],a[o+2]=i[r<<2&63],a[o+3]=61),new TextDecoder(“ascii”).decode(a)

};

var xhr = new XMLHttpRequest();

xhr.responseType = ‘arraybuffer’;

xhr.onload = function(){ callback(toBase64(xhr.response)) };

xhr.onerror = function(){ callback(xhr.status) };

xhr.open(‘GET’, uri);

xhr.send();

}

driver.executeAsyncScript(script, imgEleSrc).then((result) => {

console.log(result);

})

Heaved a sigh of relief after this worked for me !

Happy Coding!