My challenge involves interacting with the image loaded on a canvas.
However, I am uncertain about how to handle waiting for the image to load before starting interactions with it in canvas tests.
Using driver.sleep() is not a reliable solution. Here is a snippet of code from the page that includes a canvas element:
<canvas class='ol-unselectable' width='816' height='400' style='width: 100%; height: 100%;'></canvas>
The application is Angular-based.
Looking at the Network tab in the developer console, I can see that there is an Img request during the image loading process.
I believe there may be a way to write some code that checks if the image has loaded into the canvas and then use it through JavaScript executor.
Unfortunately, I am unsure how to go about it. Any assistance would be greatly appreciated.
Update: I attempted to create a custom waiting condition:
exports.isAllImageLoad = function isAllImageLoad(driver) {
return new Condition('image loading', function(driver) {
return driver.executeScript(
'var img = new Image();' +
'img.onload = function() { return true; };' +
'img.onload()'
).then(function(result) {
console.log('image loading: ' + result);
return result;
});
});
};
I tried using it with:
return driver.wait(isAllImageLoad(driver), waitTimeOut);
However, the console shows that the result of img.onload() is null.
Update: I also experimented with the following code:
exports.isAllImageLoad = function isAllImageLoad(driver) {
return new Condition('image loading', function(driver) {
return driver.executeScript(
'var image = new Image();' +
'function mainLoop(){' +
'if(image.complete){' +
'return true;' +
'}else{' +
'return false;' +
'}' +
'}' +
'mainLoop();'
).then(function(result) {
console.log('image loading: ' + result);
return result;
});
});
};
Yet, the outcome remains the same, returning null.