Protractor Image didnt upload on dialogue box? - css

Question

I want to test the image upload functionality using Protractor but my written script didnt work.
This is the image dialogue box.When we click on the dialogue box image it open the window to select desired image.After the selection of image,the box acts like this image.I want to write a script through which i can upload an image and then click on the "Save" button.This is the css of dialogue box.
Given below is the script that i tried but doesn't work. The error message that encountered is this.
var path = require('path');
var fileToUpload = '../new image.jpeg';
var absolutePath = path.resolve('__dirname', fileToUpload);
console.log(absolutePath);
var fileElem=element(by.css('label[for="cropper-file-input"]'));
browser.wait(EC.presenceOf(fileElem), 2000,);
fileElem.sendKeys(absolutePath);

Answer 1

Try the below method. Hope it may help you.
fileUpload(element: ElementFinder, fileElem: ElementFinder, filePath: string): promise.Promise<void> {
//We are using the setFileDetector method to let WebDriver know that we are uploading files from a local directory to a remote server.
//Having this configuration resolves the "Failed: invalid argument: File not found" error that occurs otherwise.
browser.driver.setFileDetector(new utils.remote.FileDetector);
return browser.executeScript(`arguments[0].style.visibility = 'visible'; arguments[0].style.height = '1px'; arguments[0].style.width = '1px'; arguments[0].style.opacity = 1`, element)
.then(() => fileElem.sendKeys(filePath));
}